Bootstrap 5 列表组

基础的列表组

最基本的列表组是包含列表项的无序列表:

如需创建基础列表组,请使用类为 .list-group<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>

亲自试一试