bootstrap のパネルは、コンテンツの周りに若干のパディングを持つボーダー付きボックスです：
パネルは .panel クラスで、パネル内のコンテンツは .panel-body クラスで作成します：
<div class="panel panel-default">
<div class="panel-body">A Basic
Panel</div>
</div>
Try it Yourself »
.panel-default クラスは、パネルの色のスタイル設定に使用します。
コンテキスト・クラスの詳細については、このページの最後の例を参照してください。
.panel-heading クラスは、パネルに見出しを追加します：
<div class="panel panel-default">
<div
class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel
Content</div>
</div>
Try it Yourself »
.panel-footer クラスは、パネルにフッターを追加します：
<div class="panel panel-default">
<div class="panel-body">Panel
Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
Try it Yourself »
多くのパネルを一緒にグループ化するには、その周りをクラス .panel-group を持つ
<div> でラップします。
.panel-group クラスは、各パネルの下マージンをクリアします：
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">Panel
Content</div>
</div>
<div class="panel panel-default">
<div class="panel-body">Panel
Content</div>
</div>
</div>
Try it Yourself »
パネルを着色するには、コンテキストクラス (.panel-default、.panel-primary、
.panel-success、.panel-info、.panel-warning、
.panel-danger) を使用します：
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »