在Bootstrap 4中，列表组（List Group）是一种用于显示列表信息的灵活组件。以下是一个简单的例子，演示如何创建一个基本的列表组：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <title>Bootstrap 4 列表组</title>
</head>
<body>

<div class="container mt-4">
  <h2>列表组示例</h2>

  <!-- 基本列表组 -->
  <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>

  <!-- 带链接的列表组 -->
  <div class="list-group mt-3">
    <a href="#" class="list-group-item list-group-item-action">Link Item 1</a>
    <a href="#" class="list-group-item list-group-item-action">Link Item 2</a>
    <a href="#" class="list-group-item list-group-item-action">Link Item 3</a>
  </div>

  <!-- 带图标的列表组 -->
  <ul class="list-group mt-3">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Item 1
      <span class="badge badge-primary badge-pill">5</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Item 2
      <span class="badge badge-primary badge-pill">8</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Item 3
      <span class="badge badge-primary badge-pill">2</span>
    </li>
  </ul>

</div>

<!-- Bootstrap JavaScript 和 jQuery（可选）-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>

在这个例子中，我们使用了list-group类来创建列表组。列表组可以包含普通的列表项，也可以包含链接项（list-group-item-action类），以及带有图标和徽章的列表项。你可以根据需要自定义样式和内容。这只是一个简单的示例，你可以根据实际需求进行定制。


转载请注明出处：http://www.zyzy.cn/article/detail/5494/Bootstrap