最も基本的なリストグループは、リスト項目の順序なしリストです：
基本的なリストグループを作成するには、クラス .list-group を持つ <ul> 要素と、
クラス .list-group-item を持つ <li> 要素を使用します：
<ul class="list-group">
<li class="list-group-item">First
item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Try it Yourself »
リスト·グループにバッジを追加することもできます。バッジは、自動的に右側に配置されます：
badge を作成するには、リスト項目内にクラス .badge を持つ <span> 要素を作成します：
<ul class="list-group">
<li
class="list-group-item">New <span class="badge">12</span></li>
<li
class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span
class="badge">3</span></li>
</ul>
Try it Yourself »
リスト·グループ内のアイテムをハイパーリンクにすることもできます。これは、ホバー時に灰色の背景色を追加します：
リンク付き項目を持つリストグループを作るには、<ul> の代わりに <div> を使用し、
<li> の代わりに <a> を使用します：
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Try it Yourself »
現在の項目をハイライトするには、.active クラスを使用します：
<div class="list-group">
<a href="#" class="list-group-item
active">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Try it Yourself »
次のリストグループには無効な項目があります：
項目を無効にするには、.disabled クラスを追加します：
<div class="list-group">
<a href="#" class="list-group-item
disabled">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Try it Yourself »
コンテキスト・クラスは、リスト項目を着色するために使用することができます：
リスト項目の着色のためのクラスは次の通りです：.list-group-item-success、
list-group-item-info、list-group-item-warning、
.list-group-item-danger：
<ul class="list-group">
<li class="list-group-item
list-group-item-success">First item</li>
<li
class="list-group-item list-group-item-info">Second item</li>
<li
class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Try it Yourself »
リストグループ項目の中には、ほぼすべての HTML を追加することができます。
Bootstrap は、以下のように使用できるクラス .list-group-item-heading と
.list-group-item-text を提供します：
<div class="list-group">
<a href="#" class="list-group-item
active">
<h4 class="list-group-item-heading">First
List Group Item Heading</h4>
<p
class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4
class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4
class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>
Try it Yourself »
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »