コンポーネント

Bootstrapで用意されているコンポーネントの説明。

パネル 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のテーブルページを参照してください。

パネルヘッダー
パネル内容
ユーザ名
1 佐藤 太郎 satou
2 鈴木 rin_suzu
3 高橋 かおり sakura
				<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指定してください。

パネルヘッダー
パネル内容
  • リスト1です
  • リスト2です
  • リスト3です
				<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つで表示は下記のようになります。

パネルヘッダー
.panel-primary指定
パネルヘッダー
.panel-success指定
パネルヘッダー
.panel-info指定
パネルヘッダー
.panel-warning指定
パネルヘッダー
.panel-danger指定
				<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>