表格
1.基本实例
为任意 <table>
标签添加 .table
类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。
<table class="table">
...
</table>
2.条纹状表格
通过 .table-striped
类可以给 <tbody>
之内的每一行增加斑马条纹样式。
<table class="table table-striped">
...
</table>
3.带边框的表格
添加 .table-bordered
类为表格和其中的每个单元格增加边框。
<table class="table table-bordered">
...
</table>
4.鼠标悬停
通过添加 .table-hover
类可以让 <tbody>
中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover">
...
</table>
5.紧缩表格
通过添加 .table-condensed
类可以让表格更加紧凑,单元格中的内补(padding)均会减半。
<table class="table table-condensed">
...
</table>
6.状态类
通过这些状态类可以为行或单元格设置颜色。
Class | 描述 |
---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动作 |
.info |
标识普通的提示信息或动作 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
7.响应式表格
将任何 .table
元素包裹在 .table-responsive
元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
<div class="table-responsive">
<table class="table">
...
</table>
</div