Bootstrap5 列表组

Bootstrap5 列表组（List group）

概述

Bootstrap5 列表组是一个用于在页面上呈现带标题和文本的列表的 UI 组件。您可以将其用于显示任务列表、导航菜单、联系人列表等。

用法

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

Bootstrap5 列表组默认有一个没有边框和内边距的列表。您可以通过应用以下类来自定义其外观：

list-group：将元素应用于列表组。
list-group-item：将元素应用于列表组中的每个项目。
list-group-item-action：自动为列表组项添加样式以使其看起来像可点击按钮。

文本和链接

您可以在 Bootstrap5 列表组的每个项目中添加文本和链接。

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item"><a href="#">Item 2 link</a></li>
  <li class="list-group-item">Item 3</li>
</ul>

活动状态

您可以通过 .active 类将项设置为活动状态，来强调当前所处页面或操作的选项。

<ul class="list-group">
  <li class="list-group-item active">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

禁用状态

您可以通过 .disabled 类将项设置为禁用状态，在这种情况下，将不允许交互。

<ul class="list-group">
  <li class="list-group-item disabled">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

带副标题的列表组

您可以在项目中使用 .list-group-item 类的 <h5> 元素来设置副标题，并使用 .list-group-item-text 类的 <p> 元素来设置更多补充说明。

<ul class="list-group">
  <li class="list-group-item">
    <h5>Item 1 title</h5>
    <p class="list-group-item-text">Item 1 body text</p>
  </li>
  <li class="list-group-item">
    <h5>Item 2 title</h5>
    <p class="list-group-item-text">Item 2 body text</p>
  </li>
  <li class="list-group-item">
    <h5>Item 3 title</h5>
    <p class="list-group-item-text">Item 3 body text</p>
  </li>
</ul>

自定义颜色

您可以使用以下类来自定义列表组和列表项的颜色：

.list-group-item-primary
.list-group-item-secondary
.list-group-item-success
.list-group-item-danger
.list-group-item-warning
.list-group-item-info
.list-group-item-light
.list-group-item-dark

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Item 1</li>
  <li class="list-group-item list-group-item-secondary">Item 2</li>
  <li class="list-group-item list-group-item-success">Item 3</li>
  <li class="list-group-item list-group-item-danger">Item 4</li>
  <li class="list-group-item list-group-item-warning">Item 5</li>
  <li class="list-group-item list-group-item-info">Item 6</li>
  <li class="list-group-item list-group-item-light">Item 7</li>
  <li class="list-group-item list-group-item-dark">Item 8</li>
</ul>

结论

Bootstrap5 列表组是一个非常有用的 UI 组件，它可以为您的 Web 应用程序快速构建列表界面，并根据需要进行灵活的自定义。通过简单的 HTML 代码，您可以轻松地创建列表项，添加文本和链接，并定制颜色和状态。

Bootstrap5 分页 Bootstrap5 加载效果