基本一覧グループ
最も基本的なリストグループは、リスト項目の箇条書きリストです。
- 最初の項目
- 第二項目
- 第三項目
基本的なリストのグループを作成するには、使用する<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"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</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> »それを自分で試してみてください コンテキストクラス
コンテキストクラスは、カラーリストのアイテムに使用することができます。
- 最初の項目
- 第二項目
- 第三項目
- 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> »それを自分で試してみてください