Bootstrap 表格
(一)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="width: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 />
效果图如下:
![](https://images2015.cnblogs.com/blog/1137334/201705/1137334-20170505141224757-1803171826.png)
条纹表格
<table class="table table-striped" style="width: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 />
效果图如下:
![](https://images2015.cnblogs.com/blog/1137334/201705/1137334-20170505141355367-394995766.png)
边框表格
<table class="table table-bordered" style="width: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 />
效果图如下:
![](https://images2015.cnblogs.com/blog/1137334/201705/1137334-20170505141445351-760909821.png)
鼠标悬停
<table class="table table-hover" style="width: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 />
效果图如下:
![](https://images2015.cnblogs.com/blog/1137334/201705/1137334-20170505141549336-332592102.png)
<table class="table table-condensed" style="width: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 />
效果图如下:
![](https://images2015.cnblogs.com/blog/1137334/201705/1137334-20170505141644242-1586419149.png)
(二)Bootstrap表格行或单元格的类样式(用于设置背景颜色)
(1).active 对某一特定的行或单元格应用悬停颜色
(2).success 表示一个成功的或积极的动作
(3).warning 表示一个需要注意的警告
(4).danger 表示一个危险的或潜在的负面动作
<h1 style="text-align:center">Bootstrap表格行或单元格的类样式(用于设置背景颜色)</h1> <table class="table table-striped" style="width: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 />
效果图如下:
![](https://images2015.cnblogs.com/blog/1137334/201705/1137334-20170505141734414-931331260.png)
(三)响应式表格
通过把任意的 .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>
效果图如下:
![](https://images2015.cnblogs.com/blog/1137334/201705/1137334-20170505141846398-839229489.png)