前端必知必会-Bootstrap 5 列表组List Groups

---

Bootstrap 5 列表组List Groups

基本列表组

最基本的列表组是带有列表项的无序列表：

要创建基本列表组，请使用类名为 .list-group 的 <ul> 元素和类名为 .list-group-item 的

• 元素：

• 示例

  <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-horizo​​ntal 类添加到 .list-group：

  

  示例

  <ul class="list-group list-group-horizo​​ntal">
  <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">成功项</li>
  <li class="list-group-item list-group-item-secondary">次要项</li>
  <li class="list-group-item list-group-item-info">信息项</li>
  <li class="list-group-item list-group-item-warning">警告项</li>
  <li class="list-group-item list-group-item-danger">危险项</li>
  <li class="list-group-item list-group-item-primary">主要项</li>
  <li class="list-group-item list-group-item-dark">深色项</li>
  <li class="list-group-item list-group-item-light">浅色项</li>
  </ul>
  

  使用上下文类链接项

  

  示例

  <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 list-group-item-success">成功项目</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">次要项目</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">信息项目</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">警告项目</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">危险物品</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">主要物品</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">深色物品</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">浅色物品</a>
  </div>
  

  带有徽章的列表组

  将 .badge 类与使用实用程序/辅助类在列表组内添加徽章：
  

  示例

  <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>
  

  ---

  总结

  本文介绍了Bootstrap 5 列表组List Groups的使用，如有问题欢迎私信和评论