Bootstrap表格

前面的話

　　Bootstrap為我們提供了非常好看且易用的表格樣式，利用Boostrap可以快速的創建出不同樣式的表格，本文將詳細介紹Boostrap表格

基本實例

　　Boostrap將表格<table>的樣式重置如下

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}

<table>
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>    

　　為任意<table>標簽添加.table類可以為其賦予基本的樣式—少量的內邊距(padding)和水平方向的分隔線 

<table class="table">
  ...
</table>

條紋狀表格

　　通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式

　　[註意]條紋狀表格是依賴 :nth-child CSS 選擇器實現的，而這一功能不被IE8-支持

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

<table class="table table-striped">
  ...
</table>

帶邊框表格

　　添加 .table-bordered 類為表格和其中的每個單元格增加邊框

<table class="table table-bordered">
  ...
</table>

滑鼠懸停

　　通過添加 .table-hover 類可以讓 <tbody> 中的每一行對滑鼠懸停狀態作出響應

<table class="table table-hover">
  ...
</table>

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

緊縮表格

　　通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半

<table class="table table-condensed">
  ...
</table>

狀態類

　　通過這些狀態類可以為行或單元格設置顏色

Class    　　描述
.active     滑鼠懸停在行或單元格上時所設置的顏色
.success    標識成功或積極的動作
.info    　　標識普通的提示信息或動作
.warning    標識警告或需要用戶註意
.danger     標識危險或潛在的帶來負面影響的動作

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="success">
      <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="info">
      <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="warning">
      <th scope="row">4</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="danger">
      <th scope="row">5</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

響應式表格

　　將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>