如何自訂Bootstrap美化過的table表格？

Bootstrap是最受歡迎的 HTML、CSS 和 JS 框架之一，它定義的css樣式代碼，爲我們平常使用的大多數HTML控件都做了統一的樣式外觀。
在應用了Bootstrap樣式後，我們能否再自訂自己的樣式？可以的，下面我們一起來看下怎麼自訂。

操作方法

（01）要應用bootstrap樣式，我們要先引入對應的樣式檔案，如圖。

（02）然後再看下我們的示例代碼，代碼很簡單，就是一個四行四列的table，並且爲表格添加一個‘table-bordered’的樣式，如圖

（03）執行後，我們可以看到一個有邊線的table表格，如圖

（04）bootstrap爲我們的表格添加的邊線是灰色的邊線，如果我們要把邊線的顏色自訂一下，改成紅色的邊線，該怎麼修改？我們可以自訂自己的樣式代碼，來覆蓋bootstrap定義的邊線顏色就行了。代碼如圖，

（05）重新載入頁面，可以看到現在的表格邊線已經是比較顯眼的紅色線條了，

（06）爲表格添加table-striped樣式，會讓表格有隔行效果。如圖<table class="table table-bordered table-striped">

（07）如果想要爲表格設定不一樣的隔行背景色，我們也可以自己寫樣式來覆蓋bootstrap的樣式。代碼如圖

（08）重新載入頁面看下效果，我們爲table自訂的隔行背景色是灰黑色。透過上面的例子可以看到，我們既可以使用bootstrap爲我們提供的美觀的控件樣式，又可以在這些樣式基礎上隨意修改，覆蓋bootstrap提供的默認樣式，自訂自己的樣式。