Bootstrap 表格
Bootstrapは、テーブルを作成するための明確なレイアウトを提供します。以下の表は、Bootstrapがサポートするいくつかのテーブル要素を示しています。
| 标签 | 描述 |
|---|
| <table> | テーブルに基本スタイルを追加します。 |
| <thead> | テーブルの見出し行のコンテナ要素（<tr>）。テーブルの列を識別するために使用します。 |
| <tbody> | テーブルの本体にあるテーブル行のコンテナ要素（<tr>）。 |
| <tr> | 単一行に表示されるテーブルセルのグループのコンテナ要素（<td> または <th>）。 |
| <td> | デフォルトのテーブルセル。 |
| <th> | 列または行を識別するための特別なテーブルセル（範囲と位置によって異なります）。<thead> 内で使用する必要があります。 |
| <caption> | テーブルに格納されている内容に関する説明または要約。 |
表格类
以下のスタイルはテーブルで使用できます：
| 类 |
描述 |
实例 |
| .table |
任意の <table> に基本スタイルを追加します（横方向の区切り線のみ）。 |
尝试一下 |
| .table-striped |
<tbody> 内にゼブラ模様のストライプを追加します（IE8はサポートされていません）。 |
尝试一下 |
| .table-bordered |
すべてのテーブルのセルに枠線を追加します |
尝试一下 |
| .table-hover |
<tbody> 内の任意の行でマウスホバー状態を有効にします。 |
尝试一下 |
| .table-condensed |
テーブルをよりコンパクトにする |
尝试一下 |
| すべてのテーブルクラスを組み合わせて使用する |
尝试一下 |
<tr>, <th> と <td> 類
以下の表のクラスは、テーブルの行またはセルに使用できます。
| 类 |
描述 |
实例 |
| .active |
行またはセルにホバー色を適用します。 |
尝试一下 |
| .success |
成功した操作を示す |
尝试一下 |
| .info |
情報の変化を示す操作 |
尝试一下 |
| .warning |
警告を示す操作 |
尝试一下 |
| .danger |
危険な操作を示す |
尝试一下 |
パディングと水平方向の区切り線のみを持つ基本的なテーブルが必要な場合は、クラスを追加してください。.table、以下の例のように：
实例
<table class="table">
<caption>基本的なテーブルレイアウト</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
尝试一下 »
結果は以下の通りです：
基本的なテーブルマークアップと .table クラスに加えて、マークアップにスタイルを定義するために使用できるクラスがいくつかあります。以下でこれらのクラスを紹介します。
条纹表格
通过添加.table-stripedclassを使用すると、<tbody>内の行にストライプが表示されます。以下の例のようになります：
实例
<table class="table table-striped">
<caption>条纹表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</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-borderedclassを使用すると、各要素の周囲に枠線が表示され、テーブル全体が角丸になります。以下の例のようになります：
实例
<table class="table table-bordered">
<caption>边框表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</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-hoverclassを使用すると、ポインターを行の上に置いたときに薄い灰色の背景が表示されます。以下の例のようになります：
实例
<table class="table table-hover">
<caption>悬停表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</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 classを使用すると、行のパディングが半分に切り詰められ、テーブルがよりコンパクトに見えます。以下の例のようになります。これは、情報をよりコンパクトに見せたい場合に非常に役立ちます。
实例
<table class="table table-condensed">
<caption>精简表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</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>
尝试一下 »
結果は以下の通りです：
以下の表にリストされているコンテキストクラスを使用すると、テーブルの行または個々のセルの背景色を変更できます。
| 类 | 描述 |
|---|
| .active | 特定の行またはセルにホバー色を適用します。 |
| .success | 成功または積極的なアクションを表します |
| .warning | 注意が必要な警告を表します |
| .danger | 危険な、または潜在的にマイナスのアクションを示します。 |
これらのクラスは <tr>、<td>、または <th> に適用できます。
实例
<table class="table">
<caption>上下文表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th></tr>
</thead>
<tbody>
<tr class="active">
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td></tr>
<tr class="success">
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td></tr>
<tr class="warning">
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td></tr>
<tr class="danger">
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td></tr>
</tbody>
</table>
尝试一下 »
結果は以下の通りです：
任意の... を適用することで.table包んで.table-responsiveクラス内では、テーブルを水平スクロールさせて小型デバイス（768px未満）に対応できます。768pxを超える幅の大型デバイスで表示した場合、違いは見られません。
实例
<div class="table-responsive">
<table class="table">
<caption>响应式表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th></tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td></tr>
<tr>
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td></tr>
<tr>
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td></tr>
<tr>
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td></tr>
</tbody>
</table>
</div>
尝试一下 »
結果は以下の通りです：
其他扩展
