天天看點

Bootstrap 表格

Bootstrap 提供了一個清晰的建立表格的布局。下表列出了 Bootstrap 支援的一些表格元素:

标簽

描述

<table>

為表格添加基礎樣式。

<thead>

表格标題行的容器元素(<tr>),用來辨別表格列。

<tbody>

表格主體中的表格行的容器元素(<tr>)。

<tr>

一組出現在單行上的表格單元格的容器元素(<td> 或 <th>)。

<td>

預設的表格單元格。

<th>

特殊的表格單元格,用來辨別列或行(取決于範圍和位置)。必須在 <thead> 内使用。

<caption>

關于表格存儲内容的描述或總結。

下表樣式可用于表格中:

執行個體

.table

為任意 <table> 添加基本樣式 (隻有橫向分隔線)

嘗試一下

.table-striped

在 <tbody> 内添加斑馬線形式的條紋 ( IE8 不支援)

.table-bordered

為所有表格的單元格添加邊框

.table-hover

在 <tbody> 内的任一行啟用滑鼠懸停狀态

.table-condensed

讓表格更加緊湊

聯合使用所有表格類

下表的類可用于表格的行或者單元格:

.active

将懸停的顔色應用在行或者單元格上

.success

表示成功的操作

.info

表示資訊變化的操作

.warning

表示一個警告的操作

.danger

表示一個危險的操作

如果您想要一個隻帶有内邊距(padding)和水準分割的基本表,請添加 class .table,如下面執行個體所示:

<table class="table">

<caption>基本的表格布局</caption>

<th>名稱</th>

<th>城市</th>

</tr>

</thead>

<td>Tanmay</td>

<td>Bangalore</td>

<td>Sachin</td>

<td>Mumbai</td>

</tbody>

</table>

結果如下所示:

Bootstrap 表格

除了基本的表格标記和 .table class,還有一些可以用來為标記定義樣式的類。下面将向您介紹這些類。

通過添加 .table-striped class,您将在 <tbody> 内的行上看到條紋,如下面的執行個體所示:

<table class="table table-striped">

<caption>條紋表格布局</caption>

<th>郵編</th>

<td>560001</td>

<td>400003</td>

<td>Uma</td>

<td>Pune</td>

<td>411027</td>

Bootstrap 表格

通過添加 .table-bordered class,您将看到每個元素周圍都有邊框,且占整個表格是圓角的,如下面的執行個體所示:

<table class="table table-bordered">

<caption>邊框表格布局</caption>

Bootstrap 表格

通過添加 .table-hover class,當指針懸停在行上時會出現淺灰色背景,如下面的執行個體所示:

<table class="table table-hover">

<caption>懸停表格布局</caption>

Bootstrap 表格

通過添加 .table-condensed class,行内邊距(padding)被切為兩半,以便讓表看起來更緊湊,如下面的執行個體所示。這在想讓資訊看起來更緊湊時非常有用。

<table class="table table-condensed">

<caption>精簡表格布局</caption>

<th>郵編</th></tr>

<td>560001</td></tr>

<td>400003</td></tr>

<td>411027</td></tr>

Bootstrap 表格

下表中所列出的上下文類允許您改變表格行或單個單元格的背景顔色。

對某一特定的行或單元格應用懸停顔色

表示一個成功的或積極的動作

表示一個需要注意的警告

表示一個危險的或潛在的負面動作

這些類可被應用到 <tr>、<td> 或 <th>。

<caption>上下文表格布局</caption>

<th>産品</th>

<th>付款日期</th>

<th>狀态</th></tr>

<tr class="active">

<td>産品1</td>

<td>23/11/2013</td>

<td>待發貨</td></tr>

<tr class="success">

<td>産品2</td>

<td>10/11/2013</td>

<td>發貨中</td></tr>

<tr class="warning">

<td>産品3</td>

<td>20/10/2013</td>

<td>待确認</td></tr>

<tr class="danger">

<td>産品4</td>

<td>已退貨</td></tr>

Bootstrap 表格

通過把任意的 .table 包在 .table-responsive class 内,您可以讓表格水準滾動以适應小型裝置(小于 768px)。當在大于 768px 寬的大型裝置上檢視時,您将看不到任何的差别。

<div class="table-responsive">

<caption>響應式表格布局</caption>

</div>

Bootstrap 表格