就最初可用的东西而言,BS3 和 BS4 之间没有太大变化——您在 BS3 中习惯使用的所有东西在 BS4 中仍然以相同的方式工作。但是,有一些新的类允许您创建一些相当不同的表外观。
最基本的例子仍然是将旧的<table>
标签与<th>
、<td>
、<tr>
、<thead>
和<tbody>
一起使用,然后将table
类应用到主表元素中。
代码清单 39:基本 BS4 表
<!-- Page content goes here
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Position</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap
4</td>
<td>Free</td>
<td>2</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Foundation</td>
<td>Free/Paid</td>
<td>3</td>
</tr>
<tr>
<th scope="row">3</th>
<td>UI
Kit</td>
<td>Free</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
关于代码清单 39 需要注意的重要事情是<thead>
和<tbody>
的使用。
您必须以这种方式组织您的表格;否则,Bootstrap 将无法为您正确地设计它们。这是一件好事,因为 HTML5 规范规定表应该这样构造,这样屏幕阅读器和辅助技术才能更好地描述表的各个部分。
如果你已经走了这么远,你很清楚 BS4 不仅是为移动优先设计的,而且还非常依赖于旨在使辅助技术变得更容易的语义和结构。我在这本书里没有讲太多,但是 BS4 也有很多对 ARIA 角色之类的东西的支持,如果你热衷于把你的布局标记成对屏幕阅读器尽可能友好,那么你也应该在你的 HTML 中添加 ARIA 属性。我不会在这本书里使用 ARIA,但是要注意(特别是如果你正在阅读 Bootstrap 文档的话)BS4 团队确实非常大力地推动 ARIA,这是你在标记代码时绝对应该考虑的事情。
如果您的表工作正常,那么您应该会在浏览器中看到以下内容。
图 40:代码清单 39 生成的基本 BS4 表
BS4 中添加到表格中的新样式选项之一是能够给整个表格一种倒置或深色的样式,并且仍然使用所有其他的东西,例如边框和上下文颜色。
要使您的表完全变成黑色,就像在<table>
标签中添加一个额外的类名一样简单,如代码清单 40 所示。
代码清单 40:创建一个倒排表
<!-- Page content goes here
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Position</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap
4</td>
<td>Free</td>
<td>2</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Foundation</td>
<td>Free/Paid</td>
<td>3</td>
</tr>
<tr>
<th scope="row">3</th>
<td>UI
Kit</td>
<td>Free</td>
<td>4</td>
</tr>
</tbody>
</table>
在浏览器中呈现的代码清单 40 应该如下所示。
图 41:代码清单 40 生成的倒排表
如果您只想反转表头,那么您可以将dark
类添加到<thead>
标签中,如代码清单 41 所示。
代码清单 41:只反转标题
<!-- Page content goes here
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Position</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
在代码清单 41 中,我删除了主表体,因为它与代码清单 40 完全相同。需要注意的是在<thead>
标签中添加了额外的类,这产生了图 42 所示的表格。
图 42:带有反向标题的表格
你也可以使用thead-light
和table-light
来应用一种浅灰色,给你几种不同的颜色组合供你选择,你可以根据自己的内心内容自由混合搭配。
您可能已经注意到标题文本比其他文本略粗。你可能会认为这是因为文本在<th>
标签中,这是部分原因。但是,如果仔细观察,您会注意到第一列中的文本也是粗体的。
如果您查看代码清单 40 和 41 中的代码,您会注意到第一列中的每个<td>
标签都附加了一个scope
属性。
BS4 注意到了这一点,并使字体略粗,以显示行或列是其适当方向的标题。你可以在这个 W3C 工作组笔记中找到更多关于这项技术的信息。
| | 注意:作用域属性不常用,不推荐使用,因此在未来的浏览器中可能根本不支持它。尽管如此,如果你使用它,BS4 会看到它,并相应地改变外观。 |
您可以通过向<table>
标签添加table-striped
类来使表格中的行分条,还可以通过添加table-bordered
来添加边框,如代码清单 42 所示。
代码清单 42:一个带条纹和边框的表
<!-- Page content goes here
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table table-bordered
table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Position</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap
4</td>
<td>Free</td>
<td>2</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Foundation</td>
<td>Free/Paid</td>
<td>3</td>
</tr>
<tr>
<th scope="row">3</th>
<td>UI
Kit</td>
<td>Free</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
在 Chrome 中渲染,这会给你以下输出。
图 43:应用了分条和加边类的 BS4 表
您还可以添加各种深色和浅色前缀,如图 43 所示,样式将适应所选的配色方案。
许多表格都有悬停颜色和行突出显示等功能。BS4 也提供了所有这些功能,使用简单、直观的类名就可以轻松实现。
将table-hover
添加到表类列表中。
代码清单 43:表悬停类
<!-- Page content goes here
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Position</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
我不打算显示代码清单 43 的输出,因为在屏幕截图中捕捉移动的悬停栏并不容易,但是如果您将代码清单 43 中的代码放入模板文件,在浏览器中打开该文件,然后将指针移动到表格上方,您将看到高亮栏。
您可以使用一组上下文颜色为单个行或单元格着色,这些颜色与文本着色实用程序使用的标识符相同。
如果要对整行进行着色,将其应用到<tr>
标记,如果只对单元格进行着色,将其应用到<td>
标记。
代码清单 44:表格颜色
<!-- Page content goes here
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Position</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr class="table-primary">
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr class="table-secondary">
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr class="table-success">
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr class="table-danger">
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr class="table-warning">
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr class="table-info">
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr class="table-light">
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
<tr class="table-dark">
<th scope="row">1</th>
<td>Bootstrap
3</td>
<td>Free</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
图 44:引导 4 种表格颜色
你可以对表格做更多的事情,比如当屏幕太窄时让它们水平滚动,当使用table-dark
和其他修改器时使用文本类应用更亮的颜色。
你可以在官方文档中找到这些以及更多的内容。