Bootstrap4 列表组学习笔记

什么是列表组？

列表组允许我们将一组相似的内容放置在一个容器中，以便于展示和组织。Bootstrap4 提供了一系列的 CSS 类，用于快速创建并样式化列表组。

如何创建一个列表组？

使用 HTML 元素 <ul> （无序列表）或 <ol> （有序列表）来创建一个列表组。在这些元素中添加类 list-group 即可创建一个基本的列表组。

htmlCopy Code
<ul class="list-group">
  <li class="list-group-item">列表项一</li>
  <li class="list-group-item">列表项二</li>
  <li class="list-group-item">列表项三</li>
</ul>

如何给列表组添加样式？

Bootstrap4 为列表组提供了许多样式类，可供我们使用。以下是一些常见的样式类：

• list-group-item-action：使列表项看起来像链接，可以通过点击或鼠标悬停触发动作。
• list-group-item-danger、list-group-item-success、list-group-item-warning、list-group-item-info：根据内容类型，使用不同的颜色样式来标记列表项。
• list-group-flush：移除列表项之间的边框和内边距，使列表组看起来更紧凑。

以下是一个带有按钮的列表组的示例：

htmlCopy Code
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    列表项一
    <button class="btn btn-primary">按钮</button>
  </li>
  <li class="list-group-item list-group-item-action list-group-item-danger">列表项二</li>
  <li class="list-group-item list-group-item-warning">列表项三</li>
  <li class="list-group-item list-group-item-success">列表项四</li>
  <li class="list-group-item list-group-item-info">列表项五</li>
</ul>

总结

通过使用 Bootstrap4 提供的列表组，我们可以方便地展示和组织内容，并应用样式来使其更加美观。在实际开发中，我们可以根据需要使用不同的样式类来满足不同的需求。