Bootstrap5 复选框与单选框（千字长文）

Bootstrap5 复选框与单选框：轻松构建交互式表单

在现代网页开发中，表单是用户与系统交互的核心入口。而复选框（Checkbox）和单选框（Radio Button）作为最常见的表单控件，承担着收集用户选择信息的重要任务。无论是注册时选择兴趣爱好，还是设置偏好选项，它们都扮演着不可或缺的角色。

Bootstrap 5 作为目前最流行的前端框架之一，对复选框与单选框的样式支持非常完善。它不仅提供了简洁美观的默认样式，还通过灵活的类名和组件结构，让开发者可以轻松实现响应式布局与交互反馈。本文将带你从零开始，系统掌握 Bootstrap5 中复选框与单选框的使用方法，无论是初学者还是有一定经验的开发者，都能快速上手。

基础语法与结构解析

在 Bootstrap5 中，复选框与单选框的实现并不依赖原生的 <input type="checkbox"> 和 <input type="radio">，而是通过额外的标签（如 <label>）和特定类名来增强视觉效果与交互体验。

以一个简单的复选框为例：

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    我同意服务条款
  </label>
</div>

代码说明：

• form-check 是复选框容器的核心类，它为整个控件提供间距和布局支持。
• form-check-input 用于给 <input> 元素添加 Bootstrap 的样式，包括大小、边框、选中状态的视觉变化。
• form-check-label 为 <label> 添加样式，使其与输入框对齐，并支持点击标签直接触发选择。
• for="flexCheckDefault" 与 id="flexCheckDefault" 配对，建立标签与输入框的绑定关系，这是无障碍访问（Accessibility）的关键。

小贴士：点击标签即可选中复选框，这种“点击即选”行为是用户体验的重要优化，务必确保 for 和 id 正确匹配。

单选框的使用方式

单选框与复选框的结构非常相似，但逻辑不同：用户只能从一组选项中选择一个。

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="male" value="male">
  <label class="form-check-label" for="male">
    男性
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="female" value="female">
  <label class="form-check-label" for="female">
    女性
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="other" value="other">
  <label class="form-check-label" for="other">
    其他
  </label>
</div>

关键点说明：

• 所有单选框必须使用相同的 name 属性（如 name="gender"），这样才能形成一组互斥选择。
• value 属性定义了选中时提交的数据值。
• 每个 <input> 都需要唯一的 id，并与对应的 <label> 的 for 属性匹配。

比喻理解：单选框就像“投票箱”，你只能投一票。而复选框更像是“多选菜篮子”，你可以放多个菜。

响应式布局与垂直排列

在移动设备上，表单控件的可点击区域太小会影响体验。Bootstrap5 提供了灵活的布局方式，让复选框和单选框在不同屏幕尺寸下都保持良好表现。

水平排列（行内）

如果你想让多个复选框或单选框并排显示，可以使用 form-check-inline 类：

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">选项一</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">选项二</label>
</div>

效果： 两个复选框在一行显示，适合标签较短的场景。

垂直排列（默认）

默认情况下，每个 form-check 都会独占一行，适合需要清晰分隔的选项，如“兴趣爱好”列表。

状态样式与交互反馈

Bootstrap5 为复选框和单选框提供了丰富的状态样式，包括禁用、选中、错误提示等，帮助用户快速判断当前状态。

禁用状态

当某个选项不可用时，可以添加 disabled 属性：

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="disabledCheckbox" value="" disabled>
  <label class="form-check-label" for="disabledCheckbox">
    此选项已禁用
  </label>
</div>

注意：禁用的控件不会提交数据，也不会响应点击事件。

校验状态（Valid/Invalid）

在表单验证中，Bootstrap 5 支持为复选框添加校验状态。例如，要求至少选择一个选项：

<div class="form-check mb-3">
  <input class="form-check-input is-invalid" type="checkbox" id="invalidCheckbox" value="option">
  <label class="form-check-label" for="invalidCheckbox">
    请至少选择一个选项
  </label>
</div>

• is-invalid：表示输入无效，会显示红色边框和错误提示。
• is-valid：表示输入有效，可配合 form-control 使用。

实际案例：用户偏好设置表单

我们来构建一个完整的“用户偏好设置”表单，综合运用复选框与单选框：

<form>
  <div class="mb-4">
    <h5>通知偏好</h5>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="email" id="emailNotify">
      <label class="form-check-label" for="emailNotify">
        接收电子邮件通知
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="sms" id="smsNotify">
      <label class="form-check-label" for="smsNotify">
        接收短信提醒
      </label>
    </div>
  </div>

  <div class="mb-4">
    <h5>主题风格</h5>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="theme" id="lightTheme" value="light" checked>
      <label class="form-check-label" for="lightTheme">
        浅色模式
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="theme" id="darkTheme" value="dark">
      <label class="form-check-label" for="darkTheme">
        深色模式
      </label>
    </div>
  </div>

  <div class="mb-4">
    <h5>语言偏好</h5>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="language" id="zh" value="zh">
      <label class="form-check-label" for="zh">中文</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="language" id="en" value="en">
      <label class="form-check-label" for="en">English</label>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">保存设置</button>
</form>

设计思路：

• 使用 mb-4 控制段落间距，提升可读性。
• 复选框用于多选（通知方式），单选框用于互斥选择（主题、语言）。
• checked 属性让默认选项生效。
• 表单提交后，后端可通过 theme 和 language 参数获取用户选择。

常见问题与调试技巧

在使用 Bootstrap5 复选框与单选框时，初学者常遇到几个问题：

建议：在开发时使用浏览器开发者工具检查元素，查看是否正确应用了 form-check、form-check-input 等类。

高级定制：自定义样式与图标

Bootstrap5 支持通过 CSS 变量和自定义类实现更个性化的样式。例如，给复选框添加图标：

.form-check-input:checked {
  background-color: #007bff;
  border-color: #007bff;
}

.form-check-input:checked::after {
  content: "✓";
  color: white;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}

效果： 选中时显示一个绿色对勾图标，增强视觉反馈。

注意：自定义样式需注意兼容性，避免破坏原有交互逻辑。

总结与建议

通过本文的学习，你应该已经掌握了 Bootstrap5 复选框与单选框的核心用法。从基础结构到状态控制，再到实际项目应用，这些组件不仅是表单的“零件”，更是提升用户体验的关键。

建议在项目中优先使用 Bootstrap5 提供的类名和结构，避免手动编写复杂的样式。同时注意语义化和无障碍设计，确保所有用户都能顺利操作。

无论是构建登录表单、问卷调查，还是后台管理系统，熟练掌握 Bootstrap5 复选框与单选框，都能让你的开发效率和界面质量更进一步。