必须手动控制disabled属性、替换按钮内容，并在finally块中统一恢复——Bootstrap仅提供spinner-border样式，不处理禁用逻辑、无障碍支持及错误后状态还原。
表单提交时如何正确显示 Bootstrap 的 Loading 状态
直接给按钮加 disabled 并换文字是最稳妥的做法，Bootstrap 本身不提供“Loading 组件”，靠的是你控制按钮状态 + 语义化类名（如 btn-primary 配合 disabled 自动变灰）。
常见错误是只改文字不设 disabled，导致用户重复点击；或用 loading 类手动控制样式，但没考虑屏幕阅读器和键盘焦点问题。
- 必须在
submit事件监听里第一时间设置button.disabled = true - 推荐用
button.innerHTML = '提交中...'（Bootstrap 5.3+ 内置 Spinner） - 若用 Bootstrap 4，改用
，并保留aria-busy="true"属性 - 别用
setTimeout模拟请求——真实异步请求（如fetch或axios）结束后才恢复按钮
如何避免异步提交后按钮状态无法还原
失败后按钮卡在 loading 状态，往往是因为 Promise 的 catch 块没重置按钮，或者 finally 被遗漏。
尤其注意：fetch 返回的 Promise 即使 HTTP 状态码是 400/500 也不会 reject，得手动检查 response.ok。
- 务必在
finally块里恢复按钮：button.disabled = false; button.innerHTML = '提交'; - 如果用了
async/await，确保try/catch/finally结构完整，不要只写try/catch - 避免在
then里直接return fetch(...)后就结束——后续链式调用可能丢失finally - 若用 jQuery 的
$.ajax，优先用always()而非complete()（后者在某些版本中不可靠）
为什么用 form.addEventListener('submit', ...) 而不是 button.onclick
因为回车提交、辅助技术触发、或移动端软键盘“发送”键都会触发 submit 事件，但不会触发 click。只监听按钮点击会漏掉大量合法提交路径。
同时，event.preventDefault() 必须在 submit 回调里调用，否则页面会跳转或刷新，Loading 状态瞬间消失。
- 表单必须有
标签包裹，且按钮为type="submit"（不能是button或缺省 type） - 获取按钮推荐用
form.querySelector('[type="submit"]')，而非硬编码 ID —— 更健壮，适配多按钮场景 - 若表单含多个 submit 按钮（如“保存草稿”“正式提交”），需通过
event.submitter判断点击源，并分别控制其状态
加载中 Spinner 不居中或尺寸异常怎么办
Bootstrap 的 .spinner-border 默认是 inline 元素，高度由 font-size 和 line-height 共同决定，容易和按钮内文字不对齐。
最简方案是复用 Bootstrap 已有的垂直对齐工具类，而不是自己写 margin/padding。
- 确保按钮有
position: relative（Bootstrap 按钮默认就有），然后给 Spinner 加position: absolute; top: 50%; transform: translateY(-50%);—— 但更推荐用内置类 - Bootstrap 5 推荐组合：
（align-middle解决基线对齐，me-1提供右侧间距） - 如果按钮文字是中文，
font-size小于 0.875rem 时 Spinner 可能模糊，此时应统一设font-size: 0.875rem或使用spinner-border-sm对应的尺寸 - 禁用状态下 Spinner 仍应可见，所以不要依赖
:disabled伪类隐藏它 —— 它本就是按钮内容的一部分
真正麻烦的不是加个 Spinner，而是保证所有提交入口（回车、语音、快捷键、屏幕阅读器）都走同一套状态逻辑，且失败后可逆。很多人卡在 finally 没写，或者把 loading 状态存在组件 state 里却忘了清空。
