Bootstrap Collapse 组件通过 HTML 属性（data-bs-toggle、data-bs-target）和 class="collapse" 实现展开/收起，配合卡片优化视觉，支持独立折叠与手风琴效果。
Bootstrap 的 collapse 组件让内容展开/收起变得简单直接，核心是 HTML 结构 + 属性绑定 + 少量 CSS 类，不需要手写 JavaScript 动画逻辑。
基础结构与触发方式
折叠效果依赖两个关键部分：触发器（按钮或链接）和被控制的内容容器。
- 触发器必须添加 data-bs-toggle="collapse" 和 data-bs-target（值为对应内容的 ID，如
#myCollapse） - 被折叠的内容容器需有 class="collapse"，并设置唯一 id 与 data-bs-target 匹配
- 推荐用
<button></button>触发；若用链接，需加role="button"保证语义正确 -
aria-expanded="false"表示默认收起，aria-controls="myCollapse"告诉屏幕阅读器它控制哪个元素
让内容显示更自然美观
单纯 class="collapse" 只做显隐，视觉上可能突兀。建议配合 Bootstrap 卡片类增强体验：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 把内容包在
<div class="card card-body"></div>内，自带内边距和圆角 - 避免在
.collapse元素上直接设padding—— Collapse 动画基于 height，padding 会干扰过渡；应放在内部卡片或子容器里 - 如需初始就展开，给内容容器加
class="collapse show"
多个独立折叠项共存
同一页面多个折叠区域互不干扰，只需确保每个都有唯一 ID 和对应的 data-bs-target：
立即学习“前端免费学习笔记（深入）”；
- 每个
.collapse容器用不同 id，比如id="faq1"、id="faq2" - 对应按钮分别写
data-bs-target="#faq1"、data-bs-target="#faq2" - 如果它们排在同一行（如卡片网格），注意外层 Flex 容器不要设
align-items: stretch，否则展开时高度会被拉齐；可加align-self: flex-start保持各自高度独立
实现手风琴（Accordion）效果
要让多个折叠项中最多只展开一个，用 data-bs-parent 属性统一管理：
- 把所有
.collapse项包裹在一个共同父容器中（如<div id="accordion">） <li>每个触发按钮加上 <code>data-bs-parent="#accordion" - 这样点击任一项目时，其他已展开的会自动收起，无需额外 JS
