Bootstrap學習日記之表格系統
阿新 • • 發佈：2019-02-03
Bootstrap中的表格系統也是該框架中的一大亮點，它重新細化了<table>標籤，同時由於它簡單佈局的預定義類和強大的混合類增加了它的拓展性。
<table>就是表格的主題，代表了以下內容都在表格內，同時為表格新增基礎樣式。
<thead>就是表格的頭部，什麼是頭部呢？就是每一列的列頭
如：
“姓名”“學號”便是表格的頭部，丫就是第一列、第二列的表頭
<tbody>是表格的主體，就是除了<thead>以外的內容
一般而言他們之間的關係是：
<table> <thead> <tr> <th>xxx</th> </tr> </thead> <tbody> <tr> <th>xxx</th> </tr> </tbody> </table>
表格可用的樣式以及功能
請注意，在Bootstrap中，當你使用<table>時沒有附上預定義類.table，表格就會變得跟沒使用Bootstrap的html一樣變得非常難看
使用table前
使用table後
在表格中，有時你會想要讓表格中的資料產生某種顏色來代表你所想要表達的資訊，那麼就要用到下面的類了
success=綠色資料，info=淺藍色資料，warning=黃色資料，danger=褐色資料。
Bootstrap響應式表格
我們都知道Bootstrap從3開始便是移動裝置優先， 這個表格同樣能夠做成響應式，怎麼做呢？
很簡單就是把任意(指table在<thead>或者<table>等等都可以)的.table包放在.table-responsive中
具體思路：我們建立一個div這個div class=“table-responsive”，我們建立的表格就放在這裡面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap使用</title> <link rel="stylesheet" href="css/bootstrap.css" type="text/css"> <link href="css/bootstrap-theme.css" type="text/css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="table-responsive"> <table class="table"> <thead style="background-color: #2aabd2"> <tr class=> <th>姓名</th> <th>學號</th> </tr> </thead> <tbody> <tr class="text-success"> <th>張三</th> <th>14</th> </tr> <tr> <th>李四</th> <th>15</th> </tr> </tbody> </table> </div> </body> </html>
不過需要注意的是，這個方法只能讓此表格滾動適應小型裝置（768px）,大於該尺寸的看起來沒有差別