表格--表格行的类，玩转Bootstrap（基础）教程-慕课网

表格--表格行的类

Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

其使用非常的简单，只需要在<tr>元素中添加上表对应的类名，就能达到你自己需要的效果：

<tr class="active">
    <td>…</td>
</tr>

对应的源码，请查看bootstrap.css文件中第1484行~第1583行。

特别提示：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，所以如果需要给tr元素添加其他颜色样式时，在”.table-hover”表格中也要做相应的调整。

注意要实现悬浮状态，需要在<table>标签上加入table-hover类。

如下代码：

<table class="table-hover">

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>表格行的类</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>类名</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>.active</td>
<td>表示当前活动的信息</td>
</tr>
<tr class="success">
<td>.success</td>
<td>表示成功或者正确的行为</td>
</tr>
<tr class="info">
<td>.info</td>
<td>表示中立的信息或行为</td>
</tr>
<tr class="warning">
<td>.warning</td>
<td>表示警告，需要特别注意</td>
</tr>
<tr class="danger">
<td>.danger</td>
<td>表示危险或者可能是错误的行为</td>
</tr>
</tbody>
</table>
</body>
</html>

表格--表格行的类