首先,
你要知道一個基礎table的標籤怎麼去寫, 只有知道這個基礎, 你才能更好的用bootstrap中的table. html在這不過多說明.
既然看這篇文章, 肯定都能夠理解. 然後現在就把bootstrap中的table來詳細說明一下. 基礎的table如下:
下面瞭解一下bootstrap中table, 沒有什麼大道理可以講解. 唯有一點, 透過表格的方式展示頁面. 首先有必要樣式.table. 和一些選用樣式. 舉例說明必要樣式. 首先要搭建一個基礎框架, 請看系列經驗第一篇.
在搭建的基礎框架裡面的body部分填寫table資訊. 然後在table的標籤上加上基礎樣式.table的css樣式. 你立刻發現, 介面瞬間好看多了.
說明一下除了必要的.table之外, 還有很多可選的class. 不同的可選class. 是可以聯合使用的.
1.我們常用的就有邊框的table. 只需要使用.table-bordered 檢視效果圖.
2.斑馬線, 也就是隔行相同顏色的一個樣式. 使用.table-striped樣式.
注意點有2個:
(1)斑馬線是對tbody中的行起作用
(2)斑馬線的實現方式是透過:nth-child CSS選擇器實現的, 但是呢, 他不被ie8支援, 你懂我說的.
3.滑鼠懸停在行上, 改變行的背景顏色. 使用.table-hover樣式.
注意: 這個需要多行的時候, 這種效果更加明顯.
4.讓表格更加緊湊的樣式.table-condensed, 它是讓表格單元格中的內部（padding）減半.展現更多的內容, 和更多的顯示內容.
其他的提醒說明: 在bootstrap中有這樣的幾個樣式, 可以說是提醒樣式. 每個樣式都是一種提醒方式. 這些方式也可以放到table中. 只需要使用class即可.
上面狀態的樣式, 可以使用到不同的內容中, 比方說, tr中, td中, 都是可以的. 下面的舉例說明.
注意點: 在使用這個樣式的時候不能使用.table-striped的樣式, 會出現不能正常顯示的問題.
還有就是現在比較流行的響應式的table. 只需要在table包含在.table-responsive中即可, 作用為: 當螢幕小於768的時候, 才會出現捲軸, 否則捲軸消失.
10
動手去嘗試, 你發現學習bootstrap也就是這麼簡單.祝你更快的學會這個框架.
首先,
你要知道一個基礎table的標籤怎麼去寫, 只有知道這個基礎, 你才能更好的用bootstrap中的table. html在這不過多說明.
既然看這篇文章, 肯定都能夠理解. 然後現在就把bootstrap中的table來詳細說明一下. 基礎的table如下:
下面瞭解一下bootstrap中table, 沒有什麼大道理可以講解. 唯有一點, 透過表格的方式展示頁面. 首先有必要樣式.table. 和一些選用樣式. 舉例說明必要樣式. 首先要搭建一個基礎框架, 請看系列經驗第一篇.
在搭建的基礎框架裡面的body部分填寫table資訊. 然後在table的標籤上加上基礎樣式.table的css樣式. 你立刻發現, 介面瞬間好看多了.
說明一下除了必要的.table之外, 還有很多可選的class. 不同的可選class. 是可以聯合使用的.
1.我們常用的就有邊框的table. 只需要使用.table-bordered 檢視效果圖.
2.斑馬線, 也就是隔行相同顏色的一個樣式. 使用.table-striped樣式.
注意點有2個:
(1)斑馬線是對tbody中的行起作用
(2)斑馬線的實現方式是透過:nth-child CSS選擇器實現的, 但是呢, 他不被ie8支援, 你懂我說的.
3.滑鼠懸停在行上, 改變行的背景顏色. 使用.table-hover樣式.
注意: 這個需要多行的時候, 這種效果更加明顯.
4.讓表格更加緊湊的樣式.table-condensed, 它是讓表格單元格中的內部（padding）減半.展現更多的內容, 和更多的顯示內容.
其他的提醒說明: 在bootstrap中有這樣的幾個樣式, 可以說是提醒樣式. 每個樣式都是一種提醒方式. 這些方式也可以放到table中. 只需要使用class即可.
上面狀態的樣式, 可以使用到不同的內容中, 比方說, tr中, td中, 都是可以的. 下面的舉例說明.
注意點: 在使用這個樣式的時候不能使用.table-striped的樣式, 會出現不能正常顯示的問題.
還有就是現在比較流行的響應式的table. 只需要在table包含在.table-responsive中即可, 作用為: 當螢幕小於768的時候, 才會出現捲軸, 否則捲軸消失.
10
動手去嘗試, 你發現學習bootstrap也就是這麼簡單.祝你更快的學會這個框架.