Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實(shí)用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標(biāo)簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對(duì)象（Media Object）
Bootstrap 分頁(yè)
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁(yè)面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁(yè)（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動(dòng)監(jiān)聽（Scrollspy）
Bootstrap 過渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
This document uses PHP Chinese website manual Release
characters
Bootstrap 表格
Bootstrap 提供了一個(gè)清晰的創(chuàng)建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
| 標(biāo)簽 | 描述 |
|---|---|
| <table> | 為表格添加基礎(chǔ)樣式。 |
| <thead> | 表格標(biāo)題行的容器元素（<tr>），用來標(biāo)識(shí)表格列。 |
| <tbody> | 表格主體中的表格行的容器元素（<tr>）。 |
| <tr> | 一組出現(xiàn)在單行上的表格單元格的容器元素（<td> 或 <th>）。 |
| <td> | 默認(rèn)的表格單元格。 |
| <th> | 特殊的表格單元格，用來標(biāo)識(shí)列或行（取決于范圍和位置）。必須在 <thead> 內(nèi)使用。 |
| <caption> | 關(guān)于表格存儲(chǔ)內(nèi)容的描述或總結(jié)。 |
表格類
下表樣式可用于表格中：
| 類 | 描述 | 實(shí)例 |
|---|---|---|
| .table | 為任意 <table> 添加基本樣式 (只有橫向分隔線) | 實(shí)例 ? |
| .table-striped | 在 <tbody> 內(nèi)添加斑馬線形式的條紋 ( IE8 不支持) | 實(shí)例 ? |
| .table-bordered | 為所有表格的單元格添加邊框 | 實(shí)例 ? |
| .table-hover | 在 <tbody> 內(nèi)的任一行啟用鼠標(biāo)懸停狀態(tài) | 實(shí)例 ? |
| .table-condensed | 讓表格更加緊湊 | 實(shí)例 ? |
| 聯(lián)合使用所有表格類 | 實(shí)例 ? | |
<tr>, <th> 和 <td> 類
下表的類可用于表格的行或者單元格：
| 類 | 描述 | 實(shí)例 |
|---|---|---|
| .active | 將懸停的顏色應(yīng)用在行或者單元格上 | 實(shí)例 ? |
| .success | 表示成功的操作 | 實(shí)例 ? |
| .info | 表示信息變化的操作 | 實(shí)例 ? |
| .warning | 表示一個(gè)警告的操作 | 實(shí)例 ? |
| .danger | 表示一個(gè)危險(xiǎn)的操作 | 實(shí)例 ? |
基本的表格
如果您想要一個(gè)只帶有內(nèi)邊距（padding）和水平分割的基本表，請(qǐng)?zhí)砑?class .table，如下面實(shí)例所示：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 基本的表格</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></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，還有一些可以用來為標(biāo)記定義樣式的類。下面將向您介紹這些類。
條紋表格
通過添加 .table-striped class，您將在 <tbody> 內(nèi)的行上看到條紋，如下面的實(shí)例所示：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 條紋表格</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></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é)果如下所示：
邊框表格
通過添加 .table-bordered class，您將看到每個(gè)元素周圍都有邊框，且占整個(gè)表格是圓角的，如下面的實(shí)例所示：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 邊框表格</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></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é)果如下所示：
懸停表格
通過添加 .table-hover class，當(dāng)指針懸停在行上時(shí)會(huì)出現(xiàn)淺灰色背景，如下面的實(shí)例所示：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 懸停表格</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></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)表格
通過添加 .table-condensed class，行內(nèi)邊距（padding）被切為兩半，以便讓表看起來更緊湊，如下面的實(shí)例所示。這在想讓信息看起來更緊湊時(shí)非常有用。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 精簡(jiǎn)表格</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></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 href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></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)式表格
通過把任意的 .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 href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></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é)果如下所示：
