Bootstrap3 Panelsコンポーネントの使い方

Tweet

Pocket

Panelsは要素をまとめて表示する際に使えるコンポーネント。中身には何でも表示できるため、記事一覧をカテゴリーごとに表示したり、データごとに表を作ったりする場合に使うと便利です。

グループ名などはヘッダー要素を使うことで見出しも簡単に表示することができます。

Bootstrap3 Panelsの使い方

パネルコンポーネントを作るにはdiv要素に.panelとスタイル用のclassをつけるだけ。パネルには見出しを記述するヘッダー、コンテンツを記述するボディの他にフッターをつけることができます。

<!-- 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を追加するだけでヘッダーと枠の色を手軽に変更することができます。

<!-- 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>

デモページはこちら