如何利用Bootstrap美化table表格？

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

操作方法

01
先看下我們的html代碼，就是一個簡單的table，四行四列。
02
運行頁面后，可以看到沒有加上任何樣式的table表格，是一個很丑陋的表格。
03
要利用Bootstrap美化table表格，首先我們要引入bootstrap樣式文件，如圖。
04
我們不用額外寫自己的樣式代碼，只要在原來的html里為table添加一個‘table’的樣式名就行了，如圖，這個樣式在bootstrap.css樣式文件里是有定義的，是插件為我們定義的樣式。所以我們自己不需要寫任何一行樣式代碼，就可以美化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">。
End