Bootstrap 5 列表组

Basic List Groups

The most basic list group is an unordered list with list items

• First item
• Second item
• Third item

To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item

Active State

• 活动项目
• Second item
• Third item

Use the .active class to highlight the current item

List Group With Linked Items

要创建带有链接项的列表组，请使用 <div> 而非 <ul>，并使用 <a> 代替 <li>。如果希望在悬停时显示灰色背景，可以选择添加 .list-group-item-action 类。

Disabled Item

`.disabled` 类为禁用的项目添加了较浅的文本颜色。当用于链接时，它会移除悬停效果。

无边框 / 移除边框

使用 .list-group-flush 类可以移除部分边框和圆角。

带编号的列表组

使用 .list-group-numbered 类可以在列表项前面添加数字。

水平列表组

如果你希望列表项水平显示而不是垂直显示（并排而不是上下堆叠），请将 .list-group-horizontal 类添加到 .list-group。

Contextual Classes

可以使用上下文类来为列表项添加颜色。

• 成功项
• 次要项
• 信息项
• 警告项
• 危险项
• 主要项
• 暗色项
• 浅色项

用于为列表项着色的类有： .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。

带上下文类的链接项

带有徽章的列表组

结合 .badge 类和辅助/助手类，在列表组中添加徽章。