bootstrap中的table組件

表格是bootstrap的一個基礎組件之一，bootstrap爲表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格。
在使用Bootstrap的表格過程中，只需要添加對應的類名就可以得到不同的表格風格，在接下來的內容中，我們會詳細介紹bootstrap的表格使用。

同樣的，如果你對css預處理器熟悉，可以使用bootstrap提供的預處理版本：
Less版本，對應的文件是table.less  Sass版本，對應的文件是_table.scss

如果你不懂Less或Sass也無妨，在bootstrap.css文件中第1402行到1630行可以查閱到所有有關table的樣式代碼。

bootstrap爲表格不同的樣式風格提供了不同的類名，主要包括：
table:基礎表格
table-striped:斑馬線表格
table-bordered:帶邊框的表格
table-hover:鼠標懸停高亮的表格
table-condensed:緊湊型表格
table-responsive:響應式表格

表格---表格行的類
bootstrap爲表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色。
使用非常簡單，只需要在<tr>元素中添加上表對應的類名，就能達到你自己需要的效果:
<tr></tr> 代表白色(默認)
<tr class = "active"></tr> 代表灰色
<tr class = "success"></tr> 代表綠色
<tr class = "info"></tr> 代表藍色
<tr class = "warning"></tr> 代表黃色
<tr class = "danger"></tr> 代表紅色
顏色對應的源碼，在bootstrap.css文件中第1484到1583行。
特別提示:除了"active"之外，其他四個類名與"table-hover"配合使用時，bootstrap針對這幾個樣式也做了相應的懸浮狀態的樣式設定。
      所以如果需要給tr元素添加其他顏色的樣式時，在table-hover表格中也要做相應的調整。

表格---基礎表格
我們只需要在<table>元素中添加class = "table"就可以使用bootstrap提供的基礎表格。

表格---斑馬線表格
效果：讓表格帶有背景條紋效果。
代碼：<table class = "table table-striped">即可。
 
表格---帶表框的表格
效果：讓所有單元格都具有一條1px的邊框。
代碼：<table class = "table table-bordered">即可。
 
表格---鼠標懸浮高亮的表格
效果：當鼠標停在表格中時，高亮顯示
代碼：<table class = "table table-hover">即可。
 
表格---緊湊型表格
效果：單元格沒內距，或者說內距變小
代碼：<table class = "table table-condensed">即可。
 
以上4種表格樣式可以一起使用。
 
表格---響應式表格
效果：當你的瀏覽器可視區域768px時，表格底部會出現水平滾動條。當瀏覽器可視區域大於768px時，水平滾動條就會消失。
代碼：<div class = "table-responsive">注意寫在table最近的div框中。