Bootstrap虽无现成帮助中心模板，但可用Accordion做FAQ（需完整结构）、Nav+Tab分类导航（注意激活态与响应式）、Fuse.js实现静态搜索、offcanvas处理移动端目录，核心在于内容组织与交互逻辑。
Bootstrap 本身不提供“帮助中心页”的现成模板，但用它的组件能快速搭出结构清晰、响应式、可维护的帮助页面——关键不在“用没用 Bootstrap”，而在怎么组织内容层级和交互逻辑。
用 Accordion 实现可折叠的常见问题（FAQ）
帮助页最常被点击的部分是 FAQ，Accordion 是 Bootstrap 5+ 的标准解法，比手写 collapse 更语义化、更易控制单开/多开。
- 默认是单开模式（一次只展开一个），如果要允许多个同时展开，得删掉
data-bs-parent属性，或把它指向一个不存在的容器 - 每个
accordion-item必须包含accordion-header和accordion-body，漏掉任一都会导致 JS 初始化失败，控制台报Cannot read properties of null - 别在
accordion-body里直接塞大段富文本；先用控制段间距，否则行高和 padding 容易打架<div class="accordion" id="faqAccordion"> <div class="accordion-item"> <h3 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1"> 如何重置密码？ </button> </h3> <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> <div class="accordion-body"> 进入登录页 → 点击“忘记密码” → 输入注册邮箱 → 查收邮件中的重置链接。 </div> </div> </div> </div>用
Nav + Tab分类文档导航（不是所有帮助页都需要）当帮助内容明显分块（如“API 文档”“安装指南”“错误码说明”），用
Nav配合Tab比堆砌卡片更节省垂直空间，也符合用户心智模型。- 必须确保每个
nav-link的data-bs-target和对应tab-pane的id完全一致，大小写和连字符都不能错 - 首次加载时，要给默认激活的 tab 加上
class="active"，同时对应 pane 加上class="active show"；少一个 class 就会白屏 - 如果分类超过 4 个，横向 nav 会在小屏上溢出，此时应改用
dropdown或切换为垂直堆叠布局（加flex-column）
搜索框别只靠
form-control，得接真实逻辑Bootstrap 的
form-control只负责样式，帮助页的搜索几乎都得对接后端 API 或前端静态索引（如 Fuse.js）。光放个带放大镜图标的输入框，用户点进去会发现没反应。- 不要用
依赖浏览器原生搜索，它不支持关键词高亮、模糊匹配、权重排序 - 如果文档是纯静态 HTML，推荐用
fuse.js做客户端搜索：预加载所有h2标题和相邻段落，构建索引，响应速度比发请求快得多 - 搜索结果页若复用同一套 CSS，注意
.list-group-item默认没有 hover 背景色，得手动加bg-light或自定义:hover
移动端折叠侧边栏时，
offcanvas比collapse更合适帮助中心常有左侧目录树（ToC），桌面端显示，移动端隐藏——用
offcanvas而非collapse，是因为前者自带 backdrop、键盘关闭、滑动动画，且不会撑开父容器高度。- 触发按钮必须带
data-bs-toggle="offcanvas"和data-bs-target="#tocCanvas"，目标offcanvas元素需有对应id - 别忘了在
offcanvas内部加，否则无法关闭 - 如果 ToC 条目很多，建议在 offcanvas 内部加
data-bs-spy="scroll"实现滚动锚点高亮，但得手动初始化：new bootstrap.ScrollSpy(document.body, {...})
真正卡住人的从来不是“怎么画出那个样式”，而是“用户搜不到答案时会不会放弃”“点击展开后内容是否对齐”“小屏下目录是否可触达”。Bootstrap 提供的是积木，不是图纸。
- 必须确保每个
