Bootstrap3.0 学習ノートテーブル関連

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

1. 基本的なケース

2. ストライプのテーブル

3. 境界線のある表

4. マウスオーバー

5. テーブルを締める

6. ステータスクラス

7. レスポンシブテーブル

8. まとめ

基本的なケース

任意の <table> タグに .table を追加すると、少量のパディングと水平の区切り線などの基本的なスタイルが適用されます。このアプローチは冗長に思えます。 ?ただし、テーブル要素は広く使用されているため、デフォルトのスタイルを指定すると、カレンダーや日付選択などのプラグインに影響する可能性があるため、スタイルを分離することにしました。

簡単なテーブルの例

コードをコピー

コードは次のとおりです。

<div class="コンテナ">
<テーブルクラス="テーブル">
<caption>テーブルの基本ケース</caption>
<頭>
<tr>
<th>名</th>
<th>姓</th>
<th>ユーザー名</th>
</tr>
</thead>
<t本文>
<tr>
<td>愛豹</td>
<td>レオ</td>
<td>@aehyok</td>
</tr>
<tr>
<td>リン</td>
<td>thl</td>
リン
</tr>
</tbody>
</テーブル>
</div>

ストライプテーブル

.table-striped を使用すると、<tbody> 内のすべてのものにゼブラストライプスタイルを追加できます。

上記の例のテーブル要素に別のスタイルクラスを追加します。

コードをコピー

コードは次のとおりです。

<テーブルクラス="テーブルテーブルストライプ">

現在の結果を見ると、まだいくつか変化があります。

境界線のある表

.table-bordered を使用して、テーブルとその中の各セルに境界線を追加します。

または、最初の例のテーブル要素に別のスタイルクラスを追加します。

コードをコピー

コードは次のとおりです。

マウスオーバー

.table-hover を使用して、<tbody> 内の各行がマウスのホバー状態に応答するようにします。

コードをコピー

コードは次のとおりです。

その行にマウスを移動すると有効になります。

コンパクトテーブル

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

コードをコピー

コードは次のとおりです。

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

ステータスクラス

これらの状態クラスを使用して、ライセンスされたセルの色を設定できます。

コードをコピー

コードは次のとおりです。

<table class="table テーブル凝縮">
<caption>表</caption>
<頭>
<tr>
<th>#</th>
<th>名</th>
<th>姓</th>
<th>ユーザー名</th>
</tr>
</thead>
<t本文>
<tr class="active">
<td>1</td>
<td>愛豹</td>
<td>レオ</td>
<td>@aehyok</td>
</tr>
<tr class="成功">
<td>2</td>
<td>リン</td>
<td>thl</td>
リン
</tr>
<tr class="警告">
<td>3</td>
<td>アムディ</td>
<td>エイミー</td>
@アムディ
</tr>
<tr class="危険">
<td>4</td>
<td>アムディ</td>
<td>エイミー</td>
@アムディ
</tr>
<tr>
<td class="success">5</td>
<td class="danger">アムディ</td>
<td class="warning">エイミー</td>
@アムディ
</tr>
</tbody>
</テーブル>

レスポンシブテーブル

任意の .table を .table-responsive でラップすると、小型デバイス (768 ピクセル未満) で水平にスクロールするレスポンシブテーブルを作成できます。画面の幅が 768px より大きい場合、水平スクロールバーは消えます。

コードをコピー

コードは次のとおりです。

<div class="table-responsive">
<テーブルクラス="テーブル">
<caption>表</caption>
<頭>
<tr>
<th>#</th>
<th>名</th>
<th>姓</th>
<th>ユーザー名</th>
</tr>
</thead>
<t本文>
<tr class="active">
<td>1</td>
<td>愛豹</td>
<td>レオ</td>
<td>@aehyok</td>
</tr>
<tr class="成功">
<td>2</td>
<td>リン</td>
<td>thl</td>
リン
</tr>
<tr class="警告">
<td>3</td>
<td>アムディ</td>
<td>エイミー</td>
@アムディ
</tr>
<tr class="危険">
<td>4</td>
<td>アムディ</td>
<td>エイミー</td>
@アムディ
</tr>
<tr>
<td class="success">5</td>
<td class="danger">アムディ</td>
<td class="warning">エイミー</td>
@アムディ
</tr>
</tbody>
</テーブル>
</div>