Bootstrap 表格

<//link href="~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css" rel=“stylesheet” />

下载了 CSS 样式之后就可以写 HTML 代码了，我用的编程软件是 Visual Studio 2015，简称 VS，你也可以在其他编程软件中使用，如 Adobe Dreamweaver CC 2017，简称 DW。其实这个例子在 VS 和 DW 中写的代码都是一样的。都是在 head 里面引用 CSS 链接，在 body 里面写表格设计的代码。在 VS 中代码如图 1：


图 1

效果图如图 2：

图 2

上面这例子就是体现了 Bootstrap 和 layui 之间的一些互补，具体使用哪个就根据实际来决定，有了 Bootstrap 和 layui，它们会帮助你快速高效的运用表格。

使用 Bootstrap 表格也就意味着任何嵌套表格都将以与父类型相同的方式进行样式化，Bootstrap 4 继承了所有的表格样式，它样式是根据 class 来实现的，那它到底还有哪些样式呢？

1、table class=“table table-dark”：设置表格的颜色（深色或浅色）

2、thead class=“thead-dark”：设置表头的颜色（浅黑或深灰）

3、table class=“table table-striped”：设置条纹状表格，

优点：可以产生逐行颜色强烈对比的表格样式（以及增加反转），通俗一点就是好区分行，在看数据时不容易看错行

4、table class="table table-bordered：设置表格的边框和间隙，使表格看起来更有整齐。这个边框的颜色会根据表格的颜色自行适应，如果表格为白色它边框就会显示浅灰色，如果表格为深灰色，边框就会显示为白色。

5、table class=“table table-hover”：设置表格的悬停效果，其实就是给表格添加伪类，让鼠标在该行时出现状态提示。

6、table class=“table table-sm”：设置表格的 padding 值缩减一半，使表格更加紧凑。

7、tr class=“table-primary”：设置表格行的颜色。可以运用在提示上面。