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-パネルにリストグループをつけて表示
パネル表示サンプル ヘッダ
パネルにリストグループをつけて表示
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
コーディング
- 08行目
- パネル表示の中にul.list-group(リストグループ)を記述します