应使用 Bootstrap 5.2+ 的 offcanvas 组件实现抽屉菜单，因其专为侧边/底部抽屉设计，支持位移动画、ESC关闭、焦点管理及 data-bs-breakpoint 响应式控制；禁用 modal 或 collapse 替代。
抽屉菜单用 offcanvas，不是 modal 或 collapse
Bootstrap 5.2+ 内置了 offcanvas 组件，专为侧边/底部抽屉设计，自带关闭逻辑和响应式断点控制。别再用 modal 硬改——它没有 offcanvas 的位移动画、键盘关闭（ESC）、焦点管理，也不支持 data-bs-breakpoint 响应式切换。用错组件会导致移动端点击穿透、焦点丢失、关闭按钮失效。
关键点：
-
offcanvas默认只在小屏（sm及以下）激活；加data-bs-breakpoint="md"可让抽屉在中屏及以上也隐藏（即仅在md以下显示） - 关闭按钮必须是
data-bs-dismiss="offcanvas"，且需在.offcanvas容器内——放外面无效 -
offcanvas不会自动阻止 body 滚动，需手动加data-bs-scroll="true"才允许内容滚动
关闭按钮要放在正确位置，且不能缺失 aria-label
常见错误：把关闭按钮放在 .offcanvas-header 外、或用 × 字符代替语义化标签，导致屏幕阅读器无法识别、键盘用户无法聚焦关闭。
正确写法：
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar">
<div class="offcanvas-header">
<h5 class="offcanvas-title">菜单</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="关闭"></button>
</div>
<div class="offcanvas-body">
<nav>...</nav>
</div>
</div>
注意：
-
btn-close必须带data-bs-dismiss="offcanvas"，否则点击无反应 -
aria-label不可省略，否则 WCAG 无障碍失败 - 如果自定义关闭图标（比如用 Font Awesome），得手动绑定
click事件调用Offcanvas.getInstance(el).hide()
响应式控制靠 data-bs-breakpoint，不是媒体查询硬写
想让抽屉只在手机上出现、平板以上自动转为常驻侧边栏？别自己写 CSS 媒体查询覆盖 offcanvas 的 transform——Bootstrap 提供了原生方案。
做法很简单：
- 加
data-bs-breakpoint="md"到.offcanvas元素上 → 在md（768px）及以上宽度时，抽屉自动变为静态显示（position: static），不再需要 toggle - 配合
.offcanvas-md类可实现“仅在 md 断点启用抽屉”，避免小屏和大屏都用同一套逻辑 - 注意：断点值必须是 Bootstrap 已定义的（
sm/md/lg/xl/xxl），写tablet或数字会失效
示例：
<div class="offcanvas offcanvas-start offcanvas-md" data-bs-breakpoint="md" id="sidebar">
这样在 md 及以上，它就变成普通 div，你可以用 col-md-3 控制宽度，无需 JS 切换类名。
JS 初始化不是必须的，但动态控制得用 Offcanvas 实例
HTML 中声明 data-bs-toggle="offcanvas" 就能触发，不用手写 JS。但如果你需要程序化控制（比如用户登录后自动展开、或点击导航项后关闭），就得用 JS API。
常用操作：
- 获取实例：
const oc = Offcanvas.getInstance(document.getElementById('sidebar')) - 手动打开：
oc.show()；关闭：oc.hide() - 监听事件：
document.addEventListener('shown.bs.offcanvas', () => {...})—— 注意事件名是shown.bs.offcanvas，不是show - 多个抽屉共存时，确保每个
id唯一，否则getInstance返回null
容易忽略的一点：如果抽屉里有表单或输入框，hide() 会清空焦点，但不会重置表单状态——需要自己监听 hidden.bs.offcanvas 事件来 reset() 表单。
