offcanvas宽度只能用--bs-offcanvas-width变量设置，禁用width/max-width；动画依赖js类切换驱动，需同步修改css transition与js初始化参数；图标模式须重置padding和居中；关闭按钮必须含data-bs-dismiss="offcanvas"。
Offcanvas宽度只能用--bs-offcanvas-width变量改，别碰width或max-width
硬写width: 280px或max-width: 280px会破坏动画逻辑，尤其在 Safari 下出现滑入抖动、遮罩错位。Bootstrap 5 的 offcanvas 动画依赖该 CSS 变量驱动 transform 和定位计算，直接覆盖 width 会让 JS 计算失准。
- 正确方式是通过
style="--bs-offcanvas-width: 280px"内联设置，或定义类如.offcanvas-sidebar { --bs-offcanvas-width: 280px; } - 变量必须加在
.offcanvas元素本身上，父容器或 wrapper 上无效 - 支持
px、rem、vw，但避免用百分比（如80%），它基于视口而非触发上下文，移动端易异常 - 同时加
.offcanvas-start和.offcanvas-end会导致变量被忽略——二者互斥
Offcanvas动画速度不能只调transition-duration，得改 JS 触发节奏
Offcanvas 动画不是纯 CSS 实现，而是由 Bootstrap JS 控制类切换（如 show、offcanvas-start）来驱动 visibility、opacity 和 transform 的组合过渡。你改了 CSS 过渡时长，但 JS 切换时机没同步，就会卡顿或跳变。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 必须同时覆盖三处 CSS：
.offcanvas、.offcanvas.show、.offcanvas.offcanvas-start（或.offcanvas-end）的transition值，例如：.offcanvas, .offcanvas.show, .offcanvas.offcanvas-start { transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out; } - JS 层需同步调整：HTML 中设
data-bs-show="true"不行，得靠初始化时传{ backdrop: true, keyboard: true, scroll: false }等参数；若要控制“打开/关闭”节奏，本质是控制show()/hide()调用时机，而不是改动画本身 - 没有类似轮播图的
data-bs-interval那样的内置延时控制项——offcanvas 的动画时长完全由 CSStransition决定，JS 不插手帧级调度
图标模式侧边栏的 padding 和居中必须手动重置
当把 offcanvas 宽度压到 80px 做图标导航时，.list-group-item 或 .nav-link 默认的 padding: 0.5rem 1rem 和 line-height: 1.6 会让图标上下空隙过大、点击区域偏小、视觉松散。
- 必须显式覆盖样式，例如：
.sidebar-icon-item { padding: 0.75rem 0; display: flex; align-items: center; justify-content: center; text-align: center; } - 用
flex + align-items: center居中比靠line-height更稳定，尤其在不同字体或图标尺寸下 - 如果用 Font Awesome，务必加
fa-fw类，否则图标宽度不一，列表项会左右晃动 - 统一用
fs-4（Bootstrap 5.3+）或font-size: 1.25rem控制图标大小，混用text-lg或h5会导致高度不一致
关闭按钮必须含data-bs-dismiss="offcanvas"，不是靠aria-label
很多开发者以为放个 <button aria-label="Close"></button> 就能关 offcanvas，结果点了没反应——关闭行为完全由 Bootstrap JS 通过 data-bs-dismiss="offcanvas" 识别并销毁实例，aria-label 仅用于无障碍读取，不触发逻辑。
- 关闭按钮必须同时满足：有
type="button"（防表单提交）、含data-bs-dismiss="offcanvas"、且位于.offcanvas内部 - 如果 offcanvas 是动态插入的（比如通过 JS 拼 HTML），确保在插入后调用
new bootstrap.Offcanvas(element)初始化，否则data-bs-dismiss不生效 - 不要给关闭按钮加
onclick="..."手动调hide()，这绕过 Bootstrap 的焦点管理与 backdrop 清理逻辑，可能导致键盘 tab 陷在关闭状态里出不来
data-bs-dismiss 是唯一有效触发器——这两点错一个，整个组件就“半瘫”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
