Panelsは要素をまとめて表示する際に使えるコンポーネント。中身には何でも表示できるため、記事一覧をカテゴリーごとに表示したり、データごとに表を作ったりする場合に使うと便利です。
グループ名などはヘッダー要素を使うことで見出しも簡単に表示することができます。
Bootstrap3 Panelsの使い方
パネルコンポーネントを作るにはdiv
要素に.panel
とスタイル用のclassをつけるだけ。パネルには見出しを記述するヘッダー、コンテンツを記述するボディの他にフッターをつけることができます。
Class名 | 概要 |
---|---|
.panel.panel-default |
デフォルトスタイルでパネルを作成 |
.panel > .panel-heading |
パネルのヘッダーを作成 |
.panel-title |
ヘッダーの見出し |
.panel > .panel-body |
パネルのボディを作成 |
.panel > .panel-footer |
パネルのフッターを作成 |
<!-- Panel -->
<div class="panel panel-default">
<div class="panel-heading">ヘッダーテキスト</div>
<div class="panel-body">
ボディテキスト
</div>
</div>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">ヘッダー見出し</h3>
</div>
<div class="panel-body">
ボディテキスト
</div>
</div>
<!-- Panelのフッター -->
<div class="panel panel-default">
<div class="panel-body">
ボディテキスト
</div>
<div class="panel-footer">フッターにテキスト</div>
</div>
Panelsのカラーパターン
パネルはデフォルトスタイル以外にカラーパターンが用意されています。classを追加するだけでヘッダーと枠の色を手軽に変更することができます。
Class名 | 概要 |
---|---|
.panel.panel-primary |
青色のパネルを作成 |
.panel.panel-success |
緑色のパネルを作成 |
.panel.panel-info |
水色のパネルを作成 |
.panel.panel-warning |
黄色のパネルを作成 |
.panel.panel-danger |
赤色のパネルを作成 |
<!-- Panelsのカラーパターン -->
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Panelsと合わせて使う
Panelの中にはテキストだけでなく、表やリスト、サムネイルなどのコンポーネントを入れることができます。.panel-body
に入れると両サイドに隙間ができるので、横幅ぴったりにコンテンツを入れたい場合は、.panel
直下に入れるようにします。
<!-- PanelにListGroupを入れる -->
<div class="panel panel-default">
<div class="panel-heading">パネルヘッダー</div>
<div class="panel-body">
<p>ボディテキスト</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">メニュー</li>
<li class="list-group-item">メニュー</li>
<li class="list-group-item">メニュー</li>
</ul>
</div>