Bootstrap4（5）：表格設置 - 碼上快樂

相關內容簡體繁體

Bootstrap4（5）：表格設置

本文轉載自查看原文 2019-12-31 18:22 757 09 BootStrap

一、Bootstrap4 基礎表格：.table

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 類，您將在內的行上看到條紋，如下面的實例所示：

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

嘗試一下 »

六、黑色條紋表格

聯合使用 .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 class="table">
    <thead>
      <tr>
        <th>Firstname</th><th>Lastname</th><th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td><td>Defaultson</td><td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">

        <td>Primary</td><td>Joe</td><td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td><td>Doe</td><td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td><td>Moe</td><td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td><td>Dooley</td><td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td><td>Refs</td><td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td><td>Activeson</td><td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td><td>Secondson</td><td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td><td>Angie</td><td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td><td>Bo</td><td>bo@example.com</td>
      </tr>
    </tbody>
</table>

嘗試一下 »

下表列出了表格顏色類的說明:

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

九、表頭顏色

.thead-dark 類用於給表頭添加黑色背景， .thead-light 類用於給表頭添加灰色背景:

<table class="table">
    <thead class="thead-dark">
      <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>
    </tbody>
  </table>
  <table class="table">
    <thead class="thead-light">
      <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>
    </tbody>
</table>

嘗試一下 »

十、較小的表格

.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

嘗試一下 »

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Bootstrap4（7）：表格設置信息提示框 Bootstrap4布局（簡要） Bootstrap4（1）：安裝使用 Bootstrap4（3）：文字排版 Bootstrap4（12）：分頁 Bootstrap4（14）：卡片 Bootstrap4類樣式 bootstrap4之導航欄 Bootstrap Bootstrap3 與 Bootstrap4 的區別 Bootstrap4（18）：導航欄

粵ICP備18138465號 © 2018-2025 CODEPRJ.COM