Bootstrap 按钮点击波纹效果实现交互动效配置-Bootstrap教程-PHP中文网

bootstrap 5 默认不支持 ripple 效果，需手动添加轻量 js 和 css：为按钮添加 data-ripple 属性，js 计算点击坐标并动态创建 ripple 元素，css 用 transform+opacity 实现动画，注意 position/overflow 设置及 touch/click 双事件适配。

bootstrap 按钮点击波纹效果实现交互动效配置

Bootstrap 5 默认不带 ripple 效果，需手动添加

Bootstrap 5 官方移除了所有 JavaScript 组件的波纹（ripple）点击反馈，btn 类点击时只有 CSS :active 的瞬时变色，没有扩散圆点动画。如果你在 Bootstrap 4 项目里见过 ripple，那是依赖于 bootstrap.js 内置的 data-ripple 行为，但 5.x 已彻底剥离。

要实现它，得自己补一段轻量 JS + 对应 CSS。别引入第三方库（比如 waves.js），容易和 Bootstrap 的 btn 样式冲突，也增加 bundle 体积。

只对带 data-ripple 属性的按钮生效，避免全局污染
用 getBoundingClientRect() 算点击坐标，兼容按钮内含图标或文字换行
动画用 transform: scale() + opacity，不触发布局重排
加 pointer-events: none 到 ripple 元素上，防止遮挡后续点击

如何给单个按钮添加 ripple 动画

在按钮 HTML 上加 data-ripple 属性即可，不需要额外 class：

<button type="button" class="btn btn-primary" data-ripple>提交</button>

对应的 JS 初始化逻辑建议放在 DOMContentLoaded 后执行，且只监听一次（避免重复绑定）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-ripple]').forEach(btn => {
    btn.addEventListener('click', function(e) {
      const rect = this.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const ripple = document.createElement('span');
      ripple.className = 'ripple';
      ripple.style.left = `${x}px`;
      ripple.style.top = `${y}px`;
      this.appendChild(ripple);
      // 动画结束后移除 DOM 节点
      setTimeout(() => ripple.remove(), 600);
    });
  });
});

注意：e.clientX 是视口坐标，必须减去 rect.left/top 才能准确定位到按钮内部
不要用 offsetWidth/Height 计算中心点——按钮可能有 padding、border、字体缩放，中心点不等于视觉焦点
setTimeout 时间设为 600ms，要和 CSS 中 animation-duration 严格一致

配套 CSS 必须包含的关键规则

这段 CSS 要确保加载在 Bootstrap 主样式之后，否则会被覆盖：

.btn[data-ripple] {
  position: relative;
  overflow: hidden;
}
<p>.btn[data-ripple] .ripple {
position: absolute;
border-radius: 100%;
background: rgba(255, 255, 255, 0.6);
width: 10px;
height: 10px;
opacity: 0;
transform: scale(1);
animation: ripple 0.6s linear;
pointer-events: none;
}</p><p>@keyframes ripple {
0% {
transform: scale(0);
opacity: 0.7;
}
100% {
transform: scale(4);
opacity: 0;
}
}</p>

overflow: hidden 是必须的，否则 ripple 圆点会溢出按钮边界
动画结束时 opacity: 0 和 transform: scale(4) 要同步，否则会出现“突然消失”或“卡顿”感
如果按钮是 btn-outline-* 类型，把 background 改成 rgba(0,0,0,0.1) 更协调

移动端 click 延迟与 touch 事件适配

纯用 click 在 iOS Safari 或某些安卓 WebView 里会有约 300ms 延迟，导致 ripple 感觉滞后。应该同时监听 touchstart，并阻止默认行为：

btn.addEventListener('touchstart', function(e) {
  e.preventDefault(); // 防止延迟
  const touch = e.touches[0];
  const rect = this.getBoundingClientRect();
  const x = touch.clientX - rect.left;
  const y = touch.clientY - rect.top;
  const ripple = document.createElement('span');
  ripple.className = 'ripple';
  ripple.style.left = `${x}px`;
  ripple.style.top = `${y}px`;
  this.appendChild(ripple);
  setTimeout(() => ripple.remove(), 600);
});