bootstrap4中怎么設置表格

本篇文章為大家展示了bootstrap4中怎么設置表格，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

Bootstrap4 基礎表格

Bootstrap4 通過 .table 類來設置基礎表格的樣式，實例如下:

實例

<table class="table">    <thead>      <tr>        <th>Firstname</th>        <th>Lastname</th>        <th>Email</th>      </tr>    </thead>    <tbody>      <tr>        <td>John</td>        <td>Doe</td>        <td>john@example.com</td>      </tr>      <tr>        <td>Mary</td>        <td>Moe</td>        <td>mary@example.com</td>      </tr>      <tr>        <td>July</td>        <td>Dooley</td>        <td>july@example.com</td>      </tr>    </tbody></table>

條紋表格

通過添加 .table-striped 類，您將在 <tbody> 內的行上看到條紋，如下面的實例所示：

實例

<table class="table table-striped">    <thead>      <tr>        <th>Firstname</th>        <th>Lastname</th>        <th>Email</th>      </tr>    </thead>    <tbody>      <tr>        <td>John</td>        <td>Doe</td>        <td>john@example.com</td>      </tr>      <tr>        <td>Mary</td>        <td>Moe</td>        <td>mary@example.com</td>      </tr>      <tr>        <td>July</td>        <td>Dooley</td>        <td>july@example.com</td>      </tr>    </tbody></table>

帶邊框表格

.table-bordered 類可以為表格添加邊框

實例

<table class="table table-bordered">    <thead>      <tr>        <th>Firstname</th>        <th>Lastname</th>        <th>Email</th>      </tr>    </thead>    <tbody>      <tr>        <td>John</td>        <td>Doe</td>        <td>john@example.com</td>      </tr>      <tr>        <td>Mary</td>        <td>Moe</td>        <td>mary@example.com</td>      </tr>      <tr>        <td>July</td>        <td>Dooley</td>        <td>july@example.com</td>      </tr>    </tbody></table>

鼠標懸停狀態表格

.table-hover 類可以為表格的每一行添加鼠標懸停效果（灰色背景）：

實例

<table class="table table-hover">    <thead>      <tr>        <th>Firstname</th>        <th>Lastname</th>        <th>Email</th>      </tr>    </thead>    <tbody>      <tr>        <td>John</td>        <td>Doe</td>        <td>john@example.com</td>      </tr>      <tr>        <td>Mary</td>        <td>Moe</td>        <td>mary@example.com</td>      </tr>      <tr>        <td>July</td>        <td>Dooley</td>        <td>july@example.com</td>      </tr>    </tbody></table>

黑色背景表格

.table-dark 類可以為表格添加黑色背景：

實例

<table class="table table-dark">    <thead>      <tr>        <th>Firstname</th>        <th>Lastname</th>        <th>Email</th>      </tr>    </thead>    <tbody>      <tr>        <td>John</td>        <td>Doe</td>        <td>john@example.com</td>      </tr>      <tr>        <td>Mary</td>        <td>Moe</td>        <td>mary@example.com</td>      </tr>      <tr>        <td>July</td>        <td>Dooley</td>        <td>july@example.com</td>      </tr>    </tbody></table>

相關推薦：《bootstrap入門教程》

黑色條紋表格

聯合使用 .table-dark 和 .table-striped 類可以創建黑色的條紋表格：

實例

<table class="table table-dark table-striped">    <thead>      <tr>        <th>Firstname</th>        <th>Lastname</th>        <th>Email</th>      </tr>    </thead>    <tbody>      <tr>        <td>John</td>        <td>Doe</td>        <td>john@example.com</td>      </tr>      <tr>        <td>Mary</td>        <td>Moe</td>        <td>mary@example.com</td>      </tr>      <tr>        <td>July</td>        <td>Dooley</td>        <td>july@example.com</td>      </tr>    </tbody></table>

鼠標懸停效果 - 黑色背景表格

聯合使用 .table-dark 和 .table-hover 類可以設置黑色背景表格的鼠標懸停效果：

實例

<table class="table table-dark table-hover">    <thead>      <tr>        <th>Firstname</th>        <th>Lastname</th>        <th>Email</th>      </tr>    </thead>    <tbody>      <tr>        <td>John</td>        <td>Doe</td>        <td>john@example.com</td>      </tr>      <tr>        <td>Mary</td>        <td>Moe</td>        <td>mary@example.com</td>      </tr>      <tr>        <td>July</td>        <td>Dooley</td>        <td>july@example.com</td>      </tr>    </tbody></table>

指定意義的顏色類

通過指定意義的顏色類可以為表格的行或者單元格設置顏色：

.table-primary藍色: 指定這是一個重要的操作.table-success綠色: 指定這是一個允許執行的操作.table-danger紅色: 指定這是可以危險的操作.table-info淺藍色: 表示內容已變更.table-warning橘色: 表示需要注意的操作.table-active灰色: 用于鼠標懸停效果.table-secondary灰色: 表示內容不怎么重要.table-light淺灰色，可以是表格行的背景.table-dark深灰色，可以是表格行的背景

表頭顏色

在 Bootstrap v4.0.0-beta.2 中.thead-dark 類用于給表頭添加黑色背景， .thead-light 類用于給表頭添加灰色背景:

在 Bootstrap v4.0.0-beta 這個版本中，.thead-inverse 類用于給表頭添加黑色背景，.thead-default 類用于給表頭添加灰色背景。

較小的表格

.table-sm 類用于通過減少內邊距來設置較小的表格:

實例

<table class="table table-bordered table-sm">    <thead>      <tr>        <th>Firstname</th>        <th>Lastname</th>        <th>Email</th>      </tr>    </thead>    <tbody>      <tr>        <td>John</td>        <td>Doe</td>        <td>john@example.com</td>      </tr>      <tr>        <td>Mary</td>        <td>Moe</td>        <td>mary@example.com</td>      </tr>      <tr>        <td>July</td>        <td>Dooley</td>        <td>july@example.com</td>      </tr>    </tbody></table>

響應式表格

.table-responsive 類用于創建響應式表格：在屏幕寬度小于 992px 時會創建水平滾動條，如果可視區域寬度大于 992px 則顯示不同效果（沒有滾動條）:

實例

<div class="table-responsive"><table class="table">    <thead>      <tr>        <th>#</th>        <th>Firstname</th>        <th>Lastname</th>        <th>Age</th>        <th>City</th>        <th>Country</th>        <th>Sex</th>        <th>Example</th>        <th>Example</th>        <th>Example</th>        <th>Example</th>      </tr>    </thead>    <tbody>      <tr>        <td>1</td>        <td>Anna</td>        <td>Pitt</td>        <td>35</td>        <td>New York</td>        <td>USA</td>        <td>Female</td>        <td>Yes</td>        <td>Yes</td>        <td>Yes</td>        <td>Yes</td>      </tr>    </tbody></table></div>

你可以通過以下類設定在指定屏幕寬度下顯示滾動條：

.table-responsive-sm< 576px.table-responsive-md< 768px.table-responsive-lg< 992px.table-responsive-xl< 1200px

實例

<div class="table-responsive-sm">  <table class="table">    ...  </table></div>

上述內容就是bootstrap4中怎么設置表格，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。