-
注意響應(yīng)式表格使用格式跟緊湊，邊框，hover striped都不一樣，<div class="table-responsive"> <table class="table table-bordered"> … </table> </div>查看全部
-
不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時，千萬注意，你的<table>元素中一定不能缺少類名“table”。查看全部
-
何謂緊湊型表格，簡單理解，就是單元格沒內(nèi)距或者內(nèi)距較其他表格的內(nèi)距更小。換句話說，要實現(xiàn)緊湊型表格只需要重置表格單元格的內(nèi)距padding的值。那么在Bootstrap中，通過類名“table-condensed”重置了單元格內(nèi)距值。 緊湊型表格的運用，也只是需要在<table class="table">基礎(chǔ)上添加類名“table-condensed”：查看全部
-
注：其實，鼠標懸浮高亮表格，可以和Bootstrap其他表格混合使用。簡單點說，只要你想讓你的表格具備懸浮高亮效果，你只要給這個表格添加“table-hover”類名就好了。例如，將前面介紹的幾種表格結(jié)合使用：查看全部
-
當鼠標懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數(shù)據(jù)。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個“.table-hover”類名來實現(xiàn)這種表格效果。 鼠標懸停高亮的表格使用也簡單，僅需要<table class="table">元素上添加類名“table-hover”查看全部
-
基礎(chǔ)表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出于實際運用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。 Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎(chǔ)表格<table class="table">基礎(chǔ)上添加一個“.table-bordered”類名即可查看全部
-
僅是在tbody隔行有一個淺灰色的背景色。其實現(xiàn)原理也非常的簡單，利用CSS3的結(jié)構(gòu)性選擇器“:nth-child”來實現(xiàn)，所以對于IE8以及其以下瀏覽器，沒有背景條紋效果。查看全部
-
有時候為了讓表格更具閱讀性，需要將表格制作成類似于斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現(xiàn)這種表格效果并不困難，只需要在<table class="table">的基礎(chǔ)上增加類名“.table-striped”查看全部
-
基礎(chǔ)表格 在Bootstrap中，對于基礎(chǔ)表格是通過類名“.table”來控制。如果在<table>元素中不添加任何類名，表格是無任何樣式效果的。想得到基礎(chǔ)表格，我們只需要在<table>元素上添加“.table”類名，就可以得到Bootstrap的基礎(chǔ)表格：查看全部
-
特別提示：除了”.active”之外，其他四個類名和”.table-hover”配合使用時，Bootstrap針對這幾種樣式也做了相應(yīng)的懸浮狀態(tài)的樣式設(shè)置，所以如果需要給tr元素添加其他顏色樣式時，在”.table-hover”表格中也要做相應(yīng)的調(diào)整。 注意要實現(xiàn)懸浮狀態(tài)，需要在<table>標簽上加入table-hover類查看全部
-
Bootstrap還為表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色 http://img1.sycdn.imooc.com//53ad213f0001b08807340508.jpg查看全部
-
Bootstrap為表格不同的樣式風格提供了不同的類名，主要包括： ? .table：基礎(chǔ)表格 ? .table-striped：斑馬線表格 ? .table-bordered：帶邊框的表格 ? .table-hover：鼠標懸停高亮的表格 ? .table-condensed：緊湊型表格 ? .table-responsive：響應(yīng)式表格查看全部
-
，<pre>元素一般用于顯示大塊的代碼，并保證原有格式不變。但有時候代碼太多，而且不想讓其占有太大的頁面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點，你只需要在pre標簽上添加類名“.pre-scrollable”，就可以控制代碼塊區(qū)域最大高度為340px，一旦超出這個高度，就會在Y軸出現(xiàn)滾動條。查看全部
-
本節(jié)內(nèi)容相對來說比較簡單，一般在個人博客上使用的較為頻繁，用于顯示代碼的風格。在Bootstrap主要提供了三種代碼風格： 1、使用<code></code>來顯示單行內(nèi)聯(lián)代碼 2、使用<pre></pre>來顯示多行塊代碼 3、使用<kbd></kbd>來顯示用戶輸入代碼查看全部
-
此處添加了一個媒體查詢。也就是說，只有屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果。其實現(xiàn)主要方式： 1、將dt設(shè)置了一個左浮動，并且設(shè)置了一個寬度為160px 2、將dd設(shè)置一個margin-left的值為180px，達到水平的效果 3、當標題寬度超過160px時，將會顯示三個省略號查看全部
舉報
0/150
提交
取消