ブートストラップ4リストグループ

基本リストグループ

最も基本的なリストグループは、リストアイテムを含む順序付けされていないリストです。

• 最初のアイテム
• 2番目のアイテム
• 3番目のアイテム

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

アクティブ状態

• アクティブアイテム
• 2番目のアイテム
• 3番目のアイテム

.activeクラスを使用して、現在のアイテムを強調表示します。

リンクされたアイテムを含むリストグループ

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

無効なアイテム

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

境界線をフラッシュ/削除

クラスを使用し.list-group-flushて、いくつかの境界線と丸みを帯びた角を削除します。

水平リストグループ

リストアイテムを垂直方向ではなく水平方向に（互いに重ねるのではなく並べて）表示する場合は、.list-group-horizontalクラスを次のように追加し.list-groupます。

コンテキストクラス

コンテキストクラスを使用して、リストアイテムに色を付けることができます。

• 成功アイテム
• 二次アイテム
• 情報項目
• 警告項目
• 危険物
• 主なアイテム
• ダークアイテム
• ライトアイテム

リストアイテムに色を付けるためのクラスは次のとおりです。、、、、、、、、および .list-group-item-success、：list-group-item-secondarylist-group-item-info list-group-item-warning.list-group-item-danger.list-group-item-primarylist-group-item-darklist-group-item-light

アイテムをコンテキストクラスにリンクする

バッジ付きのリストグループ

.badgeクラスをユーティリティ/ヘルパークラスと組み合わせて、リストグループ内にバッジを追加します。