Bootstrap4 折叠组件详解

最新推荐文章于 2025-02-12 06:11:02 发布

原创最新推荐文章于 2025-02-12 06:11:02 发布 · 348 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

Bootstrap4 折叠组件详解

Bootstrap 4 是一个流行的前端框架，它提供了一系列的组件来帮助开发者快速构建响应式网站。其中，折叠组件（Collapse）是一个非常有用的功能，它允许用户通过点击来展开或折叠内容。本文将详细介绍 Bootstrap 4 的折叠组件，包括其基本用法、属性、方法和注意事项。

基本用法

要使用 Bootstrap 4 的折叠组件，首先需要在 HTML 文件中引入 Bootstrap 的 CSS 和 JS 文件。以下是基本的折叠组件结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap4 折叠组件示例</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    点击我
  </button>
  <div class="collapse" id="collapseExample">
    <div class="card card-body">
      这里是折叠内容...
    </div>
  </div>
</div>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个按钮和一个折叠区域。当用户点击按钮时，折叠区域会展开或折叠。