Bootstrap3
日本語リファレンス
広告
  1. Bootstrap3日本語リファレンス
  2. コンポーネント
  3. パネル

パネル　　Panels

パネルは、内容を枠線で括りたい時に便利なコンポーネントだ。

サンプル
パネルのヘッダー
パネルの内容
パネルのフッター
使い方 　 基本 　 見出し 　 フッター 　 カラー・バリーション 　 表（table要素） 　 表（table要素）２ 　 リスト・グループ（ul要素） 　 リスト・グループ（div要素） 　 カスタム・コンテンツを含むリスト・グループ（div要素）

使い方

  1. class属性にpanel panel-defaultを指定したdiv要素を用意する。
  2. 必要に応じて、１の要素内に、panel-heading（ヘッダー）、panel-body（ボディー）、panel-footer（フッター）の何れかをclass属性に指定したdivを配置する。
  3. 必要に応じて、１の要素内に、表（table要素）やリスト・グループを配置することもできる。
<div class="panel panel-default">
	<div class="panel-heading">
		パネルのヘッダー
	</div>
	<div class="panel-body">
		パネルの内容
	</div>
	<div class="panel-footer">
		パネルのフッター
	</div>
</div>

基本

表示サンプル

パネルのヘッダー
パネルの内容

ソースコード

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

見出し

ヘッダー内に見出し（h1〜h6要素）を配置する場合、見出し要素（h1〜h6要素）のclass属性にpanel-titleを指定する。

表示サンプル

パネルの見出し
パネルの内容

ソースコード

<div class="panel panel-default">
	<div class="panel-heading">
		<h5 class="panel-title">パネルの見出し</h5>
	</div>
	<div class="panel-body">
		パネルの内容
	</div>
</div>

フッター

表示サンプル

パネルの内容
パネルのフッター

ソースコード

<div class="panel panel-default">
	<div class="panel-body">
		パネルの内容
	</div>
	<div class="panel-footer">
		パネルのフッター
	</div>
</div>

カラー・バリーション

コンテキスト・クラスを使ったカラー・バリエーション。

表示サンプル

パネルのヘッダー
パネルの内容
パネルのヘッダー
パネルの内容
パネルのヘッダー
パネルの内容
パネルのヘッダー
パネルの内容
パネルのヘッダー
パネルの内容

ソースコード

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

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

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

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

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

表（table要素）

パネル内に、ヘッダー（panel-heading）、ボディー（panel-body）、表（table要素）、フッター（panel-footer）を配置するスタイル。

table要素のclass属性にはtableを指定する。

表示サンプル

太陽系リーグ
優勝チームには、銀河リーグへの参加資格が与えられる。
順位 名前 惑星 勝点
1 ブルーＳＣ 地球 101
2 ＦＣウェヌス 金星 83
3 ジュピターＦＣ 木星 68
これはサンプルであり、太陽系リーグなどは存在しません。多分。

ソースコード

<div class="panel panel-default">
	<div class="panel-heading">
		太陽系リーグ
	</div>
	<div class="panel-body">
		優勝チームには、銀河リーグへの参加資格が与えられる。
	</div>
	<table class="table">
		<thead>
			<tr>
				<th>順位</th>
				<th>名前</th>
				<th>惑星</th>
				<th>勝点</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>ブルーＳＣ</td>
				<td>地球</td>
				<td>101</td>
			</tr>
			<tr>
				<th>2</th>
				<td>ＦＣウェヌス</td>
				<td>金星</td>
				<td>83</td>
			</tr>
			<tr>
				<th>3</th>
				<td>ジュピターＦＣ</td>
				<td>木星</td>
				<td>68</td>
			</tr>
		</tbody>
	</table>
	<div class="panel-footer">
		これはサンプルであり、太陽系リーグなどは存在しません。多分。
	</div>
</div>

表（table要素）２

パネル内に、ヘッダー（panel-heading）と表（table要素）を配置するスタイル。

表示サンプル

太陽系リーグ
順位 名前 惑星 勝点
1 ブルーＳＣ 地球 101
2 ＦＣウェヌス 金星 83
3 ジュピターＦＣ 木星 68

