新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap表格

Bootstrap 表格

Bootstrap 提供了一個清晰的創(chuàng)建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

目前創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)頁空間、綿陽服務器托管、企業(yè)網(wǎng)站設計、延川網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

、

標簽

描述

），用來標識表格列。）。內使用。


為表格添加基礎樣式。

表格標題行的容器元素（

表格主體中的表格行的容器元素（

一組出現(xiàn)在單行上的表格單元格的容器元素（	或	）。
		默認的表格單元格。
		特殊的表格單元格，用來標識列或行（取決于范圍和位置）。必須在

關于表格存儲內容的描述或總結。

表格類

下表樣式可用于表格中：

, 內的行上看到條紋，如下面的實例所示：

實例

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

嘗試一下 ?

結果如下所示：

邊框表格

通過添加 .table-bordered class，您將看到每個元素周圍都有邊框，且占整個表格是圓角的，如下面的實例所示：

實例

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

嘗試一下 ?

結果如下所示：

懸停表格

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

實例

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

嘗試一下 ?

結果如下所示：

精簡表格

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

實例

<
table

class
=
"
table table-condensed
"
>

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

嘗試一下 ?

結果如下所示：

上下文類

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

類

描述

實例

.table

為任意添加基本樣式 (只有橫向分隔線) 內添加斑馬線形式的條紋 ( IE8 不支持) 內的任一行啟用鼠標懸停狀態(tài)

嘗試一下
.table-striped	在
嘗試一下
.table-bordered	為所有表格的單元格添加邊框	嘗試一下
.table-hover	在
嘗試一下
.table-condensed	讓表格更加緊湊	嘗試一下
聯(lián)合使用所有表格類		嘗試一下

和

類

下表的類可用于表格的行或者單元格：

類	描述	實例
.active	將懸停的顏色應用在行或者單元格上	嘗試一下
.success	表示成功的操作	嘗試一下
.info	表示信息變化的操作	嘗試一下
.warning	表示一個警告的操作	嘗試一下
.danger	表示一個危險的操作	嘗試一下

基本的表格

如果您想要一個只帶有內邊距（padding）和水平分割的基本表，請?zhí)砑?class .table，如下面實例所示：

實例

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

嘗試一下 ?

結果如下所示：

可選的表格類

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

條紋表格

通過添加 .table-striped class，您將在

類	描述
.active	對某一特定的行或單元格應用懸停顏色
.success	表示一個成功的或積極的動作
.warning	表示一個需要注意的警告
.danger	表示一個危險的或潛在的負面動作

這些類可被應用到

或

。

實例

<
table

class
=
"
table
"
>

<
caption
>
上下文表格布局
caption
>

<
thead
>

<
tr
>

<
th
>
產品
th
>

<
th
>
付款日期
th
>

<
th
>
狀態(tài)
th
>
tr
>

thead
>

<
tbody
>

<
tr

class
=
"
active
"
>

<
td
>
產品1
td
>

<
td
>
23/11/2013
td
>

<
td
>
待發(fā)貨
td
>
tr
>

<
tr

class
=
"
success
"
>

<
td
>
產品2
td
>

<
td
>
10/11/2013
td
>

<
td
>
發(fā)貨中
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
>

嘗試一下 ?

結果如下所示：

響應式表格

通過把任意的 .table 包在 .table-responsive class 內，您可以讓表格水平滾動以適應小型設備（小于 768px）。當在大于 768px 寬的大型設備上查看時，您將看不到任何的差別。

實例

<
div

class
=
"
table-responsive
"
>

<
table

class
=
"
table
"
>

<
caption
>
響應式表格布局
caption
>

<
thead
>

<
tr
>

<
th
>
產品
th
>

<
th
>
付款日期
th
>

<
th
>
狀態(tài)
th
>
tr
>

thead
>

<
tbody
>

<
tr
>

<
td
>
產品1
td
>

<
td
>
23/11/2013
td
>

<
td
>
待發(fā)貨
td
>
tr
>

<
tr
>

<
td
>
產品2
td
>

<
td
>
10/11/2013
td
>

<
td
>
發(fā)貨中
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
>

div
>

嘗試一下 ?

結果如下所示：

文章標題：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap表格
網(wǎng)頁URL：http://www.5511xx.com/article/ccosccp.html

其他資訊

快速導航

網(wǎng)站快速收錄
巴中發(fā)電機維修
湖北露營帳篷
雅安維修靜音發(fā)電機
網(wǎng)站設計
成都app軟件開發(fā)
成都工商變更
資陽做網(wǎng)站
成都企業(yè)郵箱公司
域名注冊
成都出口托盤

友情鏈接

網(wǎng)站建設

聯(lián)系方式

企業(yè)：四川綿陽平武網(wǎng)站建設工作室
地址：成都市青羊區(qū)太升南路288號
電話：18980820575
網(wǎng)址：www.5511xx.com

公司名稱：四川綿陽平武網(wǎng)站建設工作室聯(lián)系電話：18980820575

網(wǎng)站備案號：蜀ICP備2024061352號-3

四川平武建站四川平武網(wǎng)站建設四川平武網(wǎng)站設計四川平武網(wǎng)站制作成都做網(wǎng)站