Bootstrap3 ListGroupの使い方

Tweet

Pocket

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

Bootstrap3 ListGroupの使い方

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

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

<!-- 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ではメニューだけでなく、コンテンツを作ることも可能です。

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

デモページはこちら