ブートストラップフォーム
ブートストラップは、テーブルを作成した明確なレイアウトを提供します。 次の表は、いくつかのテーブル要素をブートストラップのサポートを示しています。
| ラベル | 説明 |
|---|
| <表> | スタイルの基礎を形成するために追加。 |
| <THEAD> | 表のコンテナ要素のヘッダ行（<TR>）、表の列を識別するために使用されます。 |
| <TBODY> | テーブル行の本体内のテーブルのコンテナ要素（<TR>）。 |
| <TR> | グループは、テーブルセル（<TD>または<目>）のコンテナ要素内の単一の行に表示されます。 |
| <TD> | デフォルトのテーブルセル。 |
| <Thの> | （エクステントと場所に応じて）列または行を識別するために使用される特殊な表のセル、。 あなたが<THEAD>内部を使用する必要があります。 |
| <キャプション> | テーブルストアのコンテンツ記述または要約について。 |
Formクラス
次の表スタイルテーブルを使用することができます。
| カテゴリ | 説明 | 例 |
|---|
| .table | 任意の<表>追加基本スタイル（のみ水平セパレーター） | 試します |
| .table-ストライプ | <TBODY>フォーム内ゼブラストライプを追加するには（IE8をサポートしていません） | 試します |
| .table-境 | すべてのテーブルセルの境界線を追加します。 | 試します |
| .table-ホバー | <TBODY>任意の行の中にホバー状態を有効にするには | 試します |
| .table凝縮 | よりコンパクトなフォームを作ります | 試します |
| すべてのフォームクラスの共同利用 | 試します |
<TR>、<目>と<TD>クラス
クラスは、次の表では、行またはセルを形成することができます。
| カテゴリ | 説明 | 例 |
|---|
| .active | 行またはセル上のホバーカラーアプリケーション | 試します |
| .success | それは成功した操作を示しています | 試します |
| .info | 変化する動作を示す情報 | 試します |
| .warning | これは、警告動作を表します | 試します |
| .danger | それは危険な操作を表し、 | 試します |
あなただけのパディング（詰め物）と基本的な表レベルの分割、次の例に示すように、クラス.table追加で必要な場合：
例
<表 クラス = "テーブル">
<キャプション> 基本的なテーブルのレイアウト </キャプション>
<THEAD>
<TR>
<Thの> 名前 </目>
<Thの> 市 </目>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> Tanmay </ TD>
<TD>バンガロール</ TD>
</ TR>
<TR>
<TD>サチン</ TD>
<TD>ムンバイ</ TD>
</ TR>
</ TBODY>
</表>
結果は以下の通りであります：
基本的なテーブルマークアップと.tableクラスに加えて、いくつかは、スタイルクラスを定義するためのマーカーとして使用することができます。 以下は、これらのクラスを紹介します。
ストライプテーブル
.table-ストライプクラスを追加することで、あなたは、行の縞が表示されます。<TBODY>内で、次の例のように：
例
<表 クラス= "表table-ストライプ" >
<キャプション> ストライプテーブルのレイアウト </キャプション>
<THEAD>
<TR>
<Thの> 名前 </目>
<Thの> 市 </目>
<Thの> パスワード </目>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> Tanmay </ TD>
<TD>バンガロール</ TD>
<TD> 560001 </ TD>
</ TR>
<TR>
<TD>サチン</ TD>
<TD>ムンバイ</ TD>
<TD> 400003 </ TD>
</ TR>
<TR>
<TD>ウマ</ TD>
<TD>プネ</ TD>
<TD> 411027 </ TD>
</ TR>
</ TBODY>
</表>
結果は以下の通りであります：
表の罫線
.table-境クラスを追加することで、各要素は周囲に境界線があり、次の例に示すように合計は、フォームに丸みを帯びていることがわかります。
例
<表 クラス= "表table-境」 >
<キャプション> 表のレイアウト枠 </キャプション>
<THEAD>
<TR>
<Thの> 名前 </目>
<Thの> 市 </目>目> パスワード </目>
</ TR>
</ THEAD> TBODY> <TR >
<TD> Tanmay </ TD>
<TD>バンガロール</ TD>
<TD> 560001 </ TD>
</ TR>
<TR>
<TD>サチン</ TD>
<TD>ムンバイ</ TD>
<TD> 400003 </ TD>
</ TR>
<TR>
<TD>ウマ</ TD>
<TD>プネ</ TD>
<TD> 411027 </ TD>
</ TR>
</ TBODY>
</表>
結果は以下の通りであります：
ホバーテーブル
ポインタが行の上にあるときに、次の例に示すように.table-ホバークラスを追加することで、時、ライトグレーの背景があるでしょう：
例
<表 クラス= "表table-ホバー" >
<キャプション> ホバーテーブルのレイアウト </キャプション>
<THEAD>
<TR>
<Thの> 名前 </目>
<Thの> 市 </目>
<Thの> パスワード </目>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> Tanmay </ TD>
<TD>バンガロール</ TD>
<TD> 560001 </ TD>
</ TR>
<TR>
<TD>サチン</ TD>
<TD>ムンバイ</ TD>
<TD> 400003 </ TD>
</ TR>
<TR>
<TD>ウマ</ TD>
<TD>プネ</ TD>
<TD> 411027 </ TD>
</ TR>
</ TBODY>
</表>
結果は以下の通りであります：
コンパクト形
次の例に示すように、テーブルは、よりコンパクトに見えるように.table-凝縮したクラスを追加することにより、インラインパディング（詰め物）は、半分にカットされています。 あなたはよりコンパクト見たいときにこの情報が便利です。
例
<表 クラス= "表table-凝縮" >
<キャプション> 合理フォームレイアウト </キャプション>
<THEAD>
<TR>
<Thの> 名前 </目>
<Thの> 市 </目>
<Thの> パスワード </目> </ TR>
</ THEAD>
<TBODY>
<TR>
<TD> Tanmay </ TD>
<TD>バンガロール</ TD>
<TD> 560001 </ TD> </ TR>
<TR>
<TD>サチン</ TD>
<TD>ムンバイ</ TD>
<TD> 400003 </ TD> </ TR>
<TR>
<TD>ウマ</ TD>
<TD>プネ</ TD>
<TD> 411027 </ TD> </ TR>
</ TBODY>
</表>
結果は以下の通りであります：
次の表に記載されているContextクラスを使用すると、テーブルの行または個々のセルの背景色を変更することができます。
| 类 | 描述 |
|---|
| .active | 对某一特定的行或单元格应用悬停颜色 |
| .success | 表示一个成功的或积极的动作 |
| .warning | 表示一个需要注意的警告 |
| .danger | 表示一个危险的或潜在的负面动作 |
これらのクラスは、<TR>、<TD>または<目>にも適用することができます。
例
<表 クラス = "テーブル">
<キャプション> コンテキストテーブルのレイアウト </キャプション>
<THEAD>
<TR>
<Thの> 商品 </目>
<Thの> 支払日 </目>
<Thの> ステータス </目> </ TR>
</ THEAD>
<TBODY>
<Trの クラス = "アクティブ">
<TD> 製品1 </ TD>
<TD> 23/11/2013 </ TD>
<TD> </ TD> </ TR> 出荷されます
<Trの クラス = "成功">
<TD> 製品2 </ TD>
<TD> 2013年10月11日</ 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応答クラスにラップ任意の.tableことによって、あなたは（768px未満）の小型デバイスに対応するために、水平方向にスクロールするためのテーブルを持つことができます。 大規模な設備で見たとき768px広いよりも大きい場合、あなたは何の違いも表示されません。
例
<DIV > クラス = "テーブル応答性」
<表 クラス = "テーブル">
<キャプション> 応答テーブルレイアウト </キャプション>
<THEAD>
<TR>
<Thの> 商品 </目>
<Thの> 支払日 </目>
<Thの> ステータス </目> </ TR>
</ THEAD>
<TBODY>
<TR>
<TD> 製品1 </ TD>
<TD> 23/11/2013 </ TD>
<TD> </ TD> </ TR> 出荷されます
<TR>
<TD> 製品2 </ TD>
<TD> 2013年10月11日</ 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>
</表>
</ DIV>
結果は以下の通りであります：
