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)文章
javascript回調(diào)函數(shù)的概念理解與用法分析
這篇文章主要介紹了javascript回調(diào)函數(shù)的概念理解與用法,結(jié)合具體實(shí)例形式分析了javascript回調(diào)函數(shù)的功能、原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-05-05JS簡(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-04js實(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表單驗(yàn)證(E-mail 驗(yàn)證)
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證,重點(diǎn)介紹了E-mail驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03