Bootstrap-tables
ブートストラップ-テーブル
ブートストラップは、テーブルを構築するためのきれいなレイアウトを提供します。 Bootstrapでサポートされているテーブル要素のいくつかは-
| Sr.No. | Tag & Description |
|---|---|
| 1 |
<table> データを表形式で表示するためのラッピング要素 |
| 2 |
<thead> テーブル列にラベルを付けるためのテーブルヘッダー行（<tr>）のコンテナー要素。 |
| 3 |
<tbody> テーブル本体のテーブル行（<tr>）のコンテナ要素。 |
| 4 |
<tr> 単一の行に表示される一連のテーブルセル（<td>または<th>）のコンテナー要素。 |
| 5 |
<td> デフォルトの表セル。 |
| 6 |
<th> 列（またはスコープと配置に応じて行）ラベルの特別なテーブルセル。 <thead>内で使用する必要があります |
| 7 |
<caption> テーブルが保持する内容の説明または要約。 |
基本テーブル
あなたはいくつかの光のパディングと水平分割線だけで素敵な、基本的なテーブルスタイルが必要な場合は、次の例に示すように、_。table_の基本クラスを任意のテーブルに追加します-
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>オプションのテーブルクラス
ベーステーブルマークアップと.tableクラスに加えて、マークアップのスタイル設定に使用できるいくつかの追加クラスがあります。 以下のセクションでは、これらすべてのクラスを垣間見ることができます。
縞模様のテーブル
_.table-striped_クラスを追加すると、次の例に示すように、<tbody>内の行にストライプが表示されます-
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>罫線入りテーブル
_.table-bordered_クラスを追加することにより、次の例に示すように、すべての要素を囲む境界線と、テーブル全体の角を丸くします-
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>ホバー表
_.table-hover_クラスを追加することにより、次の例に示すように、カーソルが行の上にホバリングしている間に行に明るい灰色の背景が追加されます-
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>凝縮テーブル
_.table-condensed_クラスを追加すると、行のパディングが半分になり、テーブルが圧縮されます。 次の例に見られるように。 これは、より詳細な情報が必要な場合に便利です。
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>コンテキストクラス
次の表に示すコンテキストクラスを使用すると、テーブルの行または個々のセルの背景色を変更できます。
| Sr.No. | Class & Description |
|---|---|
| 1 |
.active 特定の行またはセルにホバーカラーを適用します |
| 2 |
.success 成功または肯定的なアクションを示します |
| 3 |
.warning 注意が必要な警告を示します |
| 4 |
.danger 危険または潜在的に否定的な行動を示します |
これらのクラスは、<tr>、<td>、または<th>に適用できます。
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>レスポンシブテーブル
.table-responsive_クラスの.table_をラップすることにより、テーブルを小さなデバイス（768px未満）まで水平方向にスクロールさせます。 幅が768pxより大きいものを表示する場合、これらのテーブルに違いは見られません。
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>