ブートストラップリストグループ
基本リストグループ
最も基本的なリストグループは、リストアイテムを含む順序付けされていないリストです。
- 最初のアイテム
- 2番目のアイテム
- 3番目のアイテム
基本的なリストグループを作成するには、クラスを持つ要素<ul>とクラス.list-groupを
持つ要素を使用します。<li>.list-group-item
例
<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>
バッジ付きのリストグループ
リストグループにバッジを追加することもできます。バッジは自動的に右側に配置されます。
- 12 新しい
- 5 削除
- 3 警告
バッジを作成する
には、リストアイテム内に<span>クラスを持つ要素を作成します。.badge
例
<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>
リンクされたアイテムを含むリストグループ
リストグループ内のアイテムは、ハイパーリンクにすることもできます。これにより、ホバー時に灰色の背景色が追加されます。
リンクされたアイテムを含むリストグループを作成するには、 ：<div>の代わりに<ul>
および<a>の代わりにを使用します。<li>
例
<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>
アクティブ状態
.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>
無効なアイテム
次のリストグループには無効なアイテムがあります。
.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>
コンテキストクラス
コンテキストクラスを使用して、リストアイテムに色を付けることができます。
- 最初のアイテム
- 2番目のアイテム
- 3番目のアイテム
- 4番目のアイテム
リストアイテムに色を付けるためのクラスは、、、、、および：です
.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>
カスタムコンテンツ
リストグループアイテム内には、ほぼすべての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>