リストグループ

ベーシックリストグループ

最も基本的なリストグループは以下です。

最初のアイテム
次のアイテム
最後のアイテム

基本リストグループを作成するには、クラス .list-group を持つ <ul> 要素と、クラス .list-group-item を持つ <li> 要素を使用します。

<ul class="list-group">
  <li class="list-group-item">最初のアイテム</li>
  <li class="list-group-item">次のアイテム</li>
  <li class="list-group-item">最後のアイテム</li>
</ul>

バッジの追加

リストグループにバッジを追加することもできます。バッジは自動的に右側に配置されます。

ニュース 12
コメント 5
更新 3

<ul class="list-group">
  <li class="list-group-item">ニュース <span class="badge">12</span></li>
  <li class="list-group-item">コメント <span class="badge">5</span></li> 
  <li class="list-group-item">更新 <span class="badge">3</span></li> 
</ul>

リンク

リストグループ内の項目は、ハイパーリンクにすることもできます。マウスオーバーで背景色が変わります。

最初のアイテム次のアイテム最後のアイテム

<div class="list-group">
  <a href="#" class="list-group-item">最初のアイテム</a>
  <a href="#" class="list-group-item">次のアイテム</a>
  <a href="#" class="list-group-item">最後のアイテム</a>
</div>

選択状態

.active クラスを使用して選択状態にします。

最初のアイテム次のアイテム最後のアイテム

<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>
</div>

選択不可

.disabled クラスを使用して選択不可にします。

最初のアイテム次のアイテム最後のアイテム

<div class="list-group">
  <a href="#" class="list-group-item disabled">最初のアイテム</a>
  <a href="#" class="list-group-item">次のアイテム</a>
  <a href="#" class="list-group-item">最後のアイテム</a>
</div>

コンテキストクラス

リスト項目を着色するクラスは、 .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">最初のアイテム</li>
  <li class="list-group-item list-group-item-info">次のアイテム</li>
  <li class="list-group-item list-group-item-warning">次のアイテム</li>
  <li class="list-group-item list-group-item-danger">最後のアイテム</li>
</ul>

カスタマイズ

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">最初のアイテム</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>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">最後のアイテム</h4>
    <p class="list-group-item-text">最後のアイテムの説明</p>
  </a>
</div>