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)站的支持!
相關文章
javascript回調(diào)函數(shù)的概念理解與用法分析
這篇文章主要介紹了javascript回調(diào)函數(shù)的概念理解與用法,結(jié)合具體實例形式分析了javascript回調(diào)函數(shù)的功能、原理、使用方法與相關注意事項,需要的朋友可以參考下2017-05-05JS簡單實現(xiàn)動態(tài)添加HTML標記的方法示例
這篇文章主要介紹了JS簡單實現(xiàn)動態(tài)添加HTML標記的方法,結(jié)合實例形式分析了JavaScript使用createElement()方法針對頁面元素進行動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-04-04