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

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

基本案例

為任意<table>標簽添加.table可以為其賦予基本的樣式&mdash;少量的內(nèi)補（padding）和水平方向的分隔線。這種方式看起來很多余?。康俏覀冇X得，表格元素使用的很廣泛，如果我們?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>之內(nèi)的每一樣增加斑馬條紋樣式。

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

代碼如下:

<tableclass="tabletable-striped">

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

帶邊框的表格

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

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

代碼如下:

<tableclass="tabletable-bordered">

鼠標懸停

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

代碼如下:

<tableclass="tabletable-hover">

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

緊縮表格

利用.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）水平滾動。當屏幕大于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)了額。

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

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

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

廣告

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