Bootstrap—輕鬆製作漂亮表格（table）
阿新 • • 發佈：2018-12-29
學習了runoob.com網站中的bootstrap內容之後，參照其中的內容自己做一下總結，以便幫助在這方面有疑惑的朋友，也有助於自己更好的消化所學的內容。
我們應該慶幸自己活在這樣一個網際網路時代，開放、共享。很多之前我們費盡心思去實現的效果已經有前輩為我們總結出來並做成很好的框架，共享出來讓我們使用，使得我們輕鬆就能實現很漂亮的效果。
下面就使用一個例項來講一下如何使用Bootstrap現成的css樣式直接加在我們的table表格上，我們只需要寫很少的程式碼就能輕鬆製作漂亮表格。
比如我們要製作一個像下面這個表格：
有了Bootstrap，只需寫好html內容結構，加上Bootstrap寫好的專用於表格的類樣式即可實現圖中的效果。
程式碼如下：
在這裡為了方便美觀我給他加了一個寬度500px;我們這裡使用一個<div class="container"> 來作為基礎面板包裹我們的table。container也屬於bootstrap類樣式，在webstorm中我們按住ctrl+點選左鍵進入container（任何指令碼樣式你都這樣檢視它裡邊的實現，前提是要先引入），可以看到bootstrap的屬性如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BootStrap製作表格</title> <link type="text/css" rel="stylesheet" href="../libs/bootstrap.css"> </head> <body> <div class="container"> <table style="width: 500px;" class="table table-striped table-hover table-bordered"> <thead> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> </tr> </thead> <tbody> <tr> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td></tr> <tr> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td></tr> <tr> <td>第3行第1列</td> <td>第3行第2列</td> <td>第3行第3列</td></tr> </tbody> </table> </div> </body> </html>
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }containner可以適應瀏覽器為我們設定外邊距，設定固定左右內邊距15px。
接下來說一下步驟：
第一步：引入bootstrap指令碼檔案：
<link type="text/css" rel="stylesheet" href="../libs/bootstrap.css">第二步：寫html內容結構程式碼。
只設置了寬度，沒有加入其他任何樣式的裸妝他是這樣子的：
第三步：為table加入bootstrap樣式：
<table style="width: 500px;" class="table table-striped table-hover table-bordered">接下來講解一下這些樣式的效果，runoob.com列出了比較簡明的解析：
在行列中，也可以使用.active .success .danger這些用於行列的樣式。比如我加入行列樣式：
效果是這樣的：
大家可以根據自己的需要來加入樣式。