Bootstrap 的 .form-control 类可统一 input/select/textarea 样式，.form-floating 实现浮动标签，状态类需与 .form-control 共用，尺寸应优先使用 .form-control-lg/.sm 而非手动调整 height。
直接用 Bootstrap 的 .form-control 类就能统一基础样式
Bootstrap 提供的 .form-control 是最常用、兼容性最好的表单控件基础类，它会自动处理 <input>、<select>、<textarea> 的边框、圆角、内边距、字体大小和行高。只要加上这个类，不同浏览器下默认样式差异就基本消失。
注意：它不适用于 <button> 或自定义组件，且对 type="checkbox" / type="radio" 无效 —— 这两类要用 .form-check 系列类。
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
用 .form-floating 实现浮动标签（避免占位文字遮挡）
原生 placeholder 在用户输入后就消失，无法回溯字段含义；.form-floating 把 <label> 和控件包裹在一起，标签会“浮”在控件上方，既节省空间又提升可访问性。
- 必须按固定结构写：
<div class="form-floating"><input><label>姓名</label></div>，顺序不能错 -
for和id不需要配对，Bootstrap 内部靠 DOM 位置识别 - 不支持
<select multiple>和<textarea>的自动高度适配，后者需手动设rows
状态类要配对使用，否则视觉反馈失效
Bootstrap 表单的状态样式（如错误、成功、禁用）不是独立生效的，得和 .form-control 同时存在才起作用。
立即学习“前端免费学习笔记（深入）”；
- 禁用状态：
<input class="form-control" disabled>—— 单独加disabled属性即可，类名非必需 - 错误状态：
<input class="form-control is-invalid">，同时建议加<div class="invalid-feedback">邮箱格式不对</div> - 只加
is-invalid没加form-control，边框变红但其他样式（圆角、阴影）会丢失 -
is-valid同理，且会覆盖is-invalid，别同时加
自定义尺寸别硬调 height，优先用 .form-control-lg / .form-control-sm
手动改 height 或 font-size 容易破坏垂直居中、行高比例和响应式断点。Bootstrap 提供了两套预设尺寸类：
-
.form-control-lg：增大padding和font-size，适合表单页主入口 -
.form-control-sm：缩小内边距，适合紧凑布局（如筛选栏、工具条） - 它们和
.form-floating可叠加使用，但必须写在后面：class="form-control form-control-lg form-floating" - 如果项目里用了 CSS-in-JS 或 Tailwind，别混用尺寸类——Bootstrap 的
rem基准可能和你项目冲突
真正难搞的是跨框架集成，比如 Vue 组件里套 Bootstrap 表单类，v-model 一绑定，有时候 is-invalid 的切换时机和原生事件节奏对不上，得用 $nextTick 或 watch 手动同步状态。
