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)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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

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

Bootstrap的含義：

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

它有如下的特性：

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

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

（1）外部引入Bootstrap文件

<link type="text/css" rel="stylesheet" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
 <script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.css"></script>

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

 <table>
            <thead>
                <tr>
                    <th>標(biāo)題一</th>
                    <th>標(biāo)題二</th>
                    <th>標(biāo)題三</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr>
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr>
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

效果圖：

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

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

.table為任意 <table> 添加基本樣式 (只有橫向分隔線)
.table-striped在 <tbody> 內(nèi)添加斑馬線形式的條紋 ( IE8 不支持)
.table-bordered為所有表格的單元格添加邊框
.table-hover在 <tbody> 內(nèi)的任一行啟用鼠標(biāo)懸停狀態(tài)
.table-condensed讓表格更加緊湊
   <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
            <thead>
                <tr>
                    <th>標(biāo)題一</th>
                    <th>標(biāo)題二</th>
                    <th>標(biāo)題三</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr>
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr>
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

效果圖：

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

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

.active對(duì)某一特定的行或單元格應(yīng)用懸停顏色
.success表示一個(gè)成功的或積極的動(dòng)作
.warning表示一個(gè)需要注意的警告
.danger表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作
  <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
            <thead>
                <tr class="active">
                    <th>標(biāo)題一</th>
                    <th>標(biāo)題二</th>
                    <th>標(biāo)題三</th>
                </tr>
            </thead>
            <tbody>
                <tr class="success">
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr class="warning">
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr class="danger">
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

效果圖：

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

看完了這篇文章，相信你對(duì)Bootstrap設(shè)置table樣式的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前文章：Bootstrap設(shè)置table樣式的方法
瀏覽地址：http://bm7419.com/article14/pciede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、微信小程序、網(wǎng)站排名、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名