如何利用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">。