正文

学会Bootstrap：轻松实现UL列表折叠与展开效果

/0 浏览量
0407

Bootstrap 是一个流行的前端框架，它提供了许多实用的组件和工具，可以帮助开发者快速构建响应式网页。其中，Bootstrap 的 collapse 组件可以轻松实现 UL 列表的折叠与展开效果。下面，我将详细讲解如何使用 Bootstrap 实现这一功能。

1. 准备工作

在开始之前，请确保你的项目中已经引入了 Bootstrap 的 CSS 和 JS 文件。你可以从 Bootstrap 官网下载最新版本的 Bootstrap，或者使用 CDN 链接。

<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<!-- 引入 Bootstrap JS 和依赖的 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

2. 创建 UL 列表

首先，创建一个 UL 列表，并为每个列表项添加一个按钮，用于触发折叠与展开效果。

<ul class="list-group">
  <li class="list-group-item">
    <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapse1">折叠/展开 1</button>
    <div class="collapse" id="collapse1">
      <div class="card card-body">
        这是折叠/展开 1 的内容。
      </div>
    </div>
  </li>
  <li class="list-group-item">
    <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapse2">折叠/展开 2</button>
    <div class="collapse" id="collapse2">
      <div class="card card-body">
        这是折叠/展开 2 的内容。
      </div>
    </div>
  </li>
  <!-- ... 其他列表项 ... -->
</ul>

3. 设置折叠与展开效果

在上面的代码中，我们使用了 data-bs-toggle="collapse" 属性来指定触发折叠与展开效果的按钮，以及 data-bs-target="#collapseX" 属性来指定要折叠/展开的元素。

Bootstrap 会自动为折叠元素添加 collapse 类，并为其子元素添加 collapse-show 类，以实现折叠与展开效果。

4. 代码示例

以下是一个完整的代码示例，展示了如何使用 Bootstrap 实现 UL 列表的折叠与展开效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 列表折叠与展开</title>
  <!-- 引入 Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
  <ul class="list-group">
    <li class="list-group-item">
      <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapse1">折叠/展开 1</button>
      <div class="collapse" id="collapse1">
        <div class="card card-body">
          这是折叠/展开 1 的内容。
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapse2">折叠/展开 2</button>
      <div class="collapse" id="collapse2">
        <div class="card card-body">
          这是折叠/展开 2 的内容。
        </div>
      </div>
    </li>
    <!-- ... 其他列表项 ... -->
  </ul>

  <!-- 引入 Bootstrap JS 和依赖的 Popper.js -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

通过以上步骤，你就可以轻松地使用 Bootstrap 实现 UL 列表的折叠与展开效果了。希望这篇文章能帮助你更好地掌握 Bootstrap 的技巧。

-- 展开阅读全文 --