今天將和大家介紹有關如何通過Bootstrap來快速構建表格樣式，具有一定的參考價值，希望對大家有所幫助。
【推薦課程：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 | 為任意 <table> 添加基本樣式 (只有橫向分隔線) |
| .table-striped | 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持) |
| .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>
效果圖：
除此之外，我們還可以給表格添加背景顏色。具體代碼如下
| .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>
效果圖：
總結：
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:0731-84117792 E-MAIL:11247931@qq.com
Copyright ? 2019-2023 湖南福仁科技有限公司 版權所有
湘ICP備19013665號-5
視頻許可證編號：（湘）字第00637號
湘公網安備 43010402000898號
違法及侵權請聯系：TEL:0731-84117792 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
