抽屉 Offcanvas
抽屉是从视口边缘滑入的侧边面板，常用于导航菜单、购物车、筛选器。按钮通过 data-bs-toggle="offcanvas" 触发，面板可从右、左、上、下四个方向滑出。
右侧抽屉（基础）
使用 offcanvas-end 从视口右侧滑出；默认带半透明遮罩，点击遮罩或右上角关闭按钮即可收起。点下面的按钮试试真实滑出。
购物车
抽屉从视口右侧滑出，覆盖在页面内容之上；默认显示半透明背景遮罩。抽屉内部可以放任意 Bootstrap 组件：表单、列表、下拉菜单都可以。
点击右上角的关闭按钮、点击遮罩，或按下 Esc 键，都可以收起这个抽屉。
HTML 示例
左侧抽屉
改用 offcanvas-start 即从视口左侧滑出，是侧边导航菜单最常见的形态。
侧边导航
HTML 示例
顶部抽屉
offcanvas-top 让面板从顶部向下展开，适合放横幅通知、快速登录条等场景。
顶部通知
这个抽屉从视口顶部滑入，高度为 Sass 变量 $offcanvas-vertical-height（默认 30vh）。适合放置全站公告、订阅条或快速操作栏。
HTML 示例
底部抽屉
offcanvas-bottom 从底部向上滑出，类似移动端底部弹层（Action Sheet）。
底部操作
这个抽屉从视口底部向上滑出，常见于移动端的分享面板、筛选面板或底部确认条。
HTML 示例
允许页面滚动
默认打开抽屉时会锁定 <body> 滚动；加上 data-bs-scroll="true"（并关闭遮罩 data-bs-backdrop="false"）后，抽屉打开时页面仍可滚动。
带页面滚动的抽屉
打开这个抽屉后，试着滚动本页其余内容——页面依然可以滚动，且没有遮罩挡在内容上。
如果希望保留遮罩同时允许滚动，只去掉 data-bs-backdrop="false" 即可。
HTML 示例