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

更新時間：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)移動到內(nèi)容行上有響應(yīng)效果，可以這樣設(shè)定：

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

如果希望表格緊湊一點節(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è)備上顯示一致，對表格也可使用響應(yīng)式設(shè)定，在表格外使用div修飾一下，將自動適應(yīng)小于或大于768px的設(shè)備：

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

Bootstrap支持的表格元素：

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

您可能感興趣的文章:

相關(guān)文章

淺談JS驗證表單文本域輸入空格的問題
下面小編就為大家?guī)硪黄獪\談JS驗證表單文本域輸入空格的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
微信小程序之多列表的顯示和隱藏功能【附源碼】
今天在項目碰到一個問題，之前在項目首頁實現(xiàn)單列表的顯示和隱藏，通過wx:if判斷就可實現(xiàn)，現(xiàn)在要實現(xiàn)多列表的單項顯示和隱藏功能應(yīng)該如何實現(xiàn)呢？下面小編給大家?guī)砹宋⑿判〕绦蛑嗔斜淼娘@示和隱藏功能，感興趣的朋友一起看看吧
2018-08-08
詳解JavaScript數(shù)組的常用方法
這篇文章主要為大家介紹了JavaScript數(shù)組的常用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
javascript回調(diào)函數(shù)的概念理解與用法分析
這篇文章主要介紹了javascript回調(diào)函數(shù)的概念理解與用法,結(jié)合具體實例形式分析了javascript回調(diào)函數(shù)的功能、原理、使用方法與相關(guān)注意事項,需要的朋友可以參考下
2017-05-05
JS簡單實現(xiàn)動態(tài)添加HTML標(biāo)記的方法示例
這篇文章主要介紹了JS簡單實現(xiàn)動態(tài)添加HTML標(biāo)記的方法,結(jié)合實例形式分析了JavaScript使用createElement()方法針對頁面元素進(jìn)行動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-04-04
js實現(xiàn)的簡練高效拖拽功能示例
這篇文章主要介紹了js實現(xiàn)的簡練高效拖拽功能,通過對js鼠標(biāo)事件的擴(kuò)展實現(xiàn)拖拽效果,非常簡單實用,需要的朋友可以參考下
2016-12-12
Javascript地址引用代碼實例解析
這篇文章主要介紹了Javascript地址引用代碼實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-02-02
JS異步堆棧追蹤之為什么await勝過Promise
與直接使用Promise相比，使用async/await不僅可以使代碼更具可讀性，而且還可以在JavaScript引擎中實現(xiàn)一些有趣的優(yōu)化。這篇文章是關(guān)于一個這樣的優(yōu)化，涉及異步代碼的堆棧追蹤。
2021-04-04
詳解JavaScript表單驗證（E-mail 驗證）
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗證，重點介紹了E-mail驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-03-03
layui插件表單驗證提交觸發(fā)提交的例子
今天小編就為大家分享一篇layui插件表單驗證提交觸發(fā)提交的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09