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

Bootstrap是最受歡迎的 HTML、CSS 和 JS 框架之一，它定義的css樣式代碼，為我們平常使用的大多數HTML控件都做了統一的樣式外觀。<br/>在應用了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提供的默認樣式，自定義自己的樣式。
End