亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

bootstrap3.0教程之多種表格效果(條紋狀表格、條紋狀表格、鼠標懸停等)

  發(fā)布時間：2014-04-15 13:59:12   作者：佚名   我要評論
這篇文章主要介紹了bootstrap3.0的多種表格效果，包括條紋狀表格、條紋狀表格、鼠標懸停、帶邊框的表格狀態(tài)class、響應式表格等,需要的朋友可以參考下

前言

本文主要講解的是表格，這個其實對于做過網(wǎng)站的人來說，并不陌生，而且可以說是最為常用的各種列表的展示，有時候也會因為用戶或者老板的需求而感到頭疼。下面我們來看一下，Bootstrap已經(jīng)為我們準備那些類型的表格呢？如下所示：

1.基本案例

2.條紋狀表格

3.帶邊框的表格

4.鼠標懸停

5.緊縮表格

6.狀態(tài)class

7.響應式表格

8.總結

基本案例

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

一個簡單的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>之內的每一樣增加斑馬條紋樣式。

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

復制代碼
代碼如下:

<tableclass="tabletable-striped">

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

帶邊框的表格

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

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

復制代碼
代碼如下:

<tableclass="tabletable-bordered">


鼠標懸停

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

復制代碼
代碼如下:

<tableclass="tabletable-hover">

將鼠標移到那一行那一行就會有效果的

緊縮表格

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

復制代碼
代碼如下:

<tableclass="tabletable-condensed">

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

狀態(tài)Class

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



復制代碼
代碼如下:

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


響應式表格

將任何.table包裹在.table-responsive中即可創(chuàng)建響應式表格，其會在小屏幕設備上（小于768px）水平滾動。當屏幕大于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)了額。

相關文章

最新評論