常に必要とされるわけではありませんが、時にはボックス内に任意のDOMの配置が必要なケースもあるでしょう。 そのような場合には、パネルコンポーネントを試してみてください。

• 基本的な例
• 見出しを使用したパネル
• フッターを使用したパネル
• 色付け
• テーブルを使用したパネル
• リストグループを使用したパネル

基本的な例

デフォルトで.panelが行うことは、基本的なボーダーの適用とコンテンツの入れ物へのpaddingの適用のみになります。

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

見出しを使用したパネル

.panel-headingを使用して、パネルに簡単に見出しコンテナを追加することが出来ます。 また、予めスタイルが適用されている見出しに.panel-titleクラスを追加することで、 <h1>～<h6>を含めることも可能です。

適切なリンク色を適用するには、.panel-titleの見出し内にリンクを配置するようにしてください。

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

フッターを使用したパネル

.panel-footerで、ボタンや副次的なテキストを囲みます。 パネルのフッターは、文脈上のバリエーションを使用した際に、 それらは重要な位置づけではないとして、色とボーダーの継承をしないことに注意してください。

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

色付け

他のコンポーネントと同様に、文脈上の状態を表すクラスを追加することで、パネルに対して簡単に特定の意味付けを行うことが可能です。

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

テーブルを使用したパネル

デザインが一体となるように、境界線のない.tableを追加します。 .panel-bodyがある場合は、テーブルの先頭と区分けするために余分にボーダーが追加されます。

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

パネルのボディ部分(.panel-body)が存在しなければ、本来パネルのボディ部分だった場所が詰められて、 そのコンポーネント(ここではテーブル)がパネルの見出し部分にまで移動します。

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

リストグループを使用したパネル

パネル内に全体幅のリストグループを簡単に含めることが可能です。

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

 Back to top