Bootstrap設置table樣式的方法

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

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

Bootstrap的含義：

Bootstrap 是一個用于快速開發 Web 應用程序和網站的前端框架。Bootstrap 主要是基于 HTML、CSS、JavaScript語言的文檔。

它有如下的特性：

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

通過Bootstrap快速構建表格樣式：

（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代碼，創建一個表格

 <table>
            <thead>
                <tr>
                    <th>標題一</th>
                    <th>標題二</th>
                    <th>標題三</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來快速構建表格樣式

   <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
            <thead>
                <tr>
                    <th>標題一</th>
                    <th>標題二</th>
                    <th>標題三</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>標題一</th>
                    <th>標題二</th>
                    <th>標題三</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設置table樣式的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！