如何自定義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提供的預設樣式，自定義自己的樣式。