Bootstrap3學(xué)習(xí)筆記(三)之表格

更新時(shí)間：2016年05月20日 11:40:38 投稿：mrr

這篇文章主要介紹了Bootstrap3學(xué)習(xí)筆記(三)之表格的相關(guān)資料,需要的朋友可以參考下

在上篇文章給大家介紹了 BootStrap3學(xué)習(xí)筆記(一)之網(wǎng)格系統(tǒng) Bootstrap3學(xué)習(xí)筆記(二)之排版

只需要在table標(biāo)簽上使用.table類，就可以使用bootstrap默認(rèn)的表格樣式

如果需要行背景有交替變化，可以這樣設(shè)定：

復(fù)制代碼代碼如下:

如果需要邊框，可以這樣設(shè)定：

復(fù)制代碼代碼如下:

如果希望鼠標(biāo)移動(dòng)到內(nèi)容行上有響應(yīng)效果，可以這樣設(shè)定：

復(fù)制代碼代碼如下:

如果希望表格緊湊一點(diǎn)節(jié)省空間，可以這樣設(shè)定，cell的pedding將減半為4px，默認(rèn)padding為8px：

復(fù)制代碼代碼如下:

也可以給某行加上特定的樣式：

<tr class="active">
<tr class="success">
<tr class="info">
<tr class="warning">
<tr class="danger">

為了不同設(shè)備上顯示一致，對(duì)表格也可使用響應(yīng)式設(shè)定，在表格外使用div修飾一下，將自動(dòng)適應(yīng)小于或大于768px的設(shè)備：

復(fù)制代碼代碼如下:

Bootstrap支持的表格元素：

以上所述是小編給大家介紹的Bootstrap3學(xué)習(xí)筆記(三)之表格的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

webpack proxy 使用(代理的使用)
這篇文章主要介紹了webpack proxy 使用(代理的使用)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
js中的數(shù)組Array定義與sort方法使用示例
Array定義與sort方法在使用過程中還是比較常見的，下面為大家介紹下Array的定義及sort方法使用示例
2013-08-08
javascript使用onclick事件改變選中行的顏色
javascript onclick事件改變選中行的顏色,方法簡(jiǎn)單，大家參考使用吧
2013-12-12
關(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解
下面小編就為大家?guī)?lái)一篇關(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-08-08
前端printjs的使用實(shí)戰(zhàn)案例
Print.js是一個(gè)小的javascript庫(kù),可幫助您從網(wǎng)絡(luò)上打印,這篇文章主要給大家介紹了關(guān)于前端printjs的使用實(shí)戰(zhàn)案例,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
淺談javascript獲取元素transform參數(shù)
本文主要給大家簡(jiǎn)單介紹了javascript獲取元素的transform參數(shù)的方法以及個(gè)人的理解，記錄下來(lái)分享給大家。
2015-07-07
javascript實(shí)現(xiàn)瀑布流動(dòng)態(tài)加載圖片原理
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)瀑布流動(dòng)態(tài)加載圖片原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
解析John Resig Simple JavaScript Inheritance代碼
上網(wǎng)也查了一下對(duì)些的理解說(shuō)的都不是很清楚. 在翻閱的同時(shí)找到了一篇分析這篇文章的文章哈哈分析的很詳細(xì). (Join Resig 大師的 "Simple Inheritance" 使用了很多有意思的技巧) 如果你有時(shí)間, 并對(duì)此感興趣不訪好好看看. 我相信多少會(huì)有所收益的.
2012-12-12
javascript中Array()數(shù)組函數(shù)詳解
在JavaScript中數(shù)組也是比較常用的對(duì)象之一，數(shù)組是值的有序集合，本篇文章給大家分享Javascript中Array()數(shù)組函數(shù)詳解，需要的朋友可以參考下
2015-08-08
你必須知道的Javascript知識(shí)點(diǎn)之"this指針"的應(yīng)用
本篇文章小編為大家介紹，你必須知道的Javascript知識(shí)點(diǎn)之"this指針"的應(yīng)用。需要的朋友參考下
2013-04-04