twitter-bootstrap
パネル

備考

基本的な例

デフォルトでは、すべての.panelは、いくつかのコンテンツを格納するためにいくつかの基本的な枠線と詰め物を適用します。

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

見出し付きパネル

.panel-headingを.panel-headingして、見出しコンテナをパネルに簡単に追加できます。 pre-styled見出しを追加するには、 .panel-titleクラスを含む<h1>-<h6>を含めることもできます。ただし、 <h1>-<h6>のフォントサイズは.panel-heading上書きされます。

適切なリンクの色付けを行うには、 .panel-title内の見出しにリンクを配置して.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>