Bootstrap 提供了一個(gè)清晰的創(chuàng)建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
|
標(biāo)簽
|
描述
|
|
<table>
|
為表格添加基礎(chǔ)樣式。
|
|
<thead>
|
表格標(biāo)題行的容器元素（<tr>），用來標(biāo)識表格列。
|
|
<tbody>
|
表格主體中的表格行的容器元素（<tr>）。
|
|
<tr>
|
一組出現(xiàn)在單行上的表格單元格的容器元素（<td> 或 <th>）。
|
|
<td>
|
默認(rèn)的表格單元格。
|
|
<th>
|
特殊的表格單元格，用來標(biāo)識列或行（取決于范圍和位置）。必須在 <thead> 內(nèi)使用。
|
|
<caption>
|
關(guān)于表格存儲內(nèi)容的描述或總結(jié)。
|
表格類
下表樣式可用于表格中：
|
類
|
描述
|
實(shí)例
|
|
.table
|
為任意 <table> 添加基本樣式 (只有橫向分隔線)
|
嘗試一下
|
|
.table-striped
|
在 <tbody> 內(nèi)添加斑馬線形式的條紋 ( IE8 不支持)
|
嘗試一下
|
|
.table-bordered
|
為所有表格的單元格添加邊框
|
嘗試一下
|
|
.table-hover
|
在 <tbody> 內(nèi)的任一行啟用鼠標(biāo)懸停狀態(tài)
|
嘗試一下
|
|
.table-condensed
|
讓表格更加緊湊
|
嘗試一下
|
|
聯(lián)合使用所有表格類
|
嘗試一下
|
<tr>, <th> 和 <td> 類
下表的類可用于表格的行或者單元格：
|
類
|
描述
|
實(shí)例
|
|
.active
|
將懸停的顏色應(yīng)用在行或者單元格上
|
嘗試一下
|
|
.success
|
表示成功的操作
|
嘗試一下
|
|
.info
|
表示信息變化的操作
|
嘗試一下
|
|
.warning
|
表示一個(gè)警告的操作
|
嘗試一下
|
|
.danger
|
表示一個(gè)危險(xiǎn)的操作
|
嘗試一下
|
如果您想要一個(gè)只帶有內(nèi)邊距（padding）和水平分割的基本表，請?zhí)砑?class .table，如下面實(shí)例所示：
實(shí)例
<table class="table"> <caption>基本的表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table>
嘗試一下 ?
結(jié)果如下所示：
除了基本的表格標(biāo)記和 .table class，還有一些可以用來為標(biāo)記定義樣式的類。下面將向您介紹這些類。
條紋表格
通過添加 .table-striped class，您將在 <tbody> 內(nèi)的行上看到條紋，如下面的實(shí)例所示：
實(shí)例
<table class="table table-striped"> <caption>條紋表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> <th>郵編</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>
嘗試一下 ?
結(jié)果如下所示：
邊框表格
通過添加 .table-bordered class，您將看到每個(gè)元素周圍都有邊框，且占整個(gè)表格是圓角的，如下面的實(shí)例所示：
實(shí)例
<table class="table table-bordered"> <caption>邊框表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> <th>郵編</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>
嘗試一下 ?
結(jié)果如下所示：
懸停表格
通過添加 .table-hover class，當(dāng)指針懸停在行上時(shí)會出現(xiàn)淺灰色背景，如下面的實(shí)例所示：
實(shí)例
<table class="table table-hover"> <caption>懸停表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> <th>郵編</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>
嘗試一下 ?
結(jié)果如下所示：
精簡表格
通過添加 .table-condensed class，行內(nèi)邊距（padding）被切為兩半，以便讓表看起來更緊湊，如下面的實(shí)例所示。這在想讓信息看起來更緊湊時(shí)非常有用。
實(shí)例
<table class="table table-condensed"> <caption>精簡表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> <th>郵編</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>
嘗試一下 ?
結(jié)果如下所示：
下表中所列出的上下文類允許您改變表格行或單個(gè)單元格的背景顏色。
|
類
|
描述
|
|
.active
|
對某一特定的行或單元格應(yīng)用懸停顏色
|
|
.success
|
表示一個(gè)成功的或積極的動作
|
|
.warning
|
表示一個(gè)需要注意的警告
|
|
.danger
|
表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動作
|
這些類可被應(yīng)用到 <tr>、<td> 或 <th>。
實(shí)例
<table class="table"> <caption>上下文表格布局</caption> <thead> <tr> <th>產(chǎn)品</th> <th>付款日期</th> <th>狀態(tài)</th></tr> </thead> <tbody> <tr class="active"> <td>產(chǎn)品1</td> <td>23/11/2013</td> <td>待發(fā)貨</td></tr> <tr class="success"> <td>產(chǎn)品2</td> <td>10/11/2013</td> <td>發(fā)貨中</td></tr> <tr class="warning"> <td>產(chǎn)品3</td> <td>20/10/2013</td> <td>待確認(rèn)</td></tr> <tr class="danger"> <td>產(chǎn)品4</td> <td>20/10/2013</td> <td>已退貨</td></tr> </tbody> </table>
嘗試一下 ?
結(jié)果如下所示：
通過把任意的 .table 包在 .table-responsive class 內(nèi)，您可以讓表格水平滾動以適應(yīng)小型設(shè)備（小于 768px）。當(dāng)在大于 768px 寬的大型設(shè)備上查看時(shí)，您將看不到任何的差別。
實(shí)例
<div class="table-responsive"> <table class="table"> <caption>響應(yīng)式表格布局</caption> <thead> <tr> <th>產(chǎn)品</th> <th>付款日期</th> <th>狀態(tài)</th></tr> </thead> <tbody> <tr> <td>產(chǎn)品1</td> <td>23/11/2013</td> <td>待發(fā)貨</td></tr> <tr> <td>產(chǎn)品2</td> <td>10/11/2013</td> <td>發(fā)貨中</td></tr> <tr> <td>產(chǎn)品3</td> <td>20/10/2013</td> <td>待確認(rèn)</td></tr> <tr> <td>產(chǎn)品4</td> <td>20/10/2013</td> <td>已退貨</td></tr> </tbody> </table> </div>
嘗試一下 ?
結(jié)果如下所示：
