快捷導(dǎo)航

第六篇Bootstrap表格樣式介紹

更新時間：2016年06月21日 15:07:32 作者：-夏昊-

這篇文章主要介紹了第六篇Bootstrap表格樣式介紹的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

基本表格:

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

在<table>標(biāo)簽添加.table類可以為其賦予基本的樣式，少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線。

顯示效果如下:

條紋狀表格：

在table標(biāo)簽上加上:class=”table table-striped”可以給tbody之內(nèi)的每一行增加斑馬條紋樣式

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

顯示效果如下:

帶邊框的表格：

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

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

顯示效果如下：

緊縮表格:

通過添加.table-condensed類可以讓表格更加緊湊，單元格中的內(nèi)補(bǔ)（padding）均會減半

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

顯示效果如下：

響應(yīng)式表格:

將任何.table元素包裹在.table-responsive元素內(nèi)，即可創(chuàng)建響應(yīng)式表格，其會在小屏幕設(shè)備上（小于768px）水平滾動。當(dāng)屏幕大于 768px 寬度時，水平滾動條消失

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

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

您可能感興趣的文章:

相關(guān)文章

Javascript中apply、call、bind的巧妙使用
Javascript中apply、call、bind都是為了改變函數(shù)體內(nèi)部 this 的指向。下面通過本文重點給大家介紹js中apply，call，bind的巧妙使用方法，感興趣的朋友一起學(xué)習(xí)吧
2016-08-08
JS事件循環(huán)機(jī)制event loop宏任務(wù)微任務(wù)原理解析
這篇文章主要介紹了JS事件循環(huán)機(jī)制event loop宏任務(wù)微任務(wù)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-08-08
JavaScript 雙向鏈表操作實例分析【創(chuàng)建、增加、查找、刪除等】
這篇文章主要介紹了JavaScript 雙向鏈表操作,結(jié)合實例形式分析了JavaScript雙向鏈表的創(chuàng)建、增加、查找、刪除等相關(guān)操作技巧,需要的朋友可以參考下
2020-04-04
javascript實現(xiàn)節(jié)點（div）名稱編輯
這篇文章主要介紹了js實現(xiàn)節(jié)點（div）名稱編輯,需要的朋友可以參考下
2014-12-12
純js實現(xiàn)背景圖片切換效果代碼
現(xiàn)在純粹用js的人越來越少了，更多的人喜歡jquery，可使我還是喜歡javascript，下面給出一個用javascript寫的背景切換的小例子，各位大蝦不要罵，只是寫給自己看的，也供js事件的產(chǎn)考依據(jù)。
2010-11-11
這篇文章主要介紹了JavaScript數(shù)據(jù)在不同頁面的傳遞（URL參數(shù)獲取），下面文章圍繞JavaScript數(shù)據(jù)在不同頁面的傳遞的實現(xiàn)過，想了解的小伙伴可以和小編一起進(jìn)入文章了解具體內(nèi)容,需要的也朋友可參考一下
2021-12-12