這篇文章主要介紹了bootstrap中table的使用方法和相關(guān)樣式，具有一定借鑒價(jià)值，需要的朋友可以參考下。如下資料是關(guān)于bootstrap中table的使用方法和相關(guān)樣式的內(nèi)容。

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括海州網(wǎng)站建設(shè)、海州網(wǎng)站制作、海州網(wǎng)頁(yè)制作以及海州網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，海州網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到海州省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

在使用bootstrap框架布局前，一定要先引入相關(guān)的jQuery，CSS，JS文件，不清楚的小伙伴可以看看我以前寫(xiě)文章，如何在HTML頁(yè)面中使用bootstrap框架，或者參考Bootstrap視頻教程。

一、基本表格

基本布局完成以后，給

標(biāo)簽添加class類(lèi)名 .table 就可以實(shí)現(xiàn)基本的表格樣式（少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線(xiàn)）。

bootstrap table實(shí)例：制作一個(gè)六行四列的表格用于統(tǒng)計(jì)學(xué)生信息，具體代碼如下：

學(xué)號(hào)	姓名	年齡	地址
1	郭靖	25	安徽
2	田秋元	23	上海
3	楊容	24	江西
4	許悅	21	浙江
5	張柏芝	22	新疆

效果圖：

二、條紋狀表格

在基本表格的基礎(chǔ)上，給

標(biāo)簽添加class類(lèi)名 .table-striped 就可以給 之內(nèi)的每一行增加斑馬條紋樣式。

效果如圖所示：

三、帶邊框的表格

在

標(biāo)簽中，添加class類(lèi)名.table-bordered 就可以為表格和其中的每個(gè)單元格增加邊框。

效果如圖所示：

四、鼠標(biāo)懸停表格

在

標(biāo)簽中，添加class類(lèi)名 .table-hover 就可以讓 中的每一行對(duì)鼠標(biāo)懸停狀態(tài)作出響應(yīng)。當(dāng)鼠標(biāo)經(jīng)過(guò)第一行時(shí)，第一行的背景顏色變成了灰色。

效果如圖所示：

五、緊縮表格

在

標(biāo)簽中，添加class類(lèi)名 .table-condensed 可以讓表格變得更加緊湊，單元格中的內(nèi)補(bǔ)（padding）均會(huì)減半。

對(duì)比上面的圖片，看看緊縮表格的效果：

六、

六、響應(yīng)式表格

將含有class類(lèi)名 .table 的元素包裹在含有類(lèi)名 .table-responsive 的元素里面，就可以創(chuàng)建響應(yīng)式表格，當(dāng)屏幕小于768px時(shí)，水平滾動(dòng)，當(dāng)屏幕大于 768px 寬度時(shí)，水平滾動(dòng)條消失。

學(xué)號(hào)	姓名	年齡	地址
1	郭靖	25	安徽
2	田秋元	23	上海
3	楊容	24	江西
4	許悅	21	浙江
5	張柏芝	22	新疆
1	郭靖	25	安徽
2	田秋元	23	上海
3	楊容	24	江西
4	許悅	21	浙江
5	張柏芝	22	新疆

效果如圖所示：

以上就是圖文詳解bootstrap框架中table的使用方法和相關(guān)樣式的詳細(xì)內(nèi)容，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊！

網(wǎng)頁(yè)名稱(chēng)：bootstrap中table的使用方法和相關(guān)樣式-創(chuàng)新互聯(lián)
鏈接URL：http://weahome.cn/article/dcepej.html