bootstrap表格
阿新 • • 發佈:2017-06-24
水平滾動 arr ont nal 狀態 屏幕 tool 普通 copy
前面的話
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>
bootstrap表格