bootstrap3.0教程之多種表格效果(條紋狀表格、條紋狀表格、鼠標(biāo)懸停等)
我要評論前言
本文主要講解的是表格，這個其實(shí)對于做過網(wǎng)站的人來說，并不陌生，而且可以說是最為常用的各種列表的展示，有時候也會因?yàn)橛脩艋蛘呃习宓男枨蠖械筋^疼。下面我們來看一下，Bootstrap已經(jīng)為我們準(zhǔn)備那些類型的表格呢？如下所示：
1.基本案例
2.條紋狀表格
3.帶邊框的表格
4.鼠標(biāo)懸停
5.緊縮表格
6.狀態(tài)class
7.響應(yīng)式表格
8.總結(jié)
基本案例
為任意<table>標(biāo)簽添加.table可以為其賦予基本的樣式—少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線。這種方式看起來很多余！？但是我們覺得，表格元素使用的很廣泛，如果我們?yōu)槠滟x予默認(rèn)樣式可能會影響例如日歷和日期選擇之類的插件，所以我們選擇將其樣式獨(dú)立出來。
一個簡單的Table示例
<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元素上再添加一個樣式類
<tableclass="tabletable-striped">
看現(xiàn)在的效果，還是有點(diǎn)變化的。
帶邊框的表格
利用.table-bordered為表格和其中的每個單元格增加邊框。
還是將第一個示例中的table元素上再添加一個樣式類
<tableclass="tabletable-bordered">
鼠標(biāo)懸停
利用.table-hover可以讓<tbody>中的每一行響應(yīng)鼠標(biāo)懸停狀態(tài)。
<tableclass="tabletable-hover">
將鼠標(biāo)移到那一行那一行就會有效果的
緊縮表格
利用.table-condensed可以讓表格更加緊湊，單元格中的內(nèi)部（padding）均會減半。
<tableclass="tabletable-condensed">
這個效果沒那么明顯，主要就是單元格中內(nèi)容padding減半了。
狀態(tài)Class
通過這些狀態(tài)class可以為行貨單元格設(shè)置顏色。
<tableclass="tabletable-condensed">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>FirstName</th>
<th>LastName</th>
<th>UserName</th>
</tr>
</thead>
<tbody>
<trclass="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<trclass="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
<trclass="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<trclass="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr>
<tdclass="success">5</td>
<tdclass="danger">Amdy</td>
<tdclass="warning">Amy</td>
<tdclass="active">@Amdy</td>
</tr>
</tbody>
</table>
響應(yīng)式表格
將任何.table包裹在.table-responsive中即可創(chuàng)建響應(yīng)式表格，其會在小屏幕設(shè)備上（小于768px）水平滾動。當(dāng)屏幕大于768px寬度時，水平滾動條消失。
<divclass="table-responsive">
<tableclass="table">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>FirstName</th>
<th>LastName</th>
<th>UserName</th>
</tr>
</thead>
<tbody>
<trclass="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<trclass="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
<trclass="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<trclass="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr>
<tdclass="success">5</td>
<tdclass="danger">Amdy</td>
<tdclass="warning">Amy</td>
<tdclass="active">@Amdy</td>
</tr>
</tbody>
</table>
</div>
看滾動條出現(xiàn)了額。
相關(guān)文章
bootstrap3.0教程之排版詳細(xì)使用教程(標(biāo)題、頁面主體、強(qiáng)調(diào)、縮略語等
本次主要來了解bootstrap的排版，這個大部分在HTML的基本標(biāo)簽中也是存在的，所以相對比較簡單，為了保證系列的完整性，也順帶復(fù)習(xí)下，還是記錄一下。主要內(nèi)容如下：標(biāo)題、2014-04-11bootstrap3.0教程之柵格系統(tǒng)案例(包括柵格選項(xiàng)、從堆疊到水平排列、移
這篇文章主要介紹了bootstrap3.0教程之柵格系統(tǒng)案例,包括柵格選項(xiàng)、從堆疊到水平排列、移動設(shè)備和桌面、Responsive column resets、列偏移、嵌套列、列排序,需要的朋友可以2014-04-11bootstrap3.0教程之柵格系統(tǒng)原理(布局)
Bootstrap內(nèi)置了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。我在這里是把Bootstrap中的柵格系統(tǒng)叫做布2014-04-11- Bootstrap 是由Twitter 工程師推出的基于HTML，CSS，JAVASCRIPT的簡潔靈活的流行前端框架2012-11-12
Bootstrap 基于jquery的簡潔靈活的流行前端框架及交互組件集
Bootstrap, from Twitter 基于HTML，CSS，JAVASCRIPT的簡潔靈活的流行前端框架及交互組件集2014-11-18
