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> 添加基本樣式 (只有橫向分隔線)	?
.table-striped	在 <tbody> 內(nèi)添加斑馬線形式的條紋 ( 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)的操作	?

?

?

?

基本的表格

<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>

可選的表格類(lèi)

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

條紋表格

通過(guò)添加?.table-striped?class，您將在 <tbody> 內(nèi)的行上看到條紋

<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>

邊框表格

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

<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>

懸停表格

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

<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>

精簡(jiǎn)表格

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

<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>

上下文類(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>。

<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>

響應(yīng)式表格

通過(guò)把任意的?.table?包在?.table-responsive?class 內(nèi)，您可以讓表格水平滾動(dòng)以適應(yīng)小型設(shè)備（小于 768px）。當(dāng)在大于 768px 寬的大型設(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>

?

轉(zhuǎn)載于:https://www.cnblogs.com/xibei666/p/4805584.html

總結(jié)

以上是生活随笔為你收集整理的Bootstrap 表格 笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。