リスト・グループ List group

---

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

---

使い方

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

<ul class="list-group">
	<li class="list-group-item">リスト項目A</li>
	<li class="list-group-item">リスト項目B</li>
	<li class="list-group-item">リスト項目C</li>
</ul>
<div class="list-group">
	<a class="list-group-item" href="#">メニューA</a>
	<a class="list-group-item" href="#">メニューB</a>
	<a class="list-group-item" href="#">メニューC</a>
</div>

ul要素を使うスタイル

表示サンプル

• リスト項目A
• リスト項目B
• リスト項目C

ソースコード

<ul class="list-group">
	<li class="list-group-item">リスト項目A</li>
	<li class="list-group-item">リスト項目B</li>
	<li class="list-group-item">リスト項目C</li>
</ul>

バッジ付きリスト項目

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

表示サンプル

• リスト項目A 26
• リスト項目B 7
• リスト項目C 10

ソースコード

<ul class="list-group">
	<li class="list-group-item">
		リスト項目A
		<span class="badge">26</span>
	</li>
	<li class="list-group-item">
		リスト項目B
		<span class="badge">7</span>
	</li>
	<li class="list-group-item">
		リスト項目C
		<span class="badge">10</span>
	</li>
</ul>

カラー・バリエーション(ul要素)

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

表示サンプル

• リスト項目A
• リスト項目B
• リスト項目C
• リスト項目D

ソースコード

<div class="list-group">
	<a class="list-group-item list-group-item-success" href="#">メニューA</a>
	<a class="list-group-item list-group-item-info" href="#">メニューB</a>
	<a class="list-group-item list-group-item-warning" href="#">メニューC</a>
	<a class="list-group-item list-group-item-danger" href="#">メニューD</a>
</div>

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

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

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

表示サンプル

ソースコード

<div class="list-group">
	<a class="list-group-item" href="#">メニューA</a>
	<a class="list-group-item active" href="#">メニューB</a>
	<a class="list-group-item" href="#">メニューC</a>
</div>

特定のメニューを無効化

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

表示サンプル

ソースコード

<div class="list-group">
	<a class="list-group-item" href="#">メニューA</a>
	<a class="list-group-item disabled" href="#">メニューB</a>
	<a class="list-group-item" href="#">メニューC</a>
</div>

カラー・バリエーション(div要素)

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

表示サンプル

ソースコード

<div class="list-group">
	<a class="list-group-item list-group-item-success" href="#">メニューA</a>
	<a class="list-group-item list-group-item-info" href="#">メニューB</a>
	<a class="list-group-item list-group-item-warning" href="#">メニューC</a>
	<a class="list-group-item list-group-item-danger" href="#">メニューD</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">見出しA</h4>
		<p class="list-group-item-text">段落A</p>
	</a>
	<a class="list-group-item active" href="#">
		<h4 class="list-group-item-heading">見出しB</h4>
		<p class="list-group-item-text">段落B</p>
	</a>
	<a class="list-group-item" href="#">
		<h4 class="list-group-item-heading">見出しC</h4>
		<p class="list-group-item-text">段落C</p>
	</a>
</div>