Bootstrap multiple div折叠

Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以快速构建响应式的网页和应用程序。在Bootstrap中，可以使用Collapse组件来实现多个div的折叠效果。

折叠是指将一组内容隐藏起来，只显示摘要或标题，用户可以点击摘要或标题来展开或收起内容。Bootstrap的Collapse组件可以实现这一功能。

要使用Bootstrap的Collapse组件实现多个div的折叠效果，需要按照以下步骤进行操作：

引入Bootstrap的CSS和JS文件。可以通过CDN链接或下载本地文件的方式引入。
在HTML中创建需要折叠的div元素，并为每个div添加一个唯一的ID。
在需要触发折叠的元素（例如按钮或链接）上添加data-toggle="collapse"属性，并将其data-target属性设置为对应的折叠div的ID。
可选地，可以为折叠div添加一些样式类，例如collapse和show，以控制默认的展开或收起状态。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Multiple Div Collapse</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>

  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#div1">Toggle Div 1</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#div2">Toggle Div 2</button>

  <div id="div1" class="collapse">
    <h3>Div 1 Content</h3>
    <p>This is the content of div 1.</p>
  </div>

  <div id="div2" class="collapse">
    <h3>Div 2 Content</h3>
    <p>This is the content of div 2.</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在上面的示例中，点击"Toggle Div 1"按钮可以展开或收起ID为"div1"的div，点击"Toggle Div 2"按钮可以展开或收起ID为"div2"的div。

推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云对象存储（COS）。