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

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)靈川,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

基本案例

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

帶邊框的表格

利用.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)了額。

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

網(wǎng)站題目：如何實現(xiàn)bootstrap3.0多種表格效果
當(dāng)前鏈接：http://sd-ha.com/article0/ggchoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、響應(yīng)式網(wǎng)站、虛擬主機(jī)、自適應(yīng)網(wǎng)站、小程序開發(fā)、網(wǎng)站設(shè)計公司

廣告

聲明：本網(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)