ブートストラップはテーブルを毎日学習する必要があります

この記事では主にテーブルについて説明します。これはWebサイトを運営している人にとっては馴染みのないものであり、ユーザーや上司のニーズによって最もよく使用される表示であるとも言えます。。頭痛。 Bootstrap が用意したテーブルの種類を見てみましょう。以下に示すように:

1.基本的なケース
2. ストライプテーブル
3. 枠線付きの表
4. マウスオーバー
5. 圧縮表
6. ステータスクラス
7. レスポンシブフォーム
8. まとめ

基本的なケース
.table を

タグに追加すると、少量のパディングと水平方向の区切りという基本的なスタイルが与えられます。このアプローチは非常に冗長に見えます。 ?ただし、table 要素は広く使用されていると感じており、デフォルトのスタイルを与えるとカレンダーや日付の選択などのプラグインに影響を与える可能性があるため、スタイルを分離することにしました。

簡単なテーブルの例

 <div class="container">
 <table class="table"> 
  <caption>Table基本案例</caption> 
  <thead> 
  <tr> 
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr> 
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr> 
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  </tbody> 
 </table> 
 </div>

ログイン後にコピー

ストライプテーブル

.table-striped を使用して、

内のすべてにゼブラストライプスタイルを追加します。
上の例の table 要素に別のスタイルクラス
を追加します。 <テーブルクラス="テーブルテーブルストライプ">
現在の効果を見ると、まだ変更点がいくつかあります。

枠線付きの表
.table-border を使用して、表とその中の各セルに枠線を追加します。
または、最初の例の table 要素に別のスタイルクラス
を追加します。 <テーブルクラス="テーブルテーブルボーダー">

マウスオーバー
.table-hover を使用して、

の各行をマウスホバー状態に応答させます。

マウスをその行に移動すると、効果が現れます

コンパクトテーブル
.table-condensed を使用してテーブルをよりコンパクトにすると、セル内のパディングが半分に減ります。

この効果はそれほど明白ではありません。主な理由は、セル内のコンテンツのパディングが半分に減少するためです。

ステータスクラス
これらのステータスクラスを通じて、ライセンスされたセルの色を設定できます。

<table class="table table-condensed"> 
  <caption>Table</caption> 
  <thead> 
  <tr> 
   <th>#</th>
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr class="active"> 
   <td>1</td>
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr class="success"> 
   <td>2</td>
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table>

ログイン後にコピー

レスポンシブフォーム
任意の .table を .table-sensitive でラップすると、小さな画面デバイス (768 ピクセル未満) で水平にスクロールするレスポンシブテーブルが作成されます。画面の幅が 768 ピクセルを超えると、水平スクロールバーが表示されなくなります。

<div class="table-responsive">
 <table class="table"> 
  <caption>Table</caption> 
  <thead> 
  <tr> 
   <th>#</th>
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr class="active"> 
   <td>1</td>
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr class="success"> 
   <td>2</td>
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table>
 </div>

ログイン後にコピー

表示されるスクロールバーを見てください。