1. Home
2. コンポーネント
3. パネル

パネル Panels

Bootstrapで用意されているパネルの紹介。

• パネルの基本
• パネルのバリエーション

パネルの基本

.panelとパネルの色を指定する.panel-defaultなどを指定。
本文など内容を囲むdivに.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>;

パネルのバリエーション

テーブル付きパネル

パネルの中にテープルを入れることができます。
.panel内に.tableを指定したテーブルを入れるだけです。.panel-headingの部分に関しては無くても構いません。
テーブルに関する設定はCSSのテーブルページを参照してください。

				<div class="panel panel-default">
			    <div class="panel-heading">パネルヘッダー</div>
			    <div class="panel-body">パネル内容</div>
			    <table class="table">
			        ...
			    </table>
				</div>

リストグループ付きパネル

パネルの中にリストグループを入れることができます。
ulまたはolに.list-groupを指定。それぞれのリストli に.list-group-item指定してください。

				<div class="panel panel-default">
			    <div class="panel-heading">パネルヘッダー</div>
			    <div class="panel-body">パネル内容</div>
			    <ul class="list-group">
			        <li class="list-group-item">...</li>
			        <li class="list-group-item">...</li>
			        <li class="list-group-item">...</li>
			    </ul>
				</div>

パネルの色

.panel-default指定では灰色のパネルになりますが、他に5種類の色が用意されています。
.panel-primary、.panel-success、.panel-info、.panel-warning、.panel-dangerの5つで表示は下記のようになります。

				<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>