Bootstrap設(shè)置table樣式的方法

小編給大家分享一下Bootstrap設(shè)置table樣式的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)是專業(yè)的寶應(yīng)網(wǎng)站建設(shè)公司，寶應(yīng)接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行寶應(yīng)網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

可以通過(guò)外部引入Bootstrap文件來(lái)設(shè)置table樣式，引入之后在html代碼中添加Bootstrap文件中有關(guān)表格樣式的類名來(lái)添加具體樣式

Bootstrap的含義：

Bootstrap 是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 主要是基于 HTML、CSS、JavaScript語(yǔ)言的文檔。

它有如下的特性：

在CSS中它具有全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class等等特性。同時(shí)它也包含了十幾個(gè)可重用的組件，用于創(chuàng)建圖像，下拉菜單，導(dǎo)航、警告框以及彈出框等。bootstrap中所包含的JavaScript插件中含有十幾個(gè)自定義的jQuery插件，在代碼中我們可以直接使用

通過(guò)Bootstrap快速構(gòu)建表格樣式：

（1）外部引入Bootstrap文件

（2）通過(guò)HTML代碼，創(chuàng)建一個(gè)表格

標(biāo)題一	標(biāo)題二	標(biāo)題三
示例一	示例一	示例一
示例二	示例二	示例二
示例三	示例三	示例三

效果圖：

Bootstrap設(shè)置table樣式的方法

（3）接下來(lái)通過(guò)外部引入Bootstrap來(lái)快速構(gòu)建表格樣式

.table

為任意添加基本樣式 (只有橫向分隔線) 內(nèi)添加斑馬線形式的條紋 ( IE8 不支持) 內(nèi)的任一行啟用鼠標(biāo)懸停狀態(tài)

.table-striped	在
.table-bordered	為所有表格的單元格添加邊框
.table-hover	在
.table-condensed	讓表格更加緊湊

效果圖：

Bootstrap設(shè)置table樣式的方法

除此之外，我們還可以給表格添加背景顏色。具體代碼如下

.active	對(duì)某一特定的行或單元格應(yīng)用懸停顏色
.success	表示一個(gè)成功的或積極的動(dòng)作
.warning	表示一個(gè)需要注意的警告
.danger	表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作