Bootstrap3學習筆記(三)之表格
更新時間：2016年05月20日 11:40:38 投稿：mrr
這篇文章主要介紹了Bootstrap3學習筆記(三)之表格的相關資料,需要的朋友可以參考下
在上篇文章給大家介紹了 BootStrap3學習筆記(一)之網(wǎng)格系統(tǒng) Bootstrap3學習筆記(二)之排版
只需要在table標簽上使用.table類，就可以使用bootstrap默認的表格樣式
如果需要行背景有交替變化，可以這樣設定：
復制代碼 代碼如下:
<table class="table table-striped">
如果需要邊框，可以這樣設定：
復制代碼 代碼如下:
<table class="table table-bordered">
如果希望鼠標移動到內(nèi)容行上有響應效果，可以這樣設定：
復制代碼 代碼如下:
<table class="table table-hover">
如果希望表格緊湊一點節(jié)省空間，可以這樣設定，cell的pedding將減半為4px，默認padding為8px：
復制代碼 代碼如下:
<table class="table table-condensed">
也可以給某行加上特定的樣式：
<tr class="active"> <tr class="success"> <tr class="info"> <tr class="warning"> <tr class="danger">
為了不同設備上顯示一致，對表格也可使用響應式設定，在表格外使用div修飾一下，將自動適應小于或大于768px的設備：
復制代碼 代碼如下:
<div class="table-responsive">
Bootstrap支持的表格元素：
以上所述是小編給大家介紹的Bootstrap3學習筆記(三)之表格的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
下面小編就為大家?guī)硪黄獪\談JS驗證表單文本域輸入空格的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
今天在項目碰到一個問題，之前在項目首頁實現(xiàn)單列表的顯示和隱藏，通過wx:if判斷就可實現(xiàn)，現(xiàn)在要實現(xiàn)多列表的單項顯示和隱藏功能應該如何實現(xiàn)呢？下面小編給大家?guī)砹宋⑿判〕绦蛑嗔斜淼娘@示和隱藏功能，感興趣的朋友一起看看吧2018-08-08
這篇文章主要為大家介紹了JavaScript數(shù)組的常用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
javascript回調(diào)函數(shù)的概念理解與用法分析
這篇文章主要介紹了javascript回調(diào)函數(shù)的概念理解與用法,結(jié)合具體實例形式分析了javascript回調(diào)函數(shù)的功能、原理、使用方法與相關注意事項,需要的朋友可以參考下2017-05-05
JS簡單實現(xiàn)動態(tài)添加HTML標記的方法示例
這篇文章主要介紹了JS簡單實現(xiàn)動態(tài)添加HTML標記的方法,結(jié)合實例形式分析了JavaScript使用createElement()方法針對頁面元素進行動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了js實現(xiàn)的簡練高效拖拽功能,通過對js鼠標事件的擴展實現(xiàn)拖拽效果,非常簡單實用,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了Javascript地址引用代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
與直接使用Promise相比，使用async/await不僅可以使代碼更具可讀性，而且還可以在JavaScript引擎中實現(xiàn)一些有趣的優(yōu)化。這篇文章是關于一個這樣的優(yōu)化，涉及異步代碼的堆棧追蹤。2021-04-04
這篇文章主要為大家詳細介紹了JavaScript表單驗證，重點介紹了E-mail驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
今天小編就為大家分享一篇layui插件表單驗證提交觸發(fā)提交的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09