ホームページ > 記事 > ウェブフロントエンド > bootstrap4でテーブルを設定する方法

bootstrap4でテーブルを設定する方法

爱喝马黛茶的安东尼オリジナル: 2019-07-17 16:18:142609ブラウズ

#Bootstrap4 の基本テーブル

Bootstrap4 は、.table クラスを使用して基本テーブルのスタイルを設定します。

Example

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

ストライプ化テーブル

次の例に示すように、内の行にストライプが表示されます。

Example

<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

.table-dark クラスは黒の背景を追加できますテーブルへ:

Example

<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 クラスを一緒に使用して、ブラックストライプテーブルを作成します:

Example

<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 クラスを一緒に使用する黒の背景テーブルのマウスホバー効果を設定します。停止効果:

Instance

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

カラークラスを指定します。意味の

#Pass 指定された意味を持つカラークラスは、テーブルの行またはセルの色を設定できます:

.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 クラスを使用してパディングを削減し、パディングを削減します。より小さなテーブル:

Example

<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-応答クラスは応答テーブルの作成に使用されます: 画面の幅が 992 ピクセル未満の場合、水平スクロールバーが作成されます。視覚領域の幅が 992 ピクセルより大きい場合、さまざまな効果が表示されます (スクロールバーなし)。 ##例

<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でテーブルを設定する方法

以上がbootstrap4でテーブルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

bootstrap default 内边距 table tbody

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ブートストラップのページネーションの使用方法次の記事：ブートストラップのページネーションの使用方法

続きを見る