利用Boostrap創建表格實例

前面的話

　　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>

# 

以上是利用Boostrap創建表格實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！