DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 第六篇Bootstrap表格樣式介紹
第六篇Bootstrap表格樣式介紹
編輯:關於JavaScript     

基本表格:

<table>
<tr><td>用戶名</td><td>密碼</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

<table>標簽添加.table類可以為其賦予基本的樣式 ,少量的內補(padding)和水平方向的分隔線。

顯示效果如下:

條紋狀表格:

在table標簽上加上:class=”table table-striped”可以給tbody之內的每一行增加斑馬條紋樣式

<table>
<tr><td>用戶名</td><td>密碼</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

顯示效果如下:

帶邊框的表格:

在table標簽上加上class=” table table-bordered”可以為表格的每個單元格增加邊框。

<table>
<tr><td>用戶名</td><td>密碼</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

顯示效果如下:

緊縮表格:

通過添加.table-condensed類可以讓表格更加緊湊,單元格中的內補(padding)均會減半

<table>
<tr><td>用戶名</td><td>密碼</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

顯示效果如下:

響應式表格:

將任何.table元素包裹在.table-responsive元素內,即可創建響應式表格,其會在小屏幕設備上(小於768px)水平滾動。當屏幕大於 768px 寬度時,水平滾動條消失

<div>
<table>
<tr><td>用戶名</td><td>密碼</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>
</div>

以上所述是小編給大家介紹的第六篇Bootstrap表格樣式介紹的全部敘述,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved