Bootstrap如何設定table樣式-js教程-PHP中文網

可以透過外部引入Bootstrap檔案來設定table樣式，引入之後在html程式碼中新增Bootstrap檔案中有關表格樣式的類別名稱來新增具體樣式

今天將和大家介紹如何透過Bootstrap來快速建立表格樣式，具有一定的參考價值，希望對大家有所幫助。

Bootstrap如何設定table樣式

【推薦課程：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>

登入後複製

效果圖：

Image 10.jpg

（3）接下來透過外部引入Bootstrap來快速建立表格樣式

#.table

為任意新增基本樣式(只有橫向分隔線) 內加上斑馬線形式的條紋( IE8 不支援)

.table-striped	在
.table-bordered	為所有表格的儲存格加上邊框
.table-hover	在< tbody> 內的任一行啟用滑鼠懸停狀態
.table-condensed	讓表格更緊湊

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

登入後複製

效果圖：

Bootstrap如何設定table樣式

除此之外，我們也可以為表格新增背景顏色。具體程式碼如下

.active	# 對某一特定的行或儲存格套用懸停顏色
#.success	表示一個成功的或積極的動作
#.warning	表示一個需要注意的警告
#.danger	表示一個危險的或潛在的負面動作

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