第二章 排版 2.18表格
阿新 • • 發佈:2018-12-09
不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時,千萬注意,你的<table>元素中一定不能缺少類名“table”。
一、基礎表格
“.table”主要有三個作用:
☑ 給表格設定了margin-bottom:20px以及設定單元內距
☑ 在thead底部設定了一個2px的淺灰實線
☑ 每個單元格頂部設定了一個1px的淺灰實線
<table class="table"> … </table>
二、斑馬線表格
<table class="table table-striped"> … </table>
其效果與基礎表格相比,僅是在tbody隔行有一個淺灰色的背景色。其實現原理也非常的簡單,利用CSS3的結構性選擇器“:nth-child”來實現,所以對於IE8以及其以下瀏覽器,沒有背景條紋效果。
原始碼請檢視bootstrap.css檔案第1465行~第1468行:
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; }
若想要給表格加一個邊框,直接在table標籤中加入"table-bordered"這個類即可(1px)
三、緊湊型表格
類:table-condensed
該類重置了內距padding.
↓↓↓
四、Bootstrap還為表格的行元素<tr>提供了五種不同的類名,每種類名控制了行的不同背景顏色,具體說明如下表所示:
其使用非常的簡單,只需要在<tr>元素中新增上表對應的類名,就能達到你自己需要的效果:
<tr class="active"> <td>…</td> </tr>
注意要實現懸浮狀態,需要在<table>標籤上加入table-hover類。
如下程式碼:
<table class="table-hover">
舉例:
<table class="table table-hover"> <thead> <tr> <th>類名</th> <th>描述</th> </tr> </thead> <tbody> <tr class="active"> <td>.active</td> <td>表示當前活動的資訊</td> </tr> <tr class="success "> <td>.success</td> <td>表示成功或者正確的行為</td> </tr> <tr class="info"> <td>.info</td> <td>表示中立的資訊或行為</td> </tr> <tr class="warning"> <td>.warning</td> <td>表示警告,需要特別注意</td> </tr> <tr class="danger"> <td>.danger</td> <td>表示危險或者可能是錯誤的行為</td> </tr> </tbody> </table>
五、響應式表格
Bootstrap提供了一個容器,並且此容器設定類名“.table-responsive”,此容器就具有響應式效果,然後將<table class="table">置於這個容器當中,這樣表格也就具有響應式效果。
<div class="table-responsive"> <table class="table table-bordered"> … </table> </div>