リストグループは、要素のシンプルなリストだけでなく、カスタムコンテンツが使用された複雑なリストも表示する、 柔軟で強力なコンポーネントです。

• 基本的な例
• バッジ
• リンク項目
• ボタン項目
• 無効化された項目
• 文脈上のクラス
• カスタムコンテンツ

基本的な例

最も基本的なリストグループは、リスト項目と適切なクラスによるシンプルな順不同リストになります。 必要に応じてオプションまたは自身のCSSを指定して、これを構築します。

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

バッジ

バッジのコンポーネントをリストのグループ項目(list-group-item)へ追加すると、自動的にそれが右に配置されます。

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

リンク項目

リストグループの項目に対してアンカータグを使用することでリンクにします。 (この場合、親要素は<ul>の代わりに<div>を使用します。) 各要素に対して個別に親要素を指定する必要はありません。

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ボタン項目

リストグループの項目は、ボタンにすることも可能です。 (この場合、親要素は<ul>の代わりに<div>を使用します。) 各要素に対して個別に親要素を指定する必要はありません。 ここでは標準の.btnクラスを使用しないでください。

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

無効化された項目

.list-group-itemに.disabledを追加することでグレーアウトし、無効化の表示をすることができます。

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

文脈上のクラス

文脈上のクラスを使用して、デフォルトとリンクされたリスト項目のどちらにもスタイルを適用します。 また、.active状態の場合にも適用されます。

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

カスタムコンテンツ

下記のようなリンクのリストグループであっても、その内部にHTMLを追加することが可能です。

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

 Back to top