Bootstrap实现带关闭按钮的响应式抽屉菜单

在Bootstrap 5.2及以上版本中，实现抽屉菜单最正确的方式是使用 offcanvas 组件。该组件专门为侧边或底部抽屉场景设计，自带关闭逻辑、响应式断点控制，并支持位移动画和键盘管理。不建议使用 modal 组件进行修改，因为 modal 缺乏 offcanvas 的位移动画效果，且 ESC 关闭和焦点管理不可靠，更不支持 data-bs-breakpoint 的响应式切换。选错组件会导致移动端点击穿透、焦点丢失、关闭按钮失灵等问题。

为什么必须用 offcanvas？

几个关键点值得注意：

• offcanvas 默认只在小屏（sm 及以下）激活。加上 data-bs-breakpoint="md" 后，抽屉在中屏及以上也会隐藏，即仅在 md 以下显示。
• 关闭按钮必须使用 data-bs-dismiss="offcanvas"，并放置在 .offcanvas 容器内部——放在外面点击无反应。
• offcanvas 不会自动阻止 body 滚动，需要手动添加 data-bs-scroll="true" 才能让内容滚动。

关闭按钮的位置至关重要

常见错误是将关闭按钮放在 .offcanvas-header 外部，或直接用 × 字符代替语义化标签。这会导致屏幕阅读器无法识别，键盘用户也无法聚焦到关闭按钮上。

正确写法如下：

  

    
菜单
    
  
  

    ...
  

需要注意以下几点：

• btn-close 必须带有 data-bs-dismiss="offcanvas"，否则点击无反应。
• aria-label 不可省略，否则 WCAG 无障碍测试会失败。
• 若使用自定义关闭图标（如 Font Awesome 图标），需手动绑定 click 事件，调用 Offcanvas.getInstance(el).hide() 来关闭。

响应式控制：data-bs-breakpoint 是最佳方案

如果希望抽屉只在手机上出现，平板上直接变为常驻侧边栏，无需自行编写 CSS 媒体查询覆盖 offcanvas 的 transform 属性——Bootstrap 已提供原生方案。

具体做法：

• 在 .offcanvas 元素上添加 data-bs-breakpoint="md"，这样在 md（768px）及以上宽度时，抽屉自动变为静态显示（position: static），无需手动 toggle。
• 配合 .offcanvas-md 类，可实现“仅在 md 断点启用抽屉”，避免小屏和大屏使用同一套逻辑。
• 注意：断点值必须是 Bootstrap 已定义的（sm、md、lg、xl、xxl），使用 tablet 或数字会直接失效。

示例：

这样在 md 及以上宽度，它变成普通 div，可直接用 col-md-3 控制宽度，无需 JS 切换类名。
JS 初始化并非必需，但动态控制依赖它
在 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() 来重置表单。