3.4.6　行级元素样式

Bootstrap为表格的tr元素提供了5种额外的样式，用于控制tr的背景颜色。样式如表3-2所示。

3.4.6　行级元素样式 - 图1

其使用方式非常简单，在tr元素（或者td元素）上应用相应的class样式即可。示例如下：

  1.     <tr class="active">
  2.         <td>1</td>
  3.         <td>JavaScript编程精解</td>
  4.         <td>机械工业出版社</td>
  5.         <td>汤姆大叔(译)</td>
  6.     </tr>

运行上述示例后的效果如图3-16所示。

3.4.6　行级元素样式 - 图2 图3-16　行级元素运行效果

除了active样式以外，其他4个样式在和.table-hover样式一起用的时候，Bootstrap也相应地设置了鼠标悬停高亮的颜色，所以如果需要添加额外颜色的tr行级样式，也需要注意这个设置。示例源码如下：

  1. // 源码1563行
  2. .table > thead > tr > td.danger,  .table > tbody > tr > td.danger,  .table > 
  3.     tfoot > tr > td.danger,
  4. /* 此处省略了一些选择符*/
  5. .table > thead > tr.danger > td,  .table > tbody > tr.danger > td,  .table > 
  6.     tfoot > tr.danger > td {
  7.   background-color: #f2dede;            /* danger样式的tr背景色*/
  8. }
  9. .table-hover > tbody > tr > td.danger:hover,
  10. /* 此处省略了一些选择符*/
  11. .table-hover > tbody > tr.danger:hover > td {
  12.   background-color: #ebcccc; /* table-hover和danger一起使用时,鼠标悬停时的tr背景色*/
  13. }