BootStrap table的各種樣式效果

Bootstrap 表格類樣式

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

☑  .table-striped：斑馬線表格

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

☑  .table-hover：鼠標懸停高亮的表格

☑  .table-condensed：緊湊型表格

☑  .table-responsive：響應式表格

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

  ☑  給表格設置了單元內距及底部邊距margin-bottom:20px

  ☑  在thead底部設置了一個2px的淺灰實線

  ☑  每個單元格頂部設置了一個1px的淺灰實線
 

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

一、基礎表格

實現代碼：

<table class="table">
	<caption>基礎表格</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 class="table table-striped">

 效果圖：

三、邊框表格

關鍵代碼：

<table class="table table-bordered">

 效果圖：

四、懸停表格

通過給表格class添加 .table-hover樣式，當指針懸停在行上時會出現淺灰色背景

實現代碼： 

<table class="table table-hover">

效果圖：

五、上下文類表格

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

<table class="table">
  <caption>上下文表格佈局</caption>
  <thead>
    <tr>
      <th>省份</th>
      <th>省會</th>
      <th>地級市數量</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>

 效果圖：

六、響應式表格

通過給表格添加上.table-responsive 樣式，可以讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差別。 

核心代碼：

<div class="table-responsive">
  <table class="table">

七、緊湊型表格：

通過給表格添加.table-condensed 樣式，讓行內邊距（padding）被切爲兩半，以便讓表看起來更緊湊，

核心代碼：

<table class="table table-condensed">