Bootstrap 表格
2022-05-21 15:17 更新
Bootstrap 表格
本節(jié)學(xué)習(xí)如何通過(guò)Bootstrap創(chuàng)建表格，在此之前，你可以先了解在HTML表格是如何創(chuàng)建的！
Bootstrap 提供了一個(gè)清晰的創(chuàng)建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
| 標(biāo)簽 | 描述 |
|---|---|
| <table> | 為表格添加基礎(chǔ)樣式。 |
| <thead> | 表格標(biāo)題行的容器元素（<tr>），用來(lái)標(biāo)識(shí)表格列。 |
| <tbody> | 表格主體中的表格行的容器元素（<tr>）。 |
| <tr> | 一組出現(xiàn)在單行上的表格單元格的容器元素（<td> 或 <th>）。 |
| <td> | 默認(rèn)的表格單元格。 |
| <th> | 特殊的表格單元格，用來(lái)標(biāo)識(shí)列或行（取決于范圍和位置）。必須在 <thead> 內(nèi)使用。 |
| <caption> | 關(guān)于表格存儲(chǔ)內(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）和水平分割的基本表，請(qǐng)?zhí)砑?class .table，如下面實(shí)例所示：
<!DOCTYPE html><html><head>
<title>Bootstrap 實(shí)例 - 基本的表格</title>
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><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></body></html>結(jié)果如下所示：
可選的表格類
除了基本的表格標(biāo)記和 .table class，還有一些可以用來(lái)為標(biāo)記定義樣式的類。下面將向您介紹這些類。
條紋表格
通過(guò)添加 .table-striped class，您將在 <tbody> 內(nèi)的行上看到條紋，如下面的實(shí)例所示：
<!DOCTYPE html><html><head>
<title>Bootstrap 實(shí)例 - 條紋表格</title>
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><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></body></html>結(jié)果如下所示：
邊框表格
通過(guò)添加 .table-bordered class，您將看到每個(gè)元素周圍都有邊框，且占整個(gè)表格是圓角的，如下面的實(shí)例所示：
<!DOCTYPE html><html><head>
<title>Bootstrap 實(shí)例 - 邊框表格</title>
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><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></body></html>結(jié)果如下所示：
懸停表格
通過(guò)添加 .table-hover class，當(dāng)指針懸停在行上時(shí)會(huì)出現(xiàn)淺灰色背景，如下面的實(shí)例所示：
<!DOCTYPE html><html><head>
<title>Bootstrap 實(shí)例 - 懸停表格</title>
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><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></body></html>結(jié)果如下所示：
精簡(jiǎn)表格
通過(guò)添加 .table-condensed class，行內(nèi)邊距（padding）被切為兩半，以便讓表看起來(lái)更緊湊，如下面的實(shí)例所示。這在想讓信息看起來(lái)更緊湊時(shí)非常有用。
<!DOCTYPE html><html><head>
<title>Bootstrap 實(shí)例 - 精簡(jiǎn)表格</title>
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><table class="table table-condensed">
<caption>精簡(jiǎn)表格布局</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></body></html>結(jié)果如下所示：
上下文類
下表中所列出的上下文類允許您改變表格行或單個(gè)單元格的背景顏色。
| 類 | 描述 |
|---|---|
| .active | 對(duì)某一特定的行或單元格應(yīng)用懸停顏色 |
| .success | 表示一個(gè)成功的或積極的動(dòng)作 |
| .warning | 表示一個(gè)需要注意的警告 |
| .danger | 表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作 |
這些類可被應(yīng)用到 <tr>、<td> 或 <th>。
<!DOCTYPE html><html><head>
<title>Bootstrap 實(shí)例 - 上下文類</title>
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><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></body></html>結(jié)果如下所示：
響應(yīng)式表格
通過(guò)把任意的 .table 包在 .table-responsive class 內(nèi)，您可以讓表格水平滾動(dòng)以適應(yīng)小型設(shè)備（小于 768px）。當(dāng)在大于 768px 寬的大型設(shè)備上查看時(shí)，您將看不到任何的差別。
<!DOCTYPE html><html><head>
<title>Bootstrap 實(shí)例 - 響應(yīng)式表格</title>
<link rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><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> </body></html> 結(jié)果如下所示：
擴(kuò)展閱讀
《Boostrap參考手冊(cè)》：Bootstrap表格和列表
以上內(nèi)容是否對(duì)您有幫助：
更多建議：