Bootstrap 5 复选框和单选按钮

复选框

如果您希望用户从预设选项列表中选择任意数量的选项，则请使用复选框。

实例

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">选项 1</label>
</div>

亲自试一试

例子解释

如需设置复选框样式，请使用 class="form-check" 的包装元素，来确保标签和复选框有适当的外边距。

然后，将 .form-check-label 类添加到标签元素，并将 .form-check-input 添加到 .form-check 容器内，以正确设置复选框的样式。

如果您希望默认选中复选框，请使用 checked 属性。

单选按钮

如果您想限制用户只能从预设选项列表中选择其中之一，则使用单选按钮。

实例

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>选项 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">选项 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>选项 3
  <label class="form-check-label"></label>
</div>

亲自试一试

拨动开关

如果您希望将复选框设置为切换开关的样式，请将 .form-switch 类与 .form-check 容器一起使用：

实例

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">深色模式</label>
</div>

亲自试一试

目录