Bootstrap3 表格的情景类

表格的情景类

除了可以为表格添加样式外，Bootstrap还专门为表格提供了 4 个可选的情景类，这些情景类通过添加特殊的背景颜色来表达不同的含义。见表 2‑2：

表 2‑2 表格行的情景类

类	含义
.active	为表格的行或单元格上应用鼠标悬停时的颜色
.success	表示成功或积极的行为
.info	作为默认样式的替代样式
.warning	表示可能需要引起注意的警告
.danger	表示危险或存在潜在负面影响的行为

可以给表格的 <tr>、<th>、<td> 应用指定的情景类，来为特定行、标题单元格、数据单元格添加特殊的背景颜色。如：

1. <table class="table">
2.   <thead>
3.     <tr>
4.       <th>#</th>
5.       <th>Column heading</th>
6.       <th>Column heading</th>
7.       <th>Column heading</th>
8.     </tr>
9.   </thead>
10.   <tbody>
11.     <tr class="active">
12.       <th scope="row">1</th>
13.       <td>Column content</td>
14.       <td>Column content</td>
15.       <td>Column content</td>
16.     </tr>
17.     <tr>
18.       <th scope="row">2</th>
19.       <td>Column content</td>
20.       <td>Column content</td>
21.       <td>Column content</td>
22.     </tr>
23.     <tr class="success">
24.       <th scope="row">3</th>
25.       <td>Column content</td>
26.       <td>Column content</td>
27.       <td>Column content</td>
28.     </tr>
29.     <tr>
30.       <th scope="row">4</th>
31.       <td>Column content</td>
32.       <td>Column content</td>
33.       <td>Column content</td>
34.     </tr>
35.     <tr class="info">
36.       <th scope="row">5</th>
37.       <td>Column content</td>
38.       <td>Column content</td>
39.       <td>Column content</td>
40.     </tr>
41.     <tr>
42.       <th scope="row">6</th>
43.       <td>Column content</td>
44.       <td>Column content</td>
45.       <td>Column content</td>
46.     </tr>
47.     <tr class="warning">
48.       <th scope="row">7</th>
49.       <td>Column content</td>
50.       <td>Column content</td>
51.       <td>Column content</td>
52.     </tr>
53.     <tr>
54.       <th scope="row">8</th>
55.       <td>Column content</td>
56.       <td>Column content</td>
57.       <td>Column content</td>
58.     </tr>
59.     <tr class="danger">
60.       <th scope="row">9</th>
61.       <td>Column content</td>
62.       <td>Column content</td>
63.       <td>Column content</td>
64.     </tr>
65.   </tbody>
66. </table>

效果如图 2‑45所示：

图2-45 为表格应用情景类

通过为表格中的一行或一个单元格添加颜色而赋予不同的意义，只是提供了一种视觉上的表现，并不能为使用辅助技术（如，屏幕阅读器）浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的意义，能够通过相应行或单元格中的可见文本内容本身表达出来，或者通过包含额外的方式来表达出来。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。