トップページ >  Bootstrap >  Bootstrapのパネル
初版2014/07/10： 最終更新日2014/07/10
  Bootstrapのパネル
目次
・Bootstrapのパネル
・パネルのフッター
・パネルの色を変更する
Bootstrapのパネル
Bootstrapではパネルを表示することができます。
jQueryMobileではパネルといえば上部の左右どちらかにあるボタンのようなのを指してますがBootstrapのパネルはタイトルとコンテンツを表示するコラプシブルのような部品です。
div要素にpanel panel-default属性を追加し、そのdiv内に入れ子でdiv要素を追加します。
タイトルのdiv要素にはpanel-heading属性を追加します。コンテンツのdiv要素にはpanel-body属性を追加します。
タイトルは省略することができます。

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">ヘッダータイトル</div>
    <div class="panel-body">
    コンテンツ
    </div>
  </div>
</div>

パネルのDEMOです。

パネルのフッター
パネルにはヘッダーにタイトルをつけますが、フッターも表示することができます。
コンテンツと同階層にdiv要素を追加し、class属性にpanel-footerを追加します。

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">ヘッダータイトル</div>
    <div class="panel-body">
    コンテンツ
    </div>
  </div>
</div>

パネルのフッターを表示したDEMOです。

パネルの色を変更する
Bootstrapのパネルの色を変更することができます。
ボタンでも色が変更できたように簡単に色を変更することができます。
パネルの色の種類は5つあります。panel-primary,panel-success,panel-warning,panel-danger,panel-infoの5つになります。

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">ヘッダータイトル</div>
    <div class="panel-body">
    コンテンツ
    </div>
  </div>
  <div class="panel panel-default panel-primary">
    <div class="panel-heading">ヘッダータイトル</div>
    <div class="panel-body">
    コンテンツ
    </div>
  </div>
  <div class="panel panel-default panel-success">
    <div class="panel-heading">ヘッダータイトル</div>
    <div class="panel-body">
    コンテンツ
    </div>
  </div>
  <div class="panel panel-default panel-warning">
    <div class="panel-heading">ヘッダータイトル</div>
    <div class="panel-body">
    コンテンツ
    </div>
  </div>
  <div class="panel panel-default panel-danger">
    <div class="panel-heading">ヘッダータイトル</div>
    <div class="panel-body">
    コンテンツ
    </div>
  </div>
  <div class="panel panel-default panel-info">
    <div class="panel-heading">ヘッダータイトル</div>
    <div class="panel-body">
    コンテンツ
    </div>
  </div>
</div>

パネルの色を変更したDEMOです。

HOME