Bootstrap5 列表组

列表组是一种灵活且强大的组件，用于显示一系列内容。

基本

最基本的列表组是一个无序列表，其中包含列表项和适当的类。

<ul class="list-group">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

活动项

将 .active 添加到 .list-group-item 以显示当前活动的选择。

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

禁用项

将 .disabled 添加到 .list-group-item 以禁用列表项。

<ul class="list-group">
  <li class="list-group-item disabled">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

链接和按钮

使用 <a> 或 <button> 通过添加 .list-group-item-action 来创建具有悬停、禁用和活动状态的交互式列表组项。

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>