リストグループ

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

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

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

基本リストグループを作成するには、クラス .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>