Bootstrap3.0中有哪些表格

本篇內(nèi)容介紹了“Bootstrap3.0中有哪些表格”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

基本案例

為任意<table>標簽添加.table可以為其賦予基本的樣式&mdash;少量的內(nèi)補（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>之內(nèi)的每一樣增加斑馬條紋樣式。

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

代碼如下:

<table class="table table-striped">

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

帶邊框的表格

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

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

代碼如下:

<table class="table  table-bordered">

鼠標懸停

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

代碼如下:

<table class="table table-hover">

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

緊縮表格

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

代碼如下:

<table class="table table-condensed">

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

狀態(tài)Class

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

代碼如下:

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

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

“Bootstrap3.0中有哪些表格”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！