原生 Bootstrap 按钮无波纹效果，因其仅提供基础样式与状态，未集成 Material Design 所需的 JavaScript 动态波纹逻辑。
为什么原生 Bootstrap 按钮没有波纹效果
因为 Bootstrap 默认不包含 Material Design 的 ripple 交互逻辑，它的 btn 类只负责样式和基础状态（:hover、:active），没有在点击位置动态生成圆形扩散的 span 元素。Material Design 规范要求波纹从点击坐标中心向外渐变展开，这必须靠 JavaScript 实时捕获 mousedown 事件并计算偏移量——原生 Bootstrap 不做这事。
常见错误是直接给按钮加 transition: all 0.3s 或用伪元素模拟，结果波纹不居中、不随点击位置变化，或者在移动端触发错乱。
用纯 CSS + JS 手动实现波纹层（兼容 Bootstrap 5）
核心思路：监听 mousedown（不是 click，因需即时响应），在按钮内部动态插入一个 span 作为波纹载体，用 getBoundingClientRect() 算出点击点相对于按钮左上角的坐标，再设为 left/top，最后用 transform: scale() 和 opacity 动画收尾。
- 必须用
mousedown+mouseup配合清理，否则快速连点会残留多个波纹 - 波纹
span要设pointer-events: none，避免遮挡后续点击 - Bootstrap 5 按钮默认有
position: relative，可直接定位子元素；若用btn-group或自定义布局，需确认父容器有定位上下文 - 示例代码中波纹最大直径取按钮宽高较大值的 2 倍，确保全覆盖：
const diameter = Math.max(btn.clientWidth, btn.clientHeight) * 2;
避免移动端点击延迟和误触发
在 iOS Safari 和部分安卓浏览器中，mousedown 可能延迟约 300ms，或在滚动后失效。不能依赖 touchstart 单独处理，必须同时监听两个事件并去重。
- 用
event.touches?.[0]取触点坐标，fallback 到event.clientX/clientY - 给按钮加
data-ripple="true"属性做开关，方便局部禁用（比如带下拉菜单的btn-dropdown） - 添加节流判断：同一帧内重复触发
mousedown直接 return，防止快速点击生成多个波纹层 - 动画结束用
transitionend清理 DOM，不要用固定延时（如setTimeout(..., 600)），因用户可能改了 CSStransition-duration）
与 Bootstrap 的 disabled 状态协同
当按钮有 disabled 属性或 disabled 类时，波纹必须完全禁用——不仅是视觉隐藏，更要阻止事件绑定。否则键盘用户按空格键仍可能触发波纹（button[disabled] 本身会忽略 click，但 mousedown 不一定）。
- 初始化时检查
btn.hasAttribute('disabled') || btn.classList.contains('disabled') - 在事件监听器开头加守卫：
if (btn.disabled || btn.classList.contains('disabled')) return; - 注意 Bootstrap 5 中
.disabled是纯样式类，不带disabled属性，所以两者都要判
真正难的是让波纹尺寸、颜色、持续时间能随 Bootstrap 主题变量（如 $primary）自动适配——这需要把波纹 background-color 提到 CSS 自定义属性里，再用 JS 注入，否则换主题就得硬编码改 JS。
