Bootstrap 5 表单应使用 row/col 布局替代已弃用的 form-horizontal，每组用 col-md-3 放 form-label（加 align-self-center 防偏移）、col-md-9 放 form-control；多字段用 accordion 分组；按钮须用 disabled 属性+JS 控制状态；验证需结合 HTML5 属性与 is-invalid 类。
用 Bootstrap 5 的 form-control 和 form-label 搭配 col 布局最稳妥
Bootstrap 5 不再内置 form-horizontal 类，直接靠 row/col 控制标签与输入框对齐。后台配置表单常见「左标签右输入」结构，推荐用 row 包裹每组，col-md-3 放 form-label，col-md-9 放 form-control 或其他控件。
注意：form-label 默认不带 mb-0，若和 form-control 高度不匹配，会出现垂直偏移——加 align-self-center 到 label 更可靠。
- 避免用
float或旧版form-group套路，5.x 已弃用 -
form-select、form-check等需单独包裹在col内，不能直接塞进row - 多行文本用
form-control+rows="4"，别用height强制拉伸，会破坏响应式
配置项类型多时，用 accordion 或 tab 分组比滚动更可控
后台参数常超 20 项，全堆一页既难定位又影响提交前校验体验。Bootstrap 5 原生 accordion 轻量且支持手风琴折叠，比自写 JS 切换 tab 更稳。
关键点：每个 accordion-item 的 id 必须唯一，且 data-bs-target 要精确指向它；若用 tab，必须确保 nav-link 的 href 和 tab-pane 的 id 完全一致，否则点击无反应。
- 不要把
form标签跨多个accordion-item—— 提交时部分字段可能被折叠而丢失值 - 折叠状态下，
form-control仍会参与表单序列化，无需额外处理 - 若某组配置需权限控制（如「高级设置」），直接用
ngIf（Angular）或v-if（Vue）控制整个accordion-item渲染更安全
保存按钮必须禁用状态 + disabled 属性，而非仅靠 CSS
用户狂点「保存」导致重复提交是后台表单高频问题。只加 opacity: 0.6 或 pointer-events: none 是假禁用——绕过样式仍可触发表单提交。
正确做法：点击后立即设 button.disabled = true，同时给 button 加 disabled 属性，并在请求完成（无论成功失败）后恢复。Bootstrap 5 的 btn-primary 在 disabled 下自动降级样式，无需额外类。
- 不要用
onclick="this.disabled=true"写死在 HTML 里，逻辑耦合高且无法恢复 - 若用
fetch或axios，务必在.finally()里恢复按钮状态，否则网络失败后按钮永远卡死 - 禁用期间建议加 loading 文本，比如把
保存换成保存中...，用textContent动态切换
表单验证要混合用 HTML5 属性 + is-invalid 类，别只靠 JS
后台配置多数字段为必填或格式敏感（如 URL、正整数、JSON 字符串），光靠 JS 校验容易漏掉用户未触碰的字段。Bootstrap 5 支持原生 required、type="url"、pattern，配合 :invalid 伪类和 is-invalid 手动标记，能兼顾体验与健壮性。
例如 JSON 字段可先用 type="text" + pattern='^\{.*\}$' 做粗筛，再在提交时用 try/catch JSON.parse() 精判；错误时给对应 form-control 加 is-invalid，并在下方放 <div class="invalid-feedback">JSON 格式错误</div>。
-
is-invalid必须和form-control同级，放在父col内，否则样式错位 - 浏览器原生提示（如「请填写此字段」）无法定制文案，关键字段建议关掉：加
novalidate到form，全由 JS 控制 - 动态添加的配置项（如「+ 添加服务器地址」），新生成的
input需手动调用setCustomValidity('')清除初始无效态
input 的 autofocus 会被浏览器静默忽略。如果首屏默认展开的配置组里有需要聚焦的字段，得在 shown.bs.collapse 事件回调里手动 .focus()。 