ソースコード

<div class="panel panel-default">
	<div class="panel-heading">
		太陽系リーグ
	</div>
	<table class="table">
		<thead>
			<tr>
				<th>順位</th>
				<th>名前</th>
				<th>惑星</th>
				<th>勝点</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>ブルーＳＣ</td>
				<td>地球</td>
				<td>101</td>
			</tr>
			<tr>
				<th>2</th>
				<td>ＦＣウェヌス</td>
				<td>金星</td>
				<td>83</td>
			</tr>
			<tr>
				<th>3</th>
				<td>ジュピターＦＣ</td>
				<td>木星</td>
				<td>68</td>
			</tr>
		</tbody>
	</table>
</div>

リスト・グループ（ul要素）

パネル内に、ヘッダー（panel-heading）、ボディー（panel-body）、リスト・グループ（ul要素）、フッター（panel-footer）を配置するスタイル。

ul要素のclass属性にはlist-groupを指定する。

リスト項目（li要素）のclass属性には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 class="panel-footer">
		パネルのフッター
	</div>
</div>

リスト・グループ（div要素）

パネル内に、ヘッダー（panel-heading）、ボディー（panel-body）、リスト・グループ（div要素）、フッター（panel-footer）を配置するスタイル。

div要素のclass属性にはlist-groupを指定する。

リスト項目（a要素）のclass属性にはlist-group-itemを指定する。

表示サンプル

パネルのヘッダー
パネルの内容
メニューＡ メニューＢ メニューＣ
パネルのフッター

ソースコード

<div class="panel panel-default">
	<div class="panel-heading">
		パネルのヘッダー
	</div>
	<div class="panel-body">
		パネルの内容
	</div>
	<div class="list-group">
		<a class="list-group-item" href="#">メニューＡ</a>
		<a class="list-group-item" href="#">メニューＢ</a>
		<a class="list-group-item" href="#">メニューＣ</a>
	</div>
	<div class="panel-footer">
		パネルのフッター
	</div>
</div>

カスタム・コンテンツを含むリスト・グループ（div要素）

パネル内に、ヘッダー（panel-heading）、ボディー（panel-body）、カスタム・コンテンツを含むリスト・グループ（div要素）、フッター（panel-footer）を配置するスタイル。

リスト・グループの項目内に、見出しタグ（h1〜h6要素）を配置する場合、class属性にlist-group-item-headingを指定する。

リスト・グループの項目内に、段落要素（p要素）を配置する場合、class属性にlist-group-item-textを指定する。

表示サンプル

パネルのヘッダー
パネルの内容

メニューＡ見出し

メニューＡ段落

メニューＢ見出し

メニューＢ段落

メニューＣ見出し

メニューＣ段落
パネルのフッター

ソースコード

<div class="panel panel-default">
	<div class="panel-heading">
		パネルのヘッダー
	</div>
	<div class="panel-body">
		パネルの内容
	</div>
	<div class="list-group">
		<a class="list-group-item" href="#">
			<h4 class="list-group-item-heading">メニューＡ見出し</h4>
			<p class="list-group-item-text">メニューＡ段落</p>
		</a>
		<a class="list-group-item active" href="#">
			<h4 class="list-group-item-heading">メニューＢ見出し</h4>
			<p class="list-group-item-text">メニューＢ段落</p>
		</a>
		<a class="list-group-item" href="#">
			<h4 class="list-group-item-heading">メニューＣ見出し</h4>
			<p class="list-group-item-text">メニューＣ段落</p>
		</a>
	</div>
	<div class="panel-footer">
		パネルのフッター
	</div>
</div>
広告
関連ページ
アイコンドロップダウンボタン・グループドロップダウン・ボタンインプット・グループナビゲーションナビゲーション・バーパンくずリストページネーションラベルバッジジャンボトロンページ・ヘッダーサムネイルアラートプログレス・バーメディア・オブジェクトリスト・グループパネルレスポンシブな埋め込み埋め込み効果
広告