ブートストラップ-パネル

この章では、ブートストラップパネルについて説明します。パネルコンポーネントは、DOMコンポーネントをボックスに入れたいときに使用します。基本的なパネルを取得するには、クラス .panel を<div>要素に追加するだけです。また、次の例に示すように、この要素にクラス .panel-default を追加します-

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

見出し付きパネル

パネルの見出しを追加するには2つの方法があります-

.panel-heading クラスを使用して、パネルに見出しコンテナを簡単に追加します。
.panel-title クラスで<h1>-<h6>を使用して、事前にスタイル設定された見出しを追加します。

次の例は、両方の方法を示しています-

<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 With title
      </h3>
   </div>

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

フッター付きパネル

クラス .panel-footer を含む<div>でボタンまたはセカンダリテキストをラップすることにより、パネルにフッターを追加できます。次の例はこれを示しています。

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>

   <div class = "panel-footer">Panel footer</div>
</div>

'_コンテキストバリエーションを使用する場合、パネルフッターは前面にあることを意図していないため、色と境界線を継承しません。_

パネルのコンテキスト代替

*panel-primary、panel-success、panel-info、panel-warning、panel-danger* などのコンテキスト状態クラスを使用して、パネルを特定のコンテキストに対してより意味のあるものにします。

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>

   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>

   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>

   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>

   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>

   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

テーブル付きパネル

パネル内で境界のないテーブルを取得するには、パネル内でクラス .table を使用します。 .panel-body を含む<div>があるとします。分離のためにテーブルの上部に追加の境界線を追加します。 .panel-body を含む<div>がない場合、コンポーネントは中断せずにパネルヘッダーからテーブルに移動します。

次の例はこれを示しています-

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

   <div class = "panel-body">
      This is a Basic panel
   </div>

   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>

      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>

      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>

   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>

      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>

      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

リストグループのあるパネル

任意のパネル内にリストグループを含めることができます。クラス .panel を<div>要素に追加して、パネルを作成します。また、この要素にクラス .panel-default を追加します。これで、このパネル内にリストグループが含まれます。章リンク：/bootstrap/bootstrap_list_group [リストグループ]からリストグループを作成する方法を学ぶことができます。

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

   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>

   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>
</div>

Bootstrap-panels

目次