前面的话
Bootstrap为我们提供了非常好看且易用的表格样式,利用Boostrap可以快速的创建出不同样式的表格,本文将详细介绍Boostrap表格
基本实例
Boostrap将表格<table>的样式重置如下
1 2 3 4 5 | table {
background-color: transparent;
border-spacing: 0;
border-collapse: collapse;
}
|
Salin selepas log masuk
1 2 3 4 5 6 | <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>
|
Salin selepas log masuk
为任意<table>
标签添加.table
类可以为其赋予基本的样式—少量的内边距(padding)和水平方向的分隔线
1 2 | <table class = "table" >
...</table>
|
Salin selepas log masuk
条纹状表格
通过 .table-striped
类可以给 <tbody>
之内的每一行增加斑马条纹样式
[注意]条纹状表格是依赖 :nth-child
CSS 选择器实现的,而这一功能不被IE8-支持
1 2 3 | .table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
|
Salin selepas log masuk
1 2 | <table class = "table table-striped" >
...</table>
|
Salin selepas log masuk
带边框表格
添加 .table-bordered
类为表格和其中的每个单元格增加边框
1 2 | <table class = "table table-bordered" >
...</table>
|
Salin selepas log masuk
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
1 2 | <table class = "table table-hover" >
...</table>
|
Salin selepas log masuk
1 2 3 | .table-hover > tbody > tr:hover {
background-color: #f5f5f5;
}
|
Salin selepas log masuk
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半
1 2 | <table class = "table table-condensed" >
...</table>
|
Salin selepas log masuk
状态类
通过这些状态类可以为行或单元格设置颜色
1 2 3 4 5 6 | Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
|
Salin selepas log masuk
1 2 3 4 5 | <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>
|
Salin selepas log masuk
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失
1 2 3 | <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>
|
Salin selepas log masuk
Atas ialah kandungan terperinci 利用Boostrap创建表格实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!