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>