如何利用Bootstrap美化table表格？

Bootstrap是最受歡迎的 HTML、CSS 和 JS 框架之一，它定義的css樣式程式碼，為我們平常使用的絕大多數HTML控制元件都做了統一的樣式外觀。下面我們看下怎麼利用Bootstrap來美化table表格。

操作方法

（01）先看下我們的html程式碼，就是一個簡單的table，四行四列。

（02）執行頁面後，可以看到沒有加上任何樣式的table表格，是一個很醜陋的表格。

（03）要利用Bootstrap美化table表格，首先我們要引入bootstrap樣式檔案，如圖。

（04）我們不用額外寫自己的樣式程式碼，只要在原來的html裡為table新增一個‘table’的樣式名就行了，如圖，這個樣式在樣式檔案裡是有定義的，是外掛為我們定義的樣式。所以我們自己不需要寫任何一行樣式程式碼，就可以美化table表格。

（05）新增後，重新整理頁面看下效果。從圖中可以看到，現在的table表格看起來整潔很多了。

（06）我們還可以加上另外一個樣式名，讓表格的單元格顯示分隔線。把程式碼裡的 <table class="table">改成 <table class="table table-bordered">，效果如圖

（07）再加上table-striped的樣式，可以讓table有隔行的效果。如圖<table class="table table-bordered table-striped">

（08）如果需要效果：在滑鼠放到每一行時，該行顯示不一樣的背景色，那麼我們可以加上樣式名：table-hover。<table class="table table-bordered table-hover">。