Bootstrap5 列表组

列表组是用于显示一组相关项目的组件。它允许您轻松地创建一个可自定义的列表，并为其中的项目添加不同的样式和行为。

列表组的基本用法

要创建一个基本的列表组，只需将一个无序列表或有序列表包裹在 .list-group 类中即可。列表中的每个条目应该是一个带有 .list-group-item 类的 <li> 元素。

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

定制列表项

列表项可以通过多种方式来定制。你可以通过添加类来改变它们的外观或行为。

活动状态

使用 .active 类可以将列表项标记为活动状态。

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

不可用状态

使用 .disabled 类可以使列表项不可用。

<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

链接

可以将列表项设置为链接。只需将 <a> 标签包裹在 <li> 标签内，并给 <a> 标签添加 .list-group-item-action 类。

<ul class="list-group">
  <li class="list-group-item list-group-item-action"><a href="#">Cras justo odio</a></li>
  <li class="list-group-item list-group-item-action"><a href="#">Dapibus ac facilisis in</a></li>
  <li class="list-group-item list-group-item-action"><a href="#">Morbi leo risus</a></li>
  <li class="list-group-item list-group-item-action"><a href="#">Porta ac consectetur ac</a></li>
  <li class="list-group-item list-group-item-action"><a href="#">Vestibulum at eros</a></li>
</ul>

列表组的变体

Bootstrap 提供了多种列表组的变体，使您可以根据需要调整其样式和功能。

自定义颜色

通过将颜色类应用到 .list-group-item 上，您可以更改列表项的颜色。

// www.javascriptcn.com code example
<ul class="list-group">
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

带边框的列表组

通过将 .list-group-flush 类添加到列表组上，您可以去除列表项之间的圆角，从而使其看起来更整洁。

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

列表组中的按钮

除了链接之外，列表组还可以包含按钮。这可以通过将按钮包裹在 <li> 标签内来实现。

<ul class="list-group">
  <li class="list-group-item"><button type="button" class="btn btn-primary btn-block">Primary button</button></li>
  <li class="list-group-item"><button type="button" class="btn btn-secondary btn-block">Button</button></li>
</ul>

使用图标增强列表项

通过添加 Font Awesome 或其他图标库，可以为列表项增添视觉吸引力。

// www.javascriptcn.com code example
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <i class="fas fa-star"></i>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-success badge-pill">20</span>
  </li>
</ul>

动态内容

列表组也可以动态生成，例如从数据库中获取数据。以下示例展示了如何使用 JavaScript 和 Bootstrap 的动态功能。

// www.javascriptcn.com code example
<div id="dynamic-list-group" class="list-group">
</div>

<script>
  const items = ["Cras justo odio", "Dapibus ac facilisis in", "Morbi leo risus"];
  const listGroup = document.getElementById("dynamic-list-group");

  for (const item of items) {
    const listItem = document.createElement("li");
    listItem.className = "list-group-item";
    listItem.textContent = item;
    listGroup.appendChild(listItem);
  }
</script>

以上是关于 Bootstrap 5 中列表组的详细指南。通过这些示例和技巧，您可以创建出既美观又功能丰富的列表组件。