如何利用Bootstrap美化table表格?

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

操作方法

(01)先看下我們的html代碼,就是一個簡單的table,四行四列。

如何利用Bootstrap美化table表格?

(02)運行頁面後,可以看到沒有加上任何樣式的table表格,是一個很醜陋的表格。

如何利用Bootstrap美化table表格? 第2張

(03)要利用Bootstrap美化table表格,首先我們要引入bootstrap樣式文件,如圖。

如何利用Bootstrap美化table表格? 第3張

(04)我們不用額外寫自己的樣式代碼,只要在原來的html裏爲table添加一個‘table’的樣式名就行了,如圖,這個樣式在樣式文件裏是有定義的,是插件爲我們定義的樣式。所以我們自己不需要寫任何一行樣式代碼,就可以美化table表格。

如何利用Bootstrap美化table表格? 第4張

(05)添加後,刷新頁面看下效果。從圖中可以看到,現在的table表格看起來整潔很多了。

如何利用Bootstrap美化table表格? 第5張

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

如何利用Bootstrap美化table表格? 第6張

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

如何利用Bootstrap美化table表格? 第7張

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

如何利用Bootstrap美化table表格? 第8張