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

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

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

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>

效果圖：

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

   <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>

效果圖：

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

  <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>

效果圖：

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