第六篇Bootstrap表格樣式介紹
基本表格:
<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”可以為表格的每個(gè)單元格增加邊框。
<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 寬度時(shí),水平滾動條消失
<div> <table> <tr><td>用戶名</td><td>密碼</td></tr> <tr><td>啊啊啊</td><td>1111</td></tr> </table> </div>
以上所述是小編給大家介紹的第六篇Bootstrap表格樣式介紹的全部敘述,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
解決js相同的正則多次調(diào)用test()返回的值卻不同的問題
今天小編就為大家分享一篇解決js相同的正則多次調(diào)用test()返回的值卻不同的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10javascript打印html內(nèi)容功能的方法示例
這篇文章主要介紹了javascript打印html內(nèi)容的小示例,大家參考使用2013-11-11JS中圖片緩沖loading技術(shù)的實(shí)例代碼
這篇文章介紹了JS中圖片緩沖loading技術(shù)的實(shí)例代碼,有需要的朋友可以參考一下2013-08-08