「Bootstrap ComponentsのList group」のサンプル
「BootstrapのComponentsのサンプル：和訳」の「List group」のサンプルページです。
- 親要素に「.list-group」。
- 各子要素に「.list-group-item」。
基本のリストグループ
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
実際のソース
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>背景色あり
class「list-group-item」をclass「list-group-item list-group-item-○○○」にする。
- success：Dapibus ac facilisis in
- info：Cras sit amet nibh libero
- warning：Porta ac consectetur ac
- danger：Vestibulum at eros
実際のソース
<ul class="list-group">
<li class="list-group-item list-group-item-success">success：Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">info：Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">warning：Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">danger：Vestibulum at eros</li>
</ul>バッジとの組合せ
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
実際のソース
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="badge">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="badge">1</span>
Morbi leo risus
</li>
</ul>リンクのリスト化
「.active」「.disabled」もあわせて使える。
アクティブ：Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
無効化：Vestibulum at eros
実際のソース
<div class="list-group">
<a href="#" class="list-group-item bootstrap active">アクティブ：Cras justo odio</a>
<a href="#" class="list-group-item bootstrap">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item bootstrap">Morbi leo risus</a>
<a href="#" class="list-group-item bootstrap">Porta ac consectetur ac</a>
<a href="#" class="list-group-item bootstrap disabled">無効化：Vestibulum at eros</a>
</div>※クラス「bootstrap」は不要です（このサイトで使っているCSSで「a.btn」をすでに設定しているためbootstrap.cssと競合。その回避用につくったクラスです）
ボタンのリスト化
「.disabled」もあわせて使える。
実際のソース
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item disabled">無効化：Vestibulum at eros</button>
</div>コンテンツのリスト化
文章やリンク以外にもちょっとしたコンテンツにも使える
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
実際のソース
<div class="list-group">
<a href="#" class="list-group-item bootstrap active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item bootstrap">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item bootstrap">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>※例だとaタグの中にh4が入ってるんだけど、htmlの文法エラーになるような気がする・・・。
※クラス「bootstrap」は不要です（このサイトで使っているCSSで「a.btn」をすでに設定しているためbootstrap.cssと競合。その回避用につくったクラスです）