首页 > 代码库 > Bootstrap表格
Bootstrap表格
前面的话
Bootstrap为我们提供了非常好看且易用的表格样式，利用Boostrap可以快速的创建出不同样式的表格，本文将详细介绍Boostrap表格
基本实例
Boostrap将表格<table>的样式重置如下
table { background-color: transparent; border-spacing: 0; border-collapse: collapse;}
<table> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody></table>
<iframe style="width: 100%; height: 146px;" src="http://sandbox.runjs.cn/show/noy8mo6r" frameborder="0" width="320" height="240"></iframe>
为任意<table>标签添加.table类可以为其赋予基本的样式—少量的内边距(padding)和水平方向的分隔线
<table class="table"> ...</table>
<iframe style="width: 100%; height: 214px;" src="http://sandbox.runjs.cn/show/fmbwpdfv" frameborder="0" width="320" height="240"></iframe>
条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式
[注意]条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被IE8-支持
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9;}<table class="table table-striped"> ...</table>
<iframe style="width: 100%; height: 214px;" src="http://sandbox.runjs.cn/show/so9ndxfu" frameborder="0" width="320" height="240"></iframe>
带边框表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框
<table class="table table-bordered"> ...</table>
<iframe style="width: 100%; height: 216px;" src="http://sandbox.runjs.cn/show/a8kvp3ss" frameborder="0" width="320" height="240"></iframe>
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
<table class="table table-hover"> ...</table>
.table-hover > tbody > tr:hover { background-color: #f5f5f5;}<iframe style="width: 100%; height: 216px;" src="http://sandbox.runjs.cn/show/mi0jqtxw" frameborder="0" width="320" height="240"></iframe>
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半
<table class="table table-condensed"> ...</table>
<iframe style="width: 100%; height: 190px;" src="http://sandbox.runjs.cn/show/ioasuawi" frameborder="0" width="320" height="240"></iframe>
状态类
通过这些状态类可以为行或单元格设置颜色
Class 描述.active 鼠标悬停在行或单元格上时所设置的颜色.success 标识成功或积极的动作.info 标识普通的提示信息或动作.warning 标识警告或需要用户注意.danger 标识危险或潜在的带来负面影响的动作<table class="table"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="active"> <th scope="row">1</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="success"> <th scope="row">2</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="info"> <th scope="row">3</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="warning"> <th scope="row">4</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="danger"> <th scope="row">5</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">6</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody></table>
<iframe style="width: 100%; height: 290px;" src="http://sandbox.runjs.cn/show/jzdichxp" frameborder="0" width="320" height="240"></iframe>
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失
<div class="table-responsive"> <table class="table"> <thead> <tr> <th>#</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <th scope="row">2</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <th scope="row">3</th> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table></div>
<iframe style="width: 100%; height: 200px;" src="http://sandbox.runjs.cn/show/kdhqyiqx" frameborder="0" width="320" height="240"></iframe>
<script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/catalog.js"></script>
Bootstrap表格