必须给按钮设position: relative和overflow: hidden，spinner用absolute居中，尺寸用em单位（如1.5em），文字用visibility: hidden保留占位，禁用按钮需同步disabled、隐藏文字、插入spinner。
怎么让 spinner-border 在按钮里不跳动
直接往 button 里加 spinner-border，文字上移、按钮高度突变，是因为它默认是行内元素，参与流式布局。必须用绝对定位把它“盖”在文字上，而不是“挤”进去。
- 给按钮加
position: relative和overflow: hidden -
spinner-border元素设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 尺寸用
em单位（如width: 1.5em; height: 1.5em），随按钮字号缩放，避免px硬编码错位 - 原始文字别用
display: none，改用visibility: hidden或opacity: 0，保留占位防宽度塌缩
为什么自己写的 @keyframes 动画不生效
Bootstrap 5+ 的 .progress-bar、.spinner-border 等类默认不带 animation 声明，只靠 transition 做状态变化。你写了 @keyframes，但没显式挂到元素上，浏览器根本不会播。
- 必须手动给目标元素加
animation属性，例如：.progress-bar { animation: progress-bar-stripes 1s linear infinite; } - 选择器权重要足够：你的 CSS 必须在 Bootstrap 样式之后加载，否则会被覆盖
- 确保
background-size和animation位移值匹配，比如background-size: 1rem 1rem就配background-position: 1rem 1rem - 别忘了设
height和overflow: hidden，否则动画可能溢出或不可见
如何适配不同按钮尺寸的 loading 图标
spinner-border-sm 有，但 spinner-border-lg 不存在——Bootstrap 5 没提供这个类。强行写会失效，必须手动调尺寸。
- 对
btn-lg，推荐内联样式：style="width: 1.5rem; height: 1.5rem; border-width: 0.1875rem;" - 放大时务必同步调
border-width，否则旋转边缘虚、抖动；4rem 尺寸建议配border-width: 0.5rem - 避免用
transform: scale()整体缩放，会导致点击区域偏移、父容器布局错乱 - 居中优先用
text-center（行内）或d-flex justify-content-center align-items-center（块级），别依赖margin: auto
Modal 显示时加自定义入场动画为什么不动
Bootstrap Modal 的显示逻辑是 JS 加 .show 类 → 浏览器触发 CSS transition → 动画播放。你加了 animate__bounceIn 这类第三方动画类，但 Bootstrap 不会自动帮你加/删它，自然不播。
立即学习“前端免费学习笔记（深入）”；
- HTML 中必须保留
fade类：<div class="modal fade">，否则 transition 不触发 - 监听
shown.bs.modal事件，在回调里手动加你的动画类：modalEl.classList.add('animate__bounceIn') - 监听
hide.bs.modal或hidden.bs.modal，及时清理动画类，否则第二次打开失效 - 真正有效的动画作用点只有
.modal.fade .modal-dialog，其他地方加transition或animation都无效
fade 类、没监听事件、CSS 加载顺序错了，都会让动画彻底静音。 
