常規(guī)表格
給 <table> 標(biāo)簽設(shè)置 .table 類
<table class="table">
<!-- 表頭 -->
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
01.PNG
條紋表格
增加設(shè)置 table-striped 類
<div class="table table-striped">
.........
</div>
02.PNG
帶邊框表格
增加設(shè)置 table-bordered 類
<div class="table table-bordered">
.........
</div>
03.PNG
鼠標(biāo)懸停表格
設(shè)置 table-hover 類
<div class="table table-hover">
.........
</div>
twitter-bootstrap-table-hover.png
緊湊型表格
設(shè)置 table-condensed 類
<div class="table table-condensed">
.........
</div>
05.PNG
為行設(shè)置情景顏色
在 <tr> 標(biāo)簽中設(shè)置 .success .info 之類的類
<table class="table">
<thead>
<tr>
<th>Row</th>
<th>Bill</th>
<th>Payment Date</th>
<th>Payment Status</th>
</tr>
</thead>
<tbody>
<tr class="active">
......
</tr>
<tr class="success">
......
</tr>
<tr class="info">
......
</tr>
<tr class="warning">
......
</tr>
<tr class="danger">
......
</tr>
</tbody>
</table>
06.PNG
響應(yīng)式表格
將任何 .table 元素包裹在 .table-responsive 元素內(nèi)膊夹，即可創(chuàng)建響應(yīng)式表格颓遏。在屏幕尺寸不夠的情況下晌端，響應(yīng)式表格會自動增加水平滾動條
<div class="table-responsive">
<table class="table table-bordered">
.........
</table>
</div>
07.PNG
