在 Bootstrap 5 中，复选框（Checkbox）和单选框（Radio button）是常用的表单元素，通常用于用户进行多项选择或单项选择。Bootstrap 5 提供了样式化的复选框和单选框，让它们看起来更加美观、现代化。

1. 复选框（Checkbox）

复选框允许用户选择一个或多个选项。Bootstrap 5 提供了美化过的复选框，支持禁用状态、对齐、大小调整等。

基本复选框

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Check this checkbox
  </label>
</div>
  • .form-check：为复选框元素提供基本样式。
  • .form-check-input：为复选框输入框提供样式。
  • .form-check-label：为复选框标签提供样式。

禁用复选框

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="disabledCheck" disabled>
  <label class="form-check-label" for="disabledCheck">
    Can't check this one
  </label>
</div>
  • disabled：禁用复选框，使其不可选中。

复选框与其他控件组合

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="inlineCheck" value="option1">
  <label class="form-check-label" for="inlineCheck">
    Check this checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="inlineCheck2" value="option2">
  <label class="form-check-label" for="inlineCheck2">
    Or this one
  </label>
</div>
  • .form-check-inline：将复选框横向排列，放置在同一行。

2. 单选框（Radio Button）

单选框用于从多个选项中选择一个，Bootstrap 5 为单选框提供了统一的样式和对齐方式。

基本单选框

<div class="form-check">
  <input class="form-check-input" type="radio" name="group1" id="radio1">
  <label class="form-check-label" for="radio1">
    Option 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="group1" id="radio2">
  <label class="form-check-label" for="radio2">
    Option 2
  </label>
</div>
  • name：确保只有一个选项可以被选中。name="group1" 保证这两个单选框属于同一组，只能选中其中一个。

禁用单选框

<div class="form-check">
  <input class="form-check-input" type="radio" name="group2" id="disabledRadio" disabled>
  <label class="form-check-label" for="disabledRadio">
    Can't select this option
  </label>
</div>
  • disabled：禁用单选框，使其不可选中。

单选框与其他控件组合

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="group3" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">
    Option 1
  </label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="group3" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">
    Option 2
  </label>
</div>
  • .form-check-inline：将单选框横向排列，放置在同一行。

3. 自定义复选框和单选框

Bootstrap 5 还提供了更高级的自定义复选框和单选框样式，允许你使用自定义的外观。

自定义复选框

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="customCheck1">
  <label class="form-check-label" for="customCheck1">
    Custom checkbox
  </label>
</div>
  • .form-check-input：提供自定义样式，使复选框看起来更美观。

自定义单选框

<div class="form-check">
  <input class="form-check-input" type="radio" name="customRadio" id="customRadio1" value="option1">
  <label class="form-check-label" for="customRadio1">
    Custom radio
  </label>
</div>
  • .form-check-input：为单选框提供自定义样式。

4. 复选框与单选框的对齐和大小

你可以通过 Bootstrap 提供的类来调整复选框和单选框的大小和位置。

调整复选框和单选框大小

<div class="form-check">
  <input class="form-check-input form-check-input-lg" type="checkbox" id="largeCheck">
  <label class="form-check-label" for="largeCheck">
    Large checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input form-check-input-sm" type="radio" name="group" id="smallRadio">
  <label class="form-check-label" for="smallRadio">
    Small radio
  </label>
</div>
  • form-check-input-lg：增加复选框和单选框的大小。
  • form-check-input-sm：减小复选框和单选框的大小。

总结

Bootstrap 5 使复选框和单选框的创建和样式化变得简单、快捷。你可以轻松地创建美观的复选框和单选框，支持禁用、对齐、大小调整、以及自定义样式。同时，Bootstrap 还提供了基本的表单验证、禁用和对齐控制，帮助开发者快速构建响应式表单。