bootstrap的表格樣式有哪些及怎么實現(xiàn)

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

表格樣式有7種：1、“.table”樣式，可定義基礎(chǔ)表格，只有橫向分隔線；2、“.table-striped”樣式，可定義斑馬線表格，表格隔行有一個淺灰色的背景色；3、“.table-bordered”樣式，給表格單元格全部添加邊框樣式等。

本教程操作環(huán)境：Windows7系統(tǒng)、bootsrap3.3.7版、DELL G3電腦

Bootstrap 表格類樣式

?  .table：基礎(chǔ)表格，為任意 <table> 添加基本樣式 (只有橫向分隔線)

?  .table-striped：斑馬線表格

?  .table-bordered：帶邊框的表格

?  .table-hover：鼠標(biāo)懸停高亮的表格

?  .table-condensed：緊湊型表格

?  .table-responsive：響應(yīng)式表格

?  上下文類表格

下面就以上表格類樣式，作簡要介紹：

一、基礎(chǔ)表格

在Bootstrap中，對于基礎(chǔ)表格是通過類名“.table”來控制。如果在<table>元素中不添加任何類名，表格是無任何樣式效果的。想得到基礎(chǔ)表格，我們只需要在<table>元素上添加“.table”類名，就可以得到Bootstrap的基礎(chǔ)表格：

<table class="table">
	<caption>基礎(chǔ)表格</caption>
   <thead>
      <tr>
         <th>省份</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>廣東</td>
         <td>深圳</td>
      </tr>
      <tr>
         <td>廣西</td>
         <td>桂林</td>
      </tr>
	   <tr>
         <td>海南</td>
         <td>三亞</td>
      </tr>
   </tbody>
</table>

效果圖如下：

“.table”主要有三個作用：

• 給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距

• 在thead底部設(shè)置了一個2px的淺灰實線

• 每個單元格頂部設(shè)置了一個1px的淺灰實線

二、條紋表格

有時候為了讓表格更具閱讀性，需要將表格制作成類似于斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現(xiàn)這種表格效果并不困難，只需要在<table class="table">的基礎(chǔ)上增加類名“.table-striped”即可：

<table class="table table-striped">

效果圖：

其效果與基礎(chǔ)表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現(xiàn)原理也非常的簡單，利用CSS3的結(jié)構(gòu)性選擇器“:nth-child”來實現(xiàn)，所以對于IE8以及其以下瀏覽器，沒有背景條紋效果。

三、邊框表格

基礎(chǔ)表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出于實際運用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。

Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎(chǔ)表格<table class="table">基礎(chǔ)上添加一個“.table-bordered”類名即可：

<table class="table table-bordered">

效果圖：

四、懸停表格

當(dāng)鼠標(biāo)懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數(shù)據(jù)。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個“.table-hover”類名來實現(xiàn)這種表格效果。

鼠標(biāo)懸停高亮的表格使用也簡單，僅需要<table class="table">元素上添加類名“table-hover”即可：

<table class="table table-hover">

效果圖：

鼠標(biāo)懸浮高亮的效果主要是通過“hover”事件來實現(xiàn)，設(shè)置了“tr:hover”時的th、td的背景色為新顏色。

注：其實，鼠標(biāo)懸浮高亮表格，可以和Bootstrap其他表格混合使用。簡單點說，只要你想讓你的表格具備懸浮高亮效果，你只要給這個表格添加“table-hover”類名就好了。例如，將前面介紹的幾種表格結(jié)合使用：

<table class="table table-striped table-bordered table-hover">
…
</table>

五、上下文類表格

通過給tr和td添加樣式，給行或單元格添加指定樣式的背景色，突出上下文，常用的樣式有active、success、info、danger和warning。如下所示：

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>省份</th>
      <th>省會</th>
      <th>地級市數(shù)量</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>福建</td>
      <td>福州</td>
      <td>9</td></tr>
    <tr class="success">
      <td>廣東</td>
      <td>廣州</td>
      <td>21</td></tr>
    <tr class="warning">
      <td>廣西</td>
      <td>南寧</td>
      <td>14</td></tr>
    <tr class="danger">
      <td>海南</td>
      <td>海口</td>
      <td>4</td></tr>
  </tbody>
</table>

效果圖：

六、響應(yīng)式表格

隨著各種手持設(shè)備的出現(xiàn)，要想讓你的Web頁面適合千羅萬像的設(shè)備瀏覽，響應(yīng)式設(shè)計的呼聲越來越高。在Bootstrap中也為表格提供了響應(yīng)式的效果，將其稱為響應(yīng)式表格。

Bootstrap提供了一個容器，并且此容器設(shè)置類名“.table-responsive”,此容器就具有響應(yīng)式效果，然后將<table class="table">置于這個容器當(dāng)中，這樣表格也就具有響應(yīng)式效果。

Bootstrap中響應(yīng)式表格效果表現(xiàn)為：當(dāng)你的瀏覽器可視區(qū)域小于768px時，表格底部會出現(xiàn)水平滾動條。當(dāng)你的瀏覽器可視區(qū)域大于768px時，表格底部水平滾動條就會消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

七、緊湊型表格：

何謂緊湊型表格，簡單理解，就是單元格沒內(nèi)距或者內(nèi)距較其他表格的內(nèi)距更小。換句話說，要實現(xiàn)緊湊型表格只需要重置表格單元格的內(nèi)距padding的值。那么在Bootstrap中，通過類名“table-condensed”重置了單元格內(nèi)距值。

緊湊型表格的運用，也只是需要在<table class="table">基礎(chǔ)上添加類名“table-condensed”：

<table class="table table-condensed">

Bootstrap中緊湊型的表格與基礎(chǔ)表格差別不大，因為只是將單元格的內(nèi)距由8px調(diào)至5px。

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