リスト・グループ　　List group

---

リスト・グループは、単なるリストではなく、柔軟で強力なリスト形式のコンポーネントだ。

---

使い方

1. class属性にlist-groupを指定したul要素やdiv要素を用意する。
2. １の要素内に配置するリスト項目（ul要素やa要素）のclass属性にlist-group-itemを指定する。

<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="list-group">
	<a class="list-group-item" href="#">メニューＡ</a>
	<a class="list-group-item" href="#">メニューＢ</a>
	<a class="list-group-item" href="#">メニューＣ</a>
</div>

ul要素を使うスタイル

表示サンプル

• リスト項目Ａ
• リスト項目Ｂ
• リスト項目Ｃ

ソースコード

<ul class="list-group">
	<li class="list-group-item">リスト項目Ａ</li>
	<li class="list-group-item">リスト項目Ｂ</li>
	<li class="list-group-item">リスト項目Ｃ</li>
</ul>

バッジ付きリスト項目

リスト項目内にバッジを配置するスタイル。

表示サンプル

• リスト項目Ａ 26
• リスト項目Ｂ 7
• リスト項目Ｃ 10

ソースコード

<ul class="list-group">
	<li class="list-group-item">
		リスト項目Ａ
		<span class="badge">26</span>
	</li>
	<li class="list-group-item">
		リスト項目Ｂ
		<span class="badge">7</span>
	</li>
	<li class="list-group-item">
		リスト項目Ｃ
		<span class="badge">10</span>
	</li>
</ul>

カラー・バリエーション（ul要素）

ul要素を使うリスト・グループにおける、コンテキスト・クラスを使ったカラー・バリエーション。

表示サンプル

• リスト項目Ａ
• リスト項目Ｂ
• リスト項目Ｃ
• リスト項目Ｄ

ソースコード

<div class="list-group">
	<a class="list-group-item list-group-item-success" href="#">メニューＡ</a>
	<a class="list-group-item list-group-item-info" href="#">メニューＢ</a>
	<a class="list-group-item list-group-item-warning" href="#">メニューＣ</a>
	<a class="list-group-item list-group-item-danger" href="#">メニューＤ</a>
</div>

div要素を使うリンク付きスタイル

現在開いているアクティブなメニューのclass属性にはactiveを追加する。

サイドメニューなどに最適なスタイルだ。

表示サンプル

ソースコード

<div class="list-group">
	<a class="list-group-item" href="#">メニューＡ</a>
	<a class="list-group-item active" href="#">メニューＢ</a>
	<a class="list-group-item" href="#">メニューＣ</a>
</div>

特定のメニューを無効化

無効化したいメニューのclass属性にdisabledを追加する。

表示サンプル

ソースコード

<div class="list-group">
	<a class="list-group-item" href="#">メニューＡ</a>
	<a class="list-group-item disabled" href="#">メニューＢ</a>
	<a class="list-group-item" href="#">メニューＣ</a>
</div>

カラー・バリエーション（div要素）

div要素を使うリスト・グループにおける、コンテキスト・クラスを使ったカラー・バリエーション。

表示サンプル

ソースコード

<div class="list-group">
	<a class="list-group-item list-group-item-success" href="#">メニューＡ</a>
	<a class="list-group-item list-group-item-info" href="#">メニューＢ</a>
	<a class="list-group-item list-group-item-warning" href="#">メニューＣ</a>
	<a class="list-group-item list-group-item-danger" href="#">メニューＤ</a>
</div>

カスタム・コンテンツ

div要素を使うリスト・グループの項目内には、見出しタグ（h1〜h6要素）や段落要素（p要素）を配置することもできる。

見出しタグ（h1〜h6要素）を配置する場合、class属性にlist-group-item-headingを指定する。

段落要素（p要素）を配置する場合、class属性にlist-group-item-textを指定する。

表示サンプル

ソースコード

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