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