コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > bootstrap4でテーブルを設定する方法

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

爱喝马黛茶的安东尼
リリース： 2019-07-17 16:18:14
オリジナル
2637 人が閲覧しました

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

#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>
ログイン後にコピー

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

ストライプ化テーブル

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

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>
ログイン後にコピー

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

境界線付きテーブル

.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>
ログイン後にコピー

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

マウス ホバー ステータス テーブル

.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>
ログイン後にコピー

bootstrap4でテーブルを設定する方法##黒背景 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>
ログイン後にコピー

bootstrap4でテーブルを設定する方法関連する推奨事項: 「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>
ログイン後にコピー

bootstrap4でテーブルを設定する方法マウス ホバー効果 - 黒の背景テーブル

.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>
ログイン後にコピー

bootstrap4でテーブルを設定する方法カラー クラスを指定します。意味の

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

.table-primary蓝色: 指定这是一个重要的操作
.table-success绿色: 指定这是一个允许执行的操作
.table-danger红色: 指定这是可以危险的操作
.table-info浅蓝色: 表示内容已变更
.table-warning橘色: 表示需要注意的操作
.table-active灰色: 用于鼠标悬停效果
.table-secondary灰色: 表示内容不怎么重要
.table-light浅灰色，可以是表格行的背景
.table-dark深灰色，可以是表格行的背景
ログイン後にコピー

##ヘッダーの色bootstrap4でテーブルを設定する方法

Bootstrap v4.0.0-beta.2 では、.thead-dark クラスを使用してテーブル ヘッダーに黒い背景を追加し、.thead -light クラスは、テーブル ヘッダーに灰色の背景を追加するために使用されます。

Bootstrap v4 .0.0-beta では、このバージョンでは、.thead-inverse クラスを使用してテーブル ヘッダーに黒色の背景を追加します。 .thead-default クラスは、テーブル ヘッダーに灰色の背景を追加するために使用されます。

#小さなテーブルbootstrap4でテーブルを設定する方法.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>
ログイン後にコピー

##レスポンシブ テーブル

bootstrap4でテーブルを設定する方法 .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 サイトの他の関連記事を参照してください。

関連ラベル：
bootstrap4 设置表格
ソース：php.cn
前の記事：ブートストラップのページネーションの使用方法 次の記事：bootstrap4で画像の形状を設定する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2292
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2430
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2042
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1928
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2000
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート