Bootstrap3.0學(xué)習(xí)筆記之表格相關(guān)

發(fā)布時(shí)間：2014-11-19 15:54:49 作者：佚名

本文介紹了bootstrap中的表格類型，包括條紋狀表格、帶邊框表格、鼠標(biāo)懸停、緊縮表格、響應(yīng)式表格，非常的簡單實(shí)用，需要的小伙伴可以參考下

本文主要講解的是表格，這個(gè)其實(shí)對(duì)于做過網(wǎng)站的人來說，并不陌生，而且可以說是最為常用的各種列表的展示，有時(shí)候也會(huì)因?yàn)橛脩艋蛘呃习宓男枨蠖械筋^疼。下面我們來看一下，Bootstrap已經(jīng)為我們準(zhǔn)備那些類型的表格呢？如下所示：

基本案例

為任意<table>標(biāo)簽添加.table可以為其賦予基本的樣式—少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線。這種方式看起來很多余??？但是我們覺得，表格元素使用的很廣泛，如果我們?yōu)槠滟x予默認(rèn)樣式可能會(huì)影響例如日歷和日期選擇之類的插件，所以我們選擇將其樣式獨(dú)立出來。

一個(gè)簡單的Table示例

復(fù)制代碼

代碼如下:

<div class="container">
<table class="table">
<caption>Table基本案例</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
</tbody>
</table>
</div>

條紋狀表格

利用.table-striped可以給<tbody>之內(nèi)的每一樣增加斑馬條紋樣式。

在上面示例的table元素上再添加一個(gè) 樣式類

復(fù)制代碼

代碼如下:

看現(xiàn)在的效果，還是有點(diǎn)變化的。

帶邊框的表格

利用.table-bordered為表格和其中的每個(gè)單元格增加邊框。

還是將第一個(gè)示例中的table元素上再添加一個(gè)樣式類

復(fù)制代碼

代碼如下:

鼠標(biāo)懸停

利用.table-hover可以讓<tbody>中的每一行響應(yīng)鼠標(biāo)懸停狀態(tài)。

復(fù)制代碼

代碼如下:

將鼠標(biāo)移到那一行那一行就會(huì)有效果的

緊縮表格

利用.table-condensed可以讓表格更加緊湊，單元格中的內(nèi)部（padding）均會(huì)減半。

復(fù)制代碼

代碼如下:

這個(gè)效果沒那么明顯，主要就是單元格中內(nèi)容padding減半了。

狀態(tài)Class

通過這些狀態(tài)class可以為行貨單元格設(shè)置顏色。

復(fù)制代碼

代碼如下:

<table class="table table-condensed">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr class="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr class="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr >
<td class="success">5</td>
<td class="danger">Amdy</td>
<td class="warning">Amy</td>
<td class="active">@Amdy</td>
</tr>
</tbody>
</table>

響應(yīng)式表格

將任何.table包裹在.table-responsive中即可創(chuàng)建響應(yīng)式表格，其會(huì)在小屏幕設(shè)備上（小于768px）水平滾動(dòng)。當(dāng)屏幕大于768px寬度時(shí)，水平滾動(dòng)條消失。

復(fù)制代碼

代碼如下:

<div class="table-responsive">
<table class="table">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr class="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr class="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr >
<td class="success">5</td>
<td class="danger">Amdy</td>
<td class="warning">Amy</td>
<td class="active">@Amdy</td>
</tr>
</tbody>
</table>
</div>