表格是Bootstrap的一個(gè)基礎(chǔ)組件之一,Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個(gè)支持響應(yīng)式的表格。在使用Bootstrap的表格過程中,只需要添加對應(yīng)的類名就可以得到不同的表格風(fēng)格。
其使用非常的簡單,只需要在元素中添加上表對應(yīng)的類名
基礎(chǔ)表格 .table
斑馬線表格 .table-striped
簡單點(diǎn)說就是讓表格帶有背景條紋效果。在Bootstrap中實(shí)現(xiàn)這種表格效果并不困難,只需要在的基礎(chǔ)上增加類名“.table-striped”即可
帶邊框的表格 .table-bordered
即所有單元格具有一條1px的邊框。只需要在基礎(chǔ)表格鼠標(biāo)懸浮高亮的表格 .table-hover
當(dāng)鼠標(biāo)懸停在表格的行上面有一個(gè)高亮的背景色,使用也簡單,僅需要緊湊型表格 .table-condensed
緊湊型表格的運(yùn)用,也只是需要在Bootstrap中緊湊型的表格與基礎(chǔ)表格差別不大,因?yàn)橹皇菍卧竦膬?nèi)距由8px調(diào)至5px。
響應(yīng)式表格 .table-responsive
Bootstrap提供了一個(gè)容器,并且此容器設(shè)置類名“.table-responsive”,此容器就具有響應(yīng)式效果,然后將Bootstrap中響應(yīng)式表格效果表現(xiàn)為:當(dāng)你的瀏覽器可視區(qū)域小于768px時(shí),表格底部會(huì)出現(xiàn)水平滾動(dòng)條。當(dāng)你的瀏覽器可視區(qū)域大于768px時(shí),表格底部水平滾動(dòng)條就會(huì)消失。
這是蘇州網(wǎng)絡(luò)公司小編在做系統(tǒng)中遇到問題整理的一些關(guān)于bootstrap的表格用法,但是不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時(shí),千萬注意你的

2017-12-15
關(guān)鍵詞:
2898
電話咨詢
業(yè)務(wù)咨詢

TOP