Webページのコンテンツとは切り離された内容をページ内にコンパクトにまとめて表示したい、ということはよくあります。ある種のコラムであったり、注意・警告の表示などのように、本来はアラートやダイアログ的に表示するようなものですね。

こうした時に便利なのが「パネル」です。これは、Bootstrap独自の表示で、ページ内に、独立したコンテンツを埋め込むことが簡単にできます。このパネルは、以下のような形で記述します。

<div class="panel">
    <div class="panel-heading">
        <p class="panel-title">タイトル</p>
    </div>
    <div class="panel-body">
        コンテンツ
    </div>
    <div class="panel-footer">
        フッター
    </div>
</div>

パネルは、class="panel"というクラスを指定した<div>タグを使って作成します（ただし、panelの他に、後述のパネルのスタイル用クラスが必要です）。

パネル内には、ヘッダー、ボディ、フッターの３つのタグを用意します。それぞれclass="panel-title"、class="panel-body"、class="panel-footer"というクラスを指定します。また、ヘッダー部分には、タイトル表示のスタイルを指定するclass="panel-title"が用意されています。



実際にパネルを用意する場合は、class="panel"に、更にパネルのスタイルに関するクラスを追加します。これには、以下のようなものが用意されています。

paner-default　――基本のパネルです。全体的にグレーを基調とした表示です。
panel-primary　――紺色のタイトルと枠線を表示した、よりはっきりと目立つスタイルです。
panel-success　――何らかの動作が成功したメッセージ用です。淡いグリーンのタイトル。
panel-info　――インフォメーション表示用です。淡いブルーのタイトル。
panel-warning　――警告の表示用です。黄色っぽいタイトル。
panel-danger　――危険を知らせるためのものです。赤紫っぽいタイトル。

これらをclass="panel"と併用して設定することで、パネルが表示されるようになります。利用例を下に掲載しておきましょう。ここでは、<div class="panel panel-primary">という形でパネル用のタグを用意しています。