Bootstrapのパネルは、コンテンツの周りに少々のパディングがある境界の付いたボックスです。
パネルは
.panel
クラスと
.panel-body
クラスを使用します。
<div class="panel panel-default"> <div class="panel-body">ベーシックパネル</div> </div>
.panel-heading
と
.panel-footer
を使用してヘッダーとフッターを追加します。
<div class="panel panel-default"> <div class="panel-heading">ヘッダー</div> <div class="panel-body">内容</div> <div class="panel-footer">フッター</div> </div>
パネルをグループ化するには、
<div>
をクラス
.panel-group
で囲みます。
.panel-group
クラスは各パネルのボトムマージンをクリアします。
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">ヘッダー</div>
<div class="panel-body">内容</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">ヘッダー</div>
<div class="panel-body">内容</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">ヘッダー</div>
<div class="panel-body">内容</div>
</div>
</div>
パネルに色を付けるには、コンテキストクラス（
.panel-default
、
.panel-primary
、
.panel-success
、
.panel-info
、
.panel-warning
、または
.panel-danger
）を使用します。
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">panel-default</div>
<div class="panel-body">panel-default</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">panel-primary</div>
<div class="panel-body">panel-primary</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">panel-success</div>
<div class="panel-body">panel-success</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">panel-info</div>
<div class="panel-body">panel-info</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">panel-warning</div>
<div class="panel-body">panel-warning</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">panel-danger</div>
<div class="panel-body">panel-danger</div>
</div>
</div>