溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了bootstrap的表格類有哪些，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
bootstrap的表格類有：1、“.table”，基礎表格；2、“.table-striped”，斑馬線表格；3、“.table-bordered”，帶邊框的表格；4、“ .table-hover”，鼠標懸停高亮的表格等等。
本教程操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦
Bootstrap 提供了一個清晰的創建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
| 標簽 | 描述 |
|---|---|
| <table> | 為表格添加基礎樣式。 |
| <thead> | 表格標題行的容器元素（<tr>），用來標識表格列。 |
| <tbody> | 表格主體中的表格行的容器元素（<tr>）。 |
| <tr> | 一組出現在單行上的表格單元格的容器元素（<td> 或 <th>）。 |
| <td> | 默認的表格單元格。 |
| <th> | 特殊的表格單元格，用來標識列或行（取決于范圍和位置）。必須在 <thead> 內使用。 |
| <caption> | 關于表格存儲內容的描述或總結。 |
Bootstrap為表格不同的樣式風格提供了不同的類名，主要包括：
| 類 | 描述 |
|---|---|
| .table | 為任意 <table> 添加基本樣式 (只有橫向分隔線) |
| .table-striped | 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持) |
| .table-bordered | 為所有表格的單元格添加邊框 |
| .table-hover | 在 <tbody> 內的任一行啟用鼠標懸停狀態 |
| .table-condensed | 緊湊表格 |
| .table-responsive | 響應式表格 |
| .table-bordered | 帶邊框的表格 |
基本的表格
如果您想要一個只帶有內邊距（padding）和水平分割的基本表，請添加 class .table，如下面實例所示：
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <table class="table"> <caption>基本的表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table> </body> </html>
結果如下所示：
可選的表格類
除了基本的表格標記和 .table class，還有一些可以用來為標記定義樣式的類。下面將向您介紹這些類。
條紋表格
通過添加 .table-striped class，您將在 <tbody> 內的行上看到條紋，如下面的實例所示：
實例
<table class="table table-striped"> <caption>條紋表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> <th>郵編</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody></table>
結果如下所示：
邊框表格
通過添加 .table-bordered class，您將看到每個元素周圍都有邊框，且占整個表格是圓角的，如下面的實例所示：
實例
<table class="table table-bordered"> <caption>邊框表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> <th>郵編</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody></table>
結果如下所示：
懸停表格
通過添加 .table-hover class，當指針懸停在行上時會出現淺灰色背景，如下面的實例所示：
實例
<table class="table table-hover"> <caption>懸停表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> <th>郵編</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> </tr> </tbody></table>
結果如下所示：
精簡表格
通過添加 .table-condensed class，行內邊距（padding）被切為兩半，以便讓表看起來更緊湊，如下面的實例所示。這在想讓信息看起來更緊湊時非常有用。
實例
<table class="table table-condensed"> <caption>精簡表格布局</caption> <thead> <tr> <th>名稱</th> <th>城市</th> <th>郵編</th></tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td></tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td></tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td></tr> </tbody></table>
結果如下所示：
上下文類
下表中所列出的上下文類允許您改變表格行或單個單元格的背景顏色。
| 類 | 描述 |
|---|---|
| .active | 對某一特定的行或單元格應用懸停顏色 |
| .success | 表示一個成功的或積極的動作 |
| .warning | 表示一個需要注意的警告 |
| .danger | 表示一個危險的或潛在的負面動作 |
這些類可被應用到 <tr>、<td> 或 <th>。
實例
<table class="table"> <caption>上下文表格布局</caption> <thead> <tr> <th>產品</th> <th>付款日期</th> <th>狀態</th></tr> </thead> <tbody> <tr class="active"> <td>產品1</td> <td>23/11/2013</td> <td>待發貨</td></tr> <tr class="success"> <td>產品2</td> <td>10/11/2013</td> <td>發貨中</td></tr> <tr class="warning"> <td>產品3</td> <td>20/10/2013</td> <td>待確認</td></tr> <tr class="danger"> <td>產品4</td> <td>20/10/2013</td> <td>已退貨</td></tr> </tbody></table>
結果如下所示：
響應式表格
通過把任意的 .table 包在 .table-responsive class 內，您可以讓表格水平滾動以適應小型設備（小于 768px）。當在大于 768px 寬的大型設備上查看時，您將看不到任何的差別。
實例
<div class="table-responsive"> <table class="table"> <caption>響應式表格布局</caption> <thead> <tr> <th>產品</th> <th>付款日期</th> <th>狀態</th></tr> </thead> <tbody> <tr> <td>產品1</td> <td>23/11/2013</td> <td>待發貨</td></tr> <tr> <td>產品2</td> <td>10/11/2013</td> <td>發貨中</td></tr> <tr> <td>產品3</td> <td>20/10/2013</td> <td>待確認</td></tr> <tr> <td>產品4</td> <td>20/10/2013</td> <td>已退貨</td></tr> </tbody> </table></div>
結果如下所示：
上述內容就是bootstrap的表格類有哪些，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
