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>