首頁 > web前端 > html教學 > 利用Boostrap創建表格實例

利用Boostrap創建表格實例

零下一度
發布: 2017-06-23 10:05:57
原創
2187 人瀏覽過

前面的話

  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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板