bootstrap 4需轻量补丁实现material design效果，因原生不支持浮动标签等；旧插件兼容性差，主因bs4修改了form-control的padding和border-radius；手动实现需md-input-container结构、:placeholder-shown伪类及transform动画，并覆盖focus样式。
Bootstrap 4 本身不带 Material Design 浮动标签、波纹点击、输入框聚焦高亮等效果，但不用重写整套 UI，用轻量级 JS + CSS 补丁就能逼近官方 Material Design 表单体验。
material-design-bootstrap 插件的兼容性陷阱
网上搜到的 material-design-bootstrap（如 jsoncode.github.io/mat）多数基于 Bootstrap 3 或早期 BS4 alpha 版，直接用于正式版 BS4 会出问题：浮动标签错位、form-control 高度不匹配、input-group 内部样式冲突。关键原因是 BS4 把 form-control 的 padding 和 border-radius 值改了，而老插件仍按 BS3 的 6px 圆角和 6px 内边距计算标签偏移。
- 检查你引入的 JS 是否调用了
$(...).material()或监听了focusin/focusout—— 如果有，先确认它是否适配 BS4 的form-control-lg/sm变体 - 浮动标签的 DOM 结构必须是
<div class="md-form"> <input><label></label> </div>，BS4 原生form-group不识别该结构 - 避免混用
form-control和插件要求的md-form类——二者 CSS 规则会互相覆盖
手动实现浮动标签（无依赖）
不需要 jQuery 插件，纯 CSS + 少量 JS 就能搞定核心交互。重点在于：标签默认绝对定位在 input 上方，input 有值或获得焦点时，标签上移并缩小字号。
- HTML 必须让
label紧跟input，且都包裹在相对定位容器里：<div class="md-input-container"> <input type="text" id="name"><label for="name">姓名</label> </div> - CSS 中用
:placeholder-shown:not(:focus)判断空值状态，比监听 JS 事件更轻量；但注意 Safari 11.1+ 才完全支持该伪类 - 标签上移动画要加
transform: translateY(-24px) scale(0.75)，不能只靠top，否则会触发重排 - BS4 的
form-control:focus默认有box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25)，Material 要求改成单色下划线，需覆盖box-shadow并加border-bottom: 2px solid #2196F3
波纹点击效果（materialDesign 属性失效时）
原生 materialDesign 属性方案在 BS4 中常因事件委托失效——比如按钮在 modal 里动态插入，或用了 data-toggle="collapse"，click 事件没被正确捕获。
- 改用事件代理绑定到
document，过滤选择器：document.addEventListener('click', e => { if (e.target.matches('[data-material-ripple]')) { ... } }) - 波纹元素
.animate-hand的position: absolute必须相对于其父容器（如.btn），所以父容器要加position: relative，BS4 的.btn默认是static - 不要用
e.pageX/e.pageY计算坐标——当按钮在滚动区域里，且页面已滚动时，会偏移；改用e.clientX - e.target.getBoundingClientRect().left - 动画结束后记得清理 DOM：
div.classList.remove('animate'); setTimeout(() => div.remove(), 500);，否则内存泄漏
真正难的不是加特效，而是让浮动标签在 input-group、form-check、禁用态、IE11 下都不崩。这些边界 case 往往要靠强制重绘或兜底 JS 检测，而不是堆 CSS。
