Bootstrap5 复选框与单选框
如果您希望用户从预设选项列表中选择任意数量的选项，可以使用复选框：
实例
<divclass="form-check"><inputclass="form-check-input"type="checkbox"id="check1"name="option1"value="something"checked><labelclass="form-check-label">Option 1</label></div>
尝试一下 »
复选框通过使用 class="form-check" 来确保标签和复选框有适当边距。
.form-check-label 类添加到标签元素，.form-check 容器内添加 .form-check-input 类来设置复选框的样式。
checked 属性用于设置默认选中的选项。
单选框
如果您希望用户从预设选项列表中选择一个选项，可以使用单选框：
实例
<divclass="form-check"><inputtype="radio"class="form-check-input"id="radio1"name="optradio"value="option1"checked>Option 1
<labelclass="form-check-label"for="radio1"></label></div><divclass="form-check"><inputtype="radio"class="form-check-input"id="radio2"name="optradio"value="option2">Option 2
<labelclass="form-check-label"for="radio2"></label></div><divclass="form-check"><inputtype="radio"class="form-check-input"disabled>Option 3
<labelclass="form-check-label"></label></div>
尝试一下 »
切换开关
如果你想把复选框变成一个可切换的开关，可以在 .form-check 容器内使用 .form-switch 类:
实例
<divclass="form-check form-switch"><inputclass="form-check-input"type="checkbox"id="mySwitch"name="darkmode"value="yes"checked><labelclass="form-check-label"for="mySwitch">Dark Mode</label></div>
尝试一下 »