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>

黑色條紋表格

聯合使用 .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設置表格的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!