Bootstrap3 ListGroupの使い方

Pocket

ListGroupはメニューリストを表示する際に使えるコンポーネント。ulタグにつけるだけで使えるシンプルな作りなので使う機会も多いはず。構造がシンプルなのでスタイルしやすいのも良いところです。

Bootstrap3 ListGroupの使い方

list-groupはul要素だけでなく、div要素でも作成可能。divに作った場合はaタグをメニューとして表示することができます。

Class名 概要
.list-group list-groupの作成
.list-group > .list-group-item リスト
.active アクティブなリスト
.disable 無効なリスト
<!-- ulで作るlist-group -->
<ul class="list-group">
  <li class="list-group-item active">メニュー</li>
  <li class="list-group-item">メニュー</li>
  <li class="list-group-item">メニュー</li>
  <li class="list-group-item">メニュー</li>
  <li class="list-group-item disabled">メニュー</li>
</ul>

<!-- div要素で作るリンク付きListGroup -->
<div class="list-group">
  <a href="#" class="list-group-item active">メニュー</a>
  <a href="#" class="list-group-item">メニュー</a>
  <a href="#" class="list-group-item">メニュー</a>
  <a href="#" class="list-group-item">メニュー</a>
  <a href="#" class="list-group-item disabled">メニュー</a>
</div>

ListGroupのカラーパターン

リストにはカラーパターンを追加することができます。少しclass名が長くなってますが、.list-group-itemに色を付け足すだけでOK。

Class名 概要
.list-group-item-success 緑色のリストを作る
.list-group-item-info 水色のリストを作る
.list-group-item-warning 黄色のリストを作る
.list-group-item-danger 赤色のリストを作る
<!-- ListGroupのカラーパターン -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">メニュー</a>
  <a href="#" class="list-group-item list-group-item-info">メニュー</a>
  <a href="#" class="list-group-item list-group-item-warning">メニュー</a>
  <a href="#" class="list-group-item list-group-item-danger">メニュー</a>
</div>

ListGroupコンテンツ

ListGroupではメニューだけでなく、コンテンツを作ることも可能です。

Class名 概要
.list-group-item-heading リスト内の見出し
.list-group-item-text リスト内のテキスト
<!-- ListGroupのコンテンツ-->
<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">リストの見出し</h4>
    <p class="list-group-item-text">リストのテキスト</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">リストの見出し</h4>
    <p class="list-group-item-text">リストのテキスト</p>
  </a>
</div>

デモページはこちら