Bootstrap5中的List Group（列表组）组件

Bootstrap 5 中的 List Group（列表组） 是一个灵活的、强大的组件，用于显示一系列内容。它常用于创建导航、表单控件或简单的列表。List Group 允许你通过添加样式和交互性来增强列表的外观和感觉。

HTML 结构

下面是一个基本的 List Group 的 HTML 结构示例：

<ul class="list-group">
  <li class="list-group-item">第一项</li>
  <li class="list-group-item">第二项</li>
  <li class="list-group-item">第三项</li>
</ul>

在这个示例中：

• list-group 类应用于 <ul> 或 <div> 元素，以创建一个 List Group。
• list-group-item 类应用于 <li> 元素，以定义 List Group 中的单个项目。

样式和外观

你可以通过添加不同的类来定制 List Group 的外观：

• list-group-flush：移除 List Group 项目的内边距，使它们紧密排列。

<ul class="list-group list-group-flush">
  <li class="list-group-item">An 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>

• list-group-horizontal：使 List Group 水平显示。

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

自定义内容

List Group 项目可以包含各种类型的内容，包括链接、按钮、图标等。例如：

<ul class="list-group">
  <li class="list-group-item">
    <a href="#">链接</a>
  </li>
  <li class="list-group-item">
    <button class="btn btn-primary">按钮</button>
  </li>
  <li class="list-group-item">
    <span class="bi bi-check-circle-fill"></span> 图标和文字
  </li>
</ul>

在这个示例中，List Group 项目包含了链接、按钮和带有图标的文本。

总结

Bootstrap 5 的 List Group 是一个灵活且功能强大的组件，可用于创建各种类型的列表，包括导航、表单控件等。通过添加不同的类和 JavaScript 交互性，你可以轻松定制 List Group 的外观和行为。