欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap每天必學(xué)之表格

 更新時(shí)間:2015年11月23日 08:54:15   作者:小平果118  
Bootstrap每天必學(xué)之表格,向大家分享了幾種最為常用的各種列表展示,希望大家喜歡。

本文主要講解的是表格,這個(gè)其實(shí)對(duì)于做過(guò)網(wǎng)站的人來(lái)說(shuō),并不陌生,而且可以說(shuō)是最為常用的各種列表的展示,有時(shí)候也會(huì)因?yàn)橛脩艋蛘呃习宓男枨蠖械筋^疼。下面我們來(lái)看一下,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)和水平方向的分隔線。這種方式看起來(lái)很多余???但是我們覺(jué)得,表格元素使用的很廣泛,如果我們?yōu)槠滟x予默認(rèn)樣式可能會(huì)影響例如日歷和日期選擇之類的插件,所以我們選擇將其樣式獨(dú)立出來(lái)。

一個(gè)簡(jiǎn)單的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元素上再添加一個(gè) 樣式類
 <table class="table table-striped">
看現(xiàn)在的效果,還是有點(diǎn)變化的。

帶邊框的表格
利用.table-bordered為表格和其中的每個(gè)單元格增加邊框。
還是將第一個(gè)示例中的table元素上再添加一個(gè)樣式類
<table class="table  table-bordered">

鼠標(biāo)懸停
利用.table-hover可以讓<tbody>中的每一行響應(yīng)鼠標(biāo)懸停狀態(tài)。
<table class="table table-hover">
將鼠標(biāo)移到那一行那一行就會(huì)有效果的

緊縮表格
利用.table-condensed可以讓表格更加緊湊,單元格中的內(nèi)部(padding)均會(huì)減半。
<table class="table table-condensed">
這個(gè)效果沒(méi)那么明顯,主要就是單元格中內(nèi)容padding減半了。

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

<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)條消失。   

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

看滾動(dòng)條出現(xiàn)了額。

簡(jiǎn)簡(jiǎn)單單的幾個(gè)樣式類,可以將頁(yè)面搞到這種程度,很不錯(cuò),以后再也不用愁調(diào)樣式了。

如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個(gè)精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是關(guān)于Bootstrap的表格最為常用的各種列表的展示,希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論