(一)Bootstrap表格类样式
(1).table 为任意 <table> 添加基本样式 (只有横向分隔线)
(2
).table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
(3).table-bordered 为所有表格的单元格添加边框
(4).table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
(5).table-condensed 让表格更加紧凑
(二)Bootstrap表格行或单元格的类样式(用于设置背景颜色)
(1).active 对某一特定的行或单元格应用悬停颜色
(2).success 表示一个成功的或积极的动作
(3).warning 表示一个需要注意的警告
(4).danger 表示一个危险的或潜在的负面动作
(三)响应式表格
通过把任意的 .table 包在 .table-responsive 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body>
(一)Bootstrap表格类样式
(1).table 为任意 <table>添加基本样式 (只有横向分隔线)
(2).table-striped 在<tbody>内添加斑马线形式的条纹 ( IE8 不支持)
(3).table-bordered 为所有表格的单元格添加边框
(4).table-hover 在<tbody>内的任一行启用鼠标悬停状态
(5).table-condensed 让表格更加紧凑-->
<table class="table" style="60vw;margin:auto"> <caption><h1 style="text-align:center">基本表格</h1></caption> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>1</td> <td>李易峰</td> <td>29</td> </tr> <tr> <td>2</td> <td>赵丽颖</td> <td>28</td> </tr> <tr> <td>3</td> <td>杨洋</td> <td>23</td> </tr> <tr> <td>4</td> <td>郑爽</td> <td>21</td> </tr> </table> <br /> <hr />
效果图如下：
条纹表格
<table class="table table-striped" style="60vw;margin:auto"> <caption><h1 style="text-align:center">条纹表格</h1></caption> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>1</td> <td>李易峰</td> <td>29</td> </tr> <tr> <td>2</td> <td>赵丽颖</td> <td>28</td> </tr> <tr> <td>3</td> <td>杨洋</td> <td>23</td> </tr> <tr> <td>4</td> <td>郑爽</td> <td>21</td> </tr> </table> <br /> <hr />
效果图如下：
边框表格
<table class="table table-bordered" style="60vw;margin:auto">
<caption><h1 style="text-align:center">边框表格</h1></caption>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>1</td>
<td>李易峰</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>赵丽颖</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>杨洋</td>
<td>23</td>
</tr>
<tr>
<td>4</td>
<td>郑爽</td>
<td>21</td>
</tr>
</table>
<br />
<hr />
效果图如下：
鼠标悬停
<table class="table table-hover" style="60vw;margin:auto"> <caption><h1 style="text-align:center">鼠标悬停</h1></caption> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>1</td> <td>李易峰</td> <td>29</td> </tr> <tr> <td>2</td> <td>赵丽颖</td> <td>28</td> </tr> <tr> <td>3</td> <td>杨洋</td> <td>23</td> </tr> <tr> <td>4</td> <td>郑爽</td> <td>21</td> </tr> </table> <br /> <hr />
效果图如下：
<table class="table table-condensed" style="60vw;margin:auto"> <caption><h1 style="text-align:center">表格更加紧凑</h1></caption> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>1</td> <td>李易峰</td> <td>29</td> </tr> <tr> <td>2</td> <td>赵丽颖</td> <td>28</td> </tr> <tr> <td>3</td> <td>杨洋</td> <td>23</td> </tr> <tr> <td>4</td> <td>郑爽</td> <td>21</td> </tr> </table> <br /> <hr />
效果图如下：
（二)Bootstrap表格行或单元格的类样式(用于设置背景颜色)
(1).active 对某一特定的行或单元格应用悬停颜色
(2).success 表示一个成功的或积极的动作
(3).warning 表示一个需要注意的警告
(4).danger 表示一个危险的或潜在的负面动作
<h1 style="text-align:center">Bootstrap表格行或单元格的类样式(用于设置背景颜色)</h1> <table class="table table-striped" style="60vw;margin:auto"> <caption><h1 style="text-align:center">条纹表格</h1></caption> <tr class="active"> <td>序号</td> <td>姓名</td> <td>年龄</td> </tr> <tr class="success"> <td>1</td> <td>李易峰</td> <td>29</td> </tr> <tr class="warning"> <td>2</td> <td>赵丽颖</td> <td>28</td> </tr> <tr class="danger"> <td>3</td> <td>杨洋</td> <td>23</td> </tr> <tr class="alert-success"> <td>4</td> <td>郑爽</td> <td>21</td> </tr> </table> <br /> <hr />
效果图如下：
(三)响应式表格
通过把任意的 .table 包在 .table-responsive 内，
您可以让表格水平滚动以适应小型设备（小于 768px）
当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
<div class="table-responsive"> <table class="table"> <caption><h1 style="text-align:center">响应式表格</h1></caption> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> </tr> <tr> <td>1</td> <td>李易峰</td> <td>29</td> </tr> <tr> <td>2</td> <td>赵丽颖</td> <td>28</td> </tr> <tr> <td>3</td> <td>杨洋</td> <td>23</td> </tr> <tr> <td>4</td> <td>郑爽</td> <td>21</td> </tr> </table> </div> </body> </html>
效果图如下：
