如何實(shí)現(xiàn)bootstrap3.0多種表格效果-創(chuàng)新互聯(lián)

這篇文章主要講解了“如何實(shí)現(xiàn)bootstrap3.0多種表格效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何實(shí)現(xiàn)bootstrap3.0多種表格效果”吧！

成都創(chuàng)新互聯(lián)公司主營(yíng)郊區(qū)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶App定制開發(fā),郊區(qū)h5微信小程序開發(fā)搭建,郊區(qū)網(wǎng)站營(yíng)銷推廣歡迎郊區(qū)等地區(qū)企業(yè)咨詢

基本案例

為任意<table>標(biāo)簽添加.table可以為其賦予基本的樣式&mdash;少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線。這種方式看起來(lái)很多余！？但是我們覺得，表格元素使用的很廣泛，如果我們?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è)樣式類

代碼如下:

<tableclass="tabletable-striped">

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

帶邊框的表格

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

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

代碼如下:

<tableclass="tabletable-bordered">

鼠標(biāo)懸停

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

代碼如下:

<tableclass="tabletable-hover">

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

緊縮表格

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

代碼如下:

<tableclass="tabletable-condensed">

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

狀態(tài)Class

通過(guò)這些狀態(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)式表格，其會(huì)在小屏幕設(shè)備上（小于768px）水平滾動(dòng)。當(dāng)屏幕大于768px寬度時(shí)，水平滾動(dòng)條消失。

代碼如下:

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

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

感謝各位的閱讀，以上就是“如何實(shí)現(xiàn)bootstrap3.0多種表格效果”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何實(shí)現(xiàn)bootstrap3.0多種表格效果這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前名稱：如何實(shí)現(xiàn)bootstrap3.0多種表格效果-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://bm7419.com/article24/hdoce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、用戶體驗(yàn)、動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)