form-control 是 Bootstrap 中用于统一美化表单元素的基础 CSS 类，支持 input、textarea、select 等，提供 100% 宽度、圆角边框、聚焦高亮、响应式适配等功能，配合 form-group 使用更规范。
form-control 是 Bootstrap 里最基础也最常用的表单控件样式类，它不改变 HTML 结构，只通过 CSS 统一美化 、、 等原生元素，让它们在不同浏览器和设备上保持一致的外观与交互体验。
核心作用：
- 宽度默认 100%（需父容器有明确宽度）
- 浅灰边框（#ced4da）、4px 圆角、轻微阴影
- 聚焦时边框变蓝（#86b7fe）、阴影加深
- 占位符文字颜色为 #6c757d，字体大小适中
- 响应式适配，配合网格系统可灵活布局
基本用法：
直接给表单控件添加 class="form-control" 即可生效。不需要额外 wrapper 或 JS。
<input type="text" class="form-control" placeholder="请输入用户名"><textarea class="form-control" rows="3" placeholder="请输入留言"></textarea><select class="form-control"><option>请选择省份</option> <option>广东</option> <option>浙江</option></select>
搭配 form-group 提升可读性与间距：form-group 不是必须的，但强烈建议包裹每组「标签 + 控件」，它提供上下 margin、语义清晰，且是 Bootstrap 表单布局的事实标准。
<div class="form-group"> <label for="email">邮箱地址</label> <input type="email" class="form-control" id="email" placeholder="name@example.com"> </div>
支持多种 input type，自动适配：
Bootstrap 会根据 type 属性优化表现，比如：
-
type="email"触发邮箱格式校验（浏览器原生） -
type="number"弹出数字键盘（移动端） -
type="date"/time/search等均有对应 UI 反馈
所有类型都兼容form-control类，无需额外处理。
尺寸控制：
通过追加 .form-control-lg 或 .form-control-sm 调整高度与内边距：
<input type="text" class="form-control form-control-lg" placeholder="大号输入框"><input type="text" class="form-control form-control-sm" placeholder="小号输入框">
只读与禁用状态：
- 只读：加
readonly属性，样式微调（背景变浅、光标禁用） - 禁用：加
disabled属性，控件变灰、不可交互
<input type="text" class="form-control" value="不可编辑" readonly><input type="text" class="form-control" disabled value="已禁用">
注意事项：
-
使用form-control即可，无需.custom-select（后者是自定义下拉箭头的替代方案） -
推荐用.form-control-file（Bootstrap 4）或.form-control（Bootstrap 5+ 已统一） - 避免对
form-control元素设置固定宽高或display: inline-block，会破坏 100% 宽度逻辑 - 若嵌入
input-group（如带前后缀），form-control仍要保留，它是样式基础
基本上就这些。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
