一、说明
bootstrap 也重置了表格这个标签，加入了表格常用的样式，比如隔行换色，加边框等，下面是 Bootstrap 的表格类名，它们可以组合使用
二、表格属性
1、table
- 作用
添加基本样式 - 栗子
<table class="table">
2、table-striped
- 作用
隔行换色 - 栗子
<table class="table table-striped">
3、table-bordered
- 作用
给表格添加边框 - 栗子
<table class="table table-striped table-bordered">
4、table-hover
- 作用
给每一行添加一个激活状态 - 栗子
<table class="table table-hover">
5、table-condensed
- 作用
让表格更加紧凑 - 栗子
<table class="table table-condensed">
三、行与者单元格
1、active
- 作用
鼠标悬停在行或单元格上 - 栗子
<tr class="active"> <td class="active">
2、success
- 作用
标识成功或积极的动作 - 栗子
<tr class="success"> <td class="success">
3、info
- 作用
标识普通的提示信息或动作 - 栗子
<tr class="info"> <td class="info">
4、warning
- 作用
标识警告或需要用户注意 - 栗子
<tr class="warning"> <td class="warning">
5、danger
- 作用
标识危险或潜在的带来负面影响的动作 - 栗子
<tr class="danger"> <td class="danger">
四、其它
1、sr-only
- 作用
隐藏行 - 栗子
<tr class="sr-only">
2、table-responsive
- 作用
表格父元素设置响应式，小于 768px 出现边框 - 栗子
<tr class="sr-only">
五、综合
<div class="row">
<table class="table table-bordered table-condensed table-hover table-responsive" >
<tr>
<th>ID</th>
<th>用户名</th>
<th>性别</th>
<th>手机</th>
<th>邮箱</th>
<th>地址</th>
<th>加入时间</th>
<th>状态</th>
</tr>
<tr class="success">
<td>1</td>
<td>老王</td>
<td>男</td>
<td>110</td>
<td>123@163.com</td>
<td>三里屯</td>
<td>2017-10-25</td>
<td>激活</td>
</tr>
<tr class="warning">
<td>1</td>
<td>老王</td>
<td>男</td>
<td>110</td>
<td>123@163.com</td>
<td>三里屯</td>
<td>2020-10-25</td>
<td>激活</td>
</tr>
<tr class="danger">
<td>1</td>
<td>老王</td>
<td>男</td>
<td>110</td>
<td>123@163.com</td>
<td>三里屯</td>
<td>2020-10-25</td>
<td>激活</td>
</tr>
<tr class="info">
<td>1</td>
<td>老王</td>
<td>男</td>
<td>110</td>
<td>123@163.com</td>
<td>三里屯</td>
<td>2020-10-25</td>
<td>激活</td>
</tr>
<tr>
<td>1</td>
<td>老王</td>
<td>男</td>
<td>110</td>
<td>123@163.com</td>
<td>三里屯</td>
<td>2020-10-25</td>
<td>激活</td>
</tr>
</table>
</div>
