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 的技巧。