并非如此。Bootstrap 5.3 及以上版本已彻底移除 data-bs-loading-text 和 jQuery 依赖，过去那种 $(this).button('loading') 的写法已经不再适用。如今要实现按钮加载状态，你需要手动完成三个步骤：添加 disabled 属性、替换按钮文字、再嵌入一个 spinner。同时必须同步处理颜色、大小、圆角、阴影——所有状态都要保持一致，缺少任何一个用户都能察觉到样式跳动。
加载状态按钮的 HTML 结构是否必须使用 data-bs-loading-text？
不需要。Bootstrap 5.3+ 已移除 data-loading-text 和 jQuery 插件依赖，不再支持 $(this).button('loading') 这类 JavaScript 控制方式。现在加载状态完全依靠手动切换 class 来实现——你必须自己添加 disabled 属性、修改文字，再套一个 spinner。
常见错误是参照 Bootstrap 4 文档写入 data-loading-text，结果没有任何效果。浏览器控制台不会报错，但 DOM 中根本无反应。
- 必须显式添加
disabled属性：否则按钮仍然可点击，破坏状态一致性 - 文字需要手动替换，例如把“提交”改为“提交中…”或留空
- spinner 必须使用
.spinner-border或.spinner-grow，并且要与按钮同级或嵌套在 button 内部
.spinner-border 颜色为何总是灰色？
因为 spinner 默认采用 currentColor，而按钮上没有设置明确的文字颜色（color），它就会继承父元素的默认灰色（通常是 #212529）。这不是颜色变量未生效，而是颜色链路中断了。
解决办法不是硬编码 color: #0d6efd，而是复用 Bootstrap 的语义色类：
- 给 button 添加
text-primary，spinner 就会自动变为蓝色 - 添加
text-success，spinner 变绿；text-danger变红 - 如果按钮本身使用了
.btn-outline-primary，文字色是蓝色但背景透明，此时 spinner 颜色正确，但可能对比度不足——需要额外加text-primary强制指定
自定义 spinner 大小和动画时容易遗漏哪些细节？
直接修改 .spinner-border 的 width/height 很简单，但以下三点常被忽略：
vertical-align必须同步调整：默认值是text-bottom，放大后如果不改成middle或sub，会与文字错位border-width需要按比例缩放：原生0.25em在 1.5rem 按钮里显得太细，建议设为0.125em或固定2px@keyframes动画名不能冲突：如果你的项目中已有spinner-border动画，自定义时需重命名（例如my-spinner-border），否则会被覆盖
如何让加载态按钮保持圆角和阴影？
默认 spinner 是 inline 元素，没有 border-radius 和 box-shadow。按钮本身的圆角和阴影也不会“传递”给 spinner。必须手动补充：
- 给 spinner 容器（比如
）添加border-radius: var(--bs-btn-border-radius)，复用 Bootstrap 变量 - 使用
box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.25)模拟内发光，避免外阴影干扰布局 - 禁用态下的文字颜色常被忽略：
.btn:disabled .spinner-border需要单独设置color，否则 spinner 在.btn-secondary:disabled下会发灰看不清
真正麻烦的不是写几行 CSS，而是所有状态都要对齐：正常态、悬停态、禁用态、加载态下的圆角、阴影、文字色、spinner 颜色、动画速度——遗漏一个，用户点击一次就能看到样式跳动。
