Bootstrap 5 表单知识大全
编程新手必看！大白话详解表单控件、布局与组件
Bootstrap 5 表单让创建美观、响应式的表单变得简单，无需编写繁琐的CSS
表单基础知识
💡 核心概念： Bootstrap 表单由三个主要部分组成：表单控件、表单标签和表单组
1. 基本表单结构
所有表单控件都应该放在 <form> 标签内，并用 .form-group 包裹标签和控件。
ⓘ 小贴士：
.mb-3 表示下边距为1rem（16px），用于在表单项之间创建间隔
2. 表单控件类型
- 文本输入：
<input type="text"> - 电子邮件：
<input type="email"> - 密码输入：
<input type="password"> - 文本区域：
<textarea></textarea> - 下拉选择：
<select><option>...</select>
表单组件详解
1. 复选框和单选按钮
使用 .form-check 包裹复选框或单选按钮组，.form-check-input 用于控件，.form-check-label 用于标签。
2. 开关按钮
将普通的复选框变成开关样式，使用 .form-switch 类。
表单布局技巧
1. 水平表单布局
使用网格系统创建水平排列的表单，标签在左侧，控件在右侧。
ⓘ 小贴士： Bootstrap 的网格系统使用
.row 和 .col-* 类控制布局
2. 内联表单
使用 .row row-cols-lg-auto 让表单元素在一行内显示。
表单验证
Bootstrap 提供内置的表单验证样式，支持客户端验证反馈。
1. 验证状态
- 有效状态：添加
.is-valid类 - 无效状态：添加
.is-invalid类
输入正确！
请输入有效内容
2. 浏览器默认验证
在 <form> 标签添加 .was-validated 类启用浏览器默认验证。
ⓘ 小贴士： 表单验证通常需要结合JavaScript来实现功能
高级表单组件
1. 输入框组
在输入框前后添加文本、按钮或图标，使用 .input-group。
@
.com
金额
元
2. 浮动标签
使用 .form-floating 让标签浮动在输入框上方。
💡 提示： 浮动标签需要输入框有
placeholder 属性，但显示时会被标签覆盖
实用技巧总结
- 所有表单控件都需要
.form-control类 - 使用
.form-label让标签美观 - 使用间距类如
.mb-3控制表单元素间距 - 禁用状态：添加
disabled属性 - 只读状态：添加
readonly属性 - 表单大小：添加
.form-control-lg或.form-control-sm
学习建议
作为编程新手，建议先掌握基本表单控件和布局，再逐步学习验证和高级组件。多动手实践修改表单代码是快速掌握的关键！
Bootstrap 官方文档是最好参考资料：Forms · Bootstrap v5.3