響應式前端架構Bootstrap系列（4）表格

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/zeping891103/article/details/79034410

通過bs，可以很輕松地建出一個表格元件。以下是建表格元件必須認識的一些标簽。

标簽	描述
<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 讓表格更加緊湊

.table-responsive 可以讓表格水準滾動以适應小型裝置（小于 768px）。當在大于 768px 寬的大型裝置上檢視時，您将看不到任何的差别。

基本建表示範代碼：

<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
	<caption>基本的表格布局</caption>
	<thead>
		<tr>
			<th>産品</th>
			<th>付款日期</th>
			<th>狀态</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>産品1</td>
			<td>23/11/2013</td>
			<td>待發貨</td>
		</tr>
		<tr>
			<td>産品2</td>
			<td>10/11/2013</td>
			<td>發貨中</td>
		</tr>
		<tr>
			<td>産品3</td>
			<td>20/10/2013</td>
			<td>待确認</td>
		</tr>
		<tr>
			<td>産品4</td>
			<td>20/10/2013</td>
			<td>已退貨</td>
		</tr>
	</tbody>
</table>                

效果圖：

實際應用中，基本表格并不能滿足需求，bs已經為我們考慮到了，我們還可以在<tr>,<th>和<td>添加色彩樣式，實作類似于帶狀态的表格效果，色彩樣式有以下幾種：

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

.success 表示成功的操作

.info 表示資訊變化的操作

.warning 表示一個警告的操作

.danger 表示一個危險的操作

示範代碼：

<table class="table table-bordered table-condensed table-responsive">
	<caption>帶狀态表格布局</caption>
	<thead>
		<tr>
			<th>産品</th>
			<th>付款日期</th>
			<th>狀态</th>
		</tr>
	</thead>
	<tbody>
		<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>20/10/2013</td>
			<td>已退貨</td>
		</tr>
	</tbody>
</table>                

效果圖：

轉載于:https://my.oschina.net/u/3987720/blog/2962660