Bootstrap - 表格( Tables)
Bootstrap为构建表提供了一个干净的布局。 Bootstrap支持的一些表元素是 -
| 标签 | 描述 |
|---|---|
| <table> | 用于以表格格式显示数据的包装元素 |
| <thead> | 表标题行（tr）的容器元素，用于标记表列。 |
| <tbody> | 表格主体中的表行（tr）的容器元素。 |
| <tr> | 显示在单行上的一组表格单元格（td或th）的容器元素。 |
| <td> | 默认表格单元格。 |
| <th> | 列（或行，取决于范围和位置）标签的特殊表格单元格。 必须在 thead中使用 |
| <caption> | 表格的描述或摘要。 |
基本表
如果你想要一个漂亮的基本表格样式，只需要一些轻量级填充和水平分隔，可以将.table的基类添加到任何表中，如下例所示 -
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
可选的表类
除了基表标记和.table类之外，还有一些其他类可用于设置标记样式。 以下部分将为您提供所有这些类的一瞥。
条纹表
通过添加.table-striped类，您将在“tbody”中的行上获得条.table-striped ，如以下示例所示 -
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
边界表
通过添加.table-bordered类，您将获得围绕整个表的每个元素和圆角的边框，如以下示例所示 -
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
悬停表
通过添加.table-hover类，当光标悬停在行上时，将在行中添加浅灰色背景，如下例所示 -
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
凝聚表
通过添加.table-condensed类，将行填充减半以压缩表。 如下例所示。 如果您想要更密集的信息，这非常有用。
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
上下文类
下表中显示的Contextual类将允许您更改表行或单个单元格的背景颜色。
| 类 | 描述 |
|---|---|
| .active | 将悬停颜色应用于特定行或单元格 |
| .success | 表示成功或积极的行动 |
| .warning | 表示可能需要注意的警告 |
| .danger | 表示危险或潜在的负面行为 |
这些类可以应用于
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
响应表
通过将任何.table包装在.table-responsive类中，您将使表格水平滚动到小型设备（768px以下）。 在大于768px宽的任何东西上观看时，您将看不到这些表格中的任何差异。
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>
<上一篇.Bootstrap - Code
Bootstrap - Forms.下一篇>
