Bootstrap 5 リストグループ(.list-group))

目次

1. 基本リストグループ(Basic .list-group)
2. イベントステータス(.active)
3. リンクされたアイテムを含むリストグループ
4. アイテムを無効にする(.disabled)
5. 境界線を削除する(.list-group-flush)
6. 番号付きリストグループ(.list-group-numbered)
7. 水平リストグループ(.list-group-horizontal)
8. コンテキストクラス(.list-group-item-..)
9. 項目をコンテキストクラスとリンクする
10. バッジ付きリストグループ(.badge)

基本リストグループ(Basic .list-group)

最も基本的なリスト グループは、リスト項目を含む順序なしリストです。：

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

例

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item"&list-groupgt;Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

アクティブ状態(.active)

現在の項目を強調表示するには、.active クラスを使用してください:

例

<ul class="list-group">
  <li class="list-group-item active">Active item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

リンクされたアイテムを含むリストグループ(.list-group-item-action)

リンクされた項目を含むリスト グループを作成するには、<ul> の代わりに <div> を使用し、<li> の代わりに <a> を使用します。 ホバー時に灰色の背景色が必要な場合は、オプションで .list-group-item-action クラスを追加します。

例

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First item</a>
  <a href="#" class="list-group-item list-group-item-action">Second item</a>
  <a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

アイテムを無効にする(.disabled)

.disabled クラスは、無効な項目に明るいテキストの色を追加します。 リンクで使用すると、ホバー効果が削除されます:

例

<div class="list-group">
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>

境界線を削除する(.list-group-flush)

.list-group-flush クラスを使用して、境界線と丸い角を削除します。

例

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

番号付きリストグループ(.list-group-numbered)

.list-group-numbered クラスを使用して、先頭に数字が付いたリスト項目を作成します。

例

<ol class="list-group list-group-numbered">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Second item</li>
</ol>

水平リストグループ(.list-group-horizontal)

リスト項目を垂直方向ではなく水平方向 (上下に並べるのではなく並べて) に表示したい場合は、.list-group-horizontal クラスを .list-group に追加します。

例

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
  <li class="list-group-item">Fourth item</li>
</ul>

コンテキストクラス(.list-group-item-..)

コンテキスト クラスを使用して、リスト項目に色を追加できます。：

リスト項目を色付けするためのクラスは次のとおりです：

• .list-group-item-success
• .list-group-item-secondary
• .list-group-item-info
• .list-group-item-warning
• .list-group-item-danger
• .list-group-item-primary
• .list-group-item-dark
• .list-group-item-light

例

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

項目をコンテキストクラスとリンクする

例

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>

バッジ付きリストグループ(.badge)

.badge クラスと utility/helper クラスを組み合わせて、リスト グループにバッジを追加します。

例

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Inbox
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Ads
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Junk
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>