Panels（パネル）
パネルを表示します。
同じようなものにリストグループ・Wellsがありますが、見かけ・表示内容に差異がありますので用途に合わせてお使いください。
サンプル01－パネル表示
パネル表示サンプル ヘッダ
パネル表示サンプル 本文
ヘッダ・本文・フッタと表示していますが、ヘッダ・フッタは省略可能です。
ヘッダ・本文・フッタと表示していますが、ヘッダ・フッタは省略可能です。
コーディング
- 01行目
- パネルに表示したいコンテンツを.panelで囲みます
- 02行目
- ヘッダ内容を.panel-headingで囲みます（省略可能です）
- 05行目
- 本文を.panel-bodyで囲みます
- 09行目
- フッタ内容を.panel-footerで囲みます（省略可能です）
サンプル02－パネルに色をつけて表示
パネル表示サンプル ヘッダ
パネル色：panel-default
パネル表示サンプル ヘッダ
パネル色：panel-primary
パネル表示サンプル ヘッダ
パネル色：panel-success
パネル表示サンプル ヘッダ
パネル色：panel-success
パネル表示サンプル ヘッダ
パネル色：panel-warning
パネル表示サンプル ヘッダ
パネル色：panel-danger
機能
パネル色を指定できますが、色がつくのは罫線とヘッダ背景色でフッタ背景色はグレーで固定となります
表示例で説明すると、2番目のパネルに.panel-primaryで色指定していますがフッタ背景色はグレーとなっています
コーディング
- .panel-*****
- 01･12･15･18･21･24行目 表示したいパネル色をで指定して下さい
サンプル03－パネルにテーブルをつけて表示
パネル表示サンプル ヘッダ
パネルにテーブルをつけて表示
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
機能
<table>で使用できるclassは指定できます
表示例で説明すると、<table>に対して.table-hoverでマウスオーバー時の反応を行い、<tr>に対して.dangerで行に色をつけています
コーディング
- 08行目
- パネル表示の中に<table>（表）を記述します
サンプル04－パネルにリストグループをつけて表示
パネル表示サンプル ヘッダ
パネルにリストグループをつけて表示
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
コーディング
- 08行目
- パネル表示の中にul.list-group（リストグループ）を記述します