Bootstrap 菜鳥(niǎo)教程

Bootstrap 插件

Bootstrap 表格

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é)。

表格類(lèi)

下表樣式可用于表格中：

類(lèi)	描述	示例
.table	為任意 <table> 添加基本樣式 (只有橫向分隔線(xiàn))	嘗試一下
.table-striped	在 <tbody> 內(nèi)添加斑馬線(xiàn)形式的條紋 ( IE8 不支持)	嘗試一下
.table-bordered	為所有表格的單元格添加邊框	嘗試一下
.table-hover	在 <tbody> 內(nèi)的任一行啟用鼠標(biāo)懸停狀態(tài)	嘗試一下
.table-condensed	讓表格更加緊湊	嘗試一下
聯(lián)合使用所有表格類(lèi)		嘗試一下

<tr>, <th> 和 <td> 類(lèi)

下表的類(lèi)可用于表格的行或者單元格：

類(lèi)	描述	示例
.active	將懸停的顏色應(yīng)用在行或者單元格上	嘗試一下
.success	表示成功的操作	嘗試一下
.info	表示信息變化的操作	嘗試一下
.warning	表示一個(gè)警告的操作	嘗試一下
.danger	表示一個(gè)危險(xiǎn)的操作	嘗試一下

基本的表格

如果您想要一個(gè)只帶有內(nèi)邊距(padding)和水平分割的基本表，請(qǐng)?zhí)砑?class .table，如下面示例所示：

在線(xiàn)示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 基本的表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名稱(chēng)</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>

測(cè)試看看 ?/?

結(jié)果如下所示：

可選的表格類(lèi)

除了基本的表格標(biāo)記和 .table class，還有一些可以用來(lái)為標(biāo)記定義樣式的類(lèi)。下面將向您介紹這些類(lèi)。

條紋表格

通過(guò)添加 .table-striped class，您將在 <tbody> 內(nèi)的行上看到條紋，如下面的示例所示：

在線(xiàn)示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 條紋表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
	<caption>條紋表格布局</caption>
	<thead>
		<tr>
			<th>名稱(chēng)</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>

測(cè)試看看 ?/?

結(jié)果如下所示：

邊框表格

通過(guò)添加 .table-bordered class，您將看到每個(gè)元素周?chē)加羞吙?，且占整個(gè)表格是圓角的，如下面的示例所示：

在線(xiàn)示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 邊框表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
	<caption>邊框表格布局</caption>
	<thead>
		<tr>
			<th>名稱(chēng)</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>

測(cè)試看看 ?/?

結(jié)果如下所示：

懸停表格

通過(guò)添加 .table-hover class，當(dāng)指針懸停在行上時(shí)會(huì)出現(xiàn)淺灰色背景，如下面的示例所示：

在線(xiàn)示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 懸停表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-hover">
	<caption>懸停表格布局</caption>
	<thead>
		<tr>
			<th>名稱(chēng)</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>

測(cè)試看看 ?/?

結(jié)果如下所示：

精簡(jiǎn)表格

通過(guò)添加 .table-condensed class，行內(nèi)邊距(padding)被切為兩半，以便讓表看起來(lái)更緊湊，如下面的示例所示。這在想讓信息看起來(lái)更緊湊時(shí)非常有用。

在線(xiàn)示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 精簡(jiǎn)表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-condensed">
	<caption>精簡(jiǎn)表格布局</caption>
	<thead>
		<tr>
			<th>名稱(chēng)</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>

測(cè)試看看 ?/?

結(jié)果如下所示：

上下文類(lèi)

下表中所列出的上下文類(lèi)允許您改變表格行或單個(gè)單元格的背景顏色。

類(lèi)	描述
.active	對(duì)某一特定的行或單元格應(yīng)用懸停顏色
.success	表示一個(gè)成功的或積極的動(dòng)作
.warning	表示一個(gè)需要注意的警告
.danger	表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作

這些類(lèi)可被應(yīng)用到 <tr>、<td> 或 <th>。

在線(xiàn)示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 示例 - 上下文類(lèi)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>

測(cè)試看看 ?/?

結(jié)果如下所示：

響應(yīng)式表格

通過(guò)把任意的 .table 包在 .table-responsive class 內(nèi)，您可以讓表格水平滾動(dòng)以適應(yīng)小型設(shè)備（小于 768px）。當(dāng)在大于 768px 寬的大型設(shè)備上查看時(shí)，您將看不到任何的差別。

在線(xiàn)示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 示例 - 響應(yīng)式表格</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>

測(cè)試看看 ?/?

結(jié)果如下所示：

Bootstrap 表單 Bootstrap 代碼