Bootstrap表格

1
2
3
4
5
6
<thead> 表格标题行
<tbody> 表格主体
<tr>行
<td> 表格的列
<th> 特殊的表格单元格，必须在<thead>内使用
<caption> 表格存储内容的描述或总结

1
2
3
4
5
.table 为任意表格添加基本样式，只有横向分割线
.table-striped 在<tbody>内添加斑马线形式的条纹
.table-bordered 为所有表格的单元格添加边框
.table-hover 在<tbody>内的任意一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑

1
2
3
4
5
.active 将悬停的颜色应用在行或单元格上
.success 成功的操作
.info 信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

1
2
3
4
.active 对某一特定的行或单元格应用悬停颜色
.success 表示一个成功的或积极的动作
.warning 表示一个需要注意的警告
.danger 表示一个危险的或潜在的负面动作

1
通过把任意的.table包在.table-responsive class内，您可以让表格水平滚动以适应小型设备（小于768px）。当在大于768px宽的大型设备上查看时，您看不到任何差别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//基本表格，只有横线隔开隔行
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>lwg</td>
<td>北京</td>
</tr>
</tbody>
</table>

1
2
3
4
//条纹表格
<table class="table table-striped">
。。。。
</table>

1
2
3
4
//边框表格
<table class="table table-bordered">
。。。
</table>

1
2
3
4
5
//悬停表格
<table class="table table-hover">
。。。
</table>

1
2
3
4
//精简表格
<table class="table table-condensed">
。。。
</table>

1
2
3
4
5
6
//上下文类
<tr class="active">
<td>lwg</td>
<td>2016</td>
<td>BJ</td>
</tr>

1
2
3
4
5
6
//响应式表格
<div class="table-responsive">
<table class="table">
。。。。
</table>
</div>