パネル

Panel

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 )を使用します。

panel-default
panel-default
panel-primary
panel-primary
panel-success
panel-success
panel-info
panel-info
panel-warning
panel-warning
panel-danger
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>