Bootstrap 5 リストグループ

コース推薦：

基本的なリストグループ

最も基本的なリストグループは、リストアイテムを含む無序列表です： .list-group .list-group-item <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>

自分で試してみる

要素：

アクティブ状態を使用して、 .active 現在の項目をハイライトするためのクラス：

例

<ul class="list-group">
  <li class="list-group-item active">アクティブな項目</li>
  <li class="list-group-item">第二項</li>
  <li class="list-group-item">第三項</li>
</ul>

自分で試してみる

リンク付きのリストグループ

リンク付きのリストグループを作成するには、 <div> 代わりに <ul>、を <a> 代わりに <li>。オプションで、ホバー時のグレーの背景色を追加すると、 .list-group-item-action 種類：

例

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">第一項</a>
  <a href="#" class="list-group-item list-group-item-action">第二項</a>
  <a href="#" class="list-group-item list-group-item-action">第三項</a>
</div>

自分で試してみる

無効項目

.disabled クラスを使用して無効な項目に淡いテキスト色を追加します。リンクに使用する場合、ホバー効果を削除します：

例

<div class="list-group">
  <a href="#" class="list-group-item disabled">無効な項目</a>
  <a href="#" class="list-group-item disabled">無効な項目</a>
  <a href="#" class="list-group-item">第三項</a>
</div>

自分で試してみる

枠線を削除

使用します： .list-group-flush クラスを使用して枠線と角を削除します：

例

<ul class="list-group list-group-flush">
  <li class="list-group-item">第一項</li>
  <li class="list-group-item">第二項</li>
  <li class="list-group-item">第三項</li>
  <li class="list-group-item">第四項</li>
</ul>

自分で試してみる

数字付きリストグループ

使用します： .list-group-numbered クラスを使用して数字付きのリストアイテムを作成します：

例

<ol class="list-group list-group-numbered">
  <li class="list-group-item">第一項</li>
  <li class="list-group-item">第二項</li>
  <li class="list-group-item">第三項</li>
</ol>

自分で試してみる

水平リストグループ

リストアイテムが水平に表示されるように（並んで表示されるように）ではなく垂直に表示されるようにするには、以下を追加してください： .list-group-horizontal クラスを追加する： .list-group：

例

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">第一項</li>
  <li class="list-group-item">第二項</li>
  <li class="list-group-item">第三項</li>
  <li class="list-group-item">第四項</li>
</ul>

自分で試してみる

コンテキストクラス

コンテキストクラスはリストアイテムに色を追加するために使用されます：

リストアイテムに色を着けるクラスは：

  • .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 クラスと utility/helper クラスを組み合わせることで、リストグループにバッジを追加できます：

例

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    受信箱
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    広告メール
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    ゴミ箱
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

自分で試してみる