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 容器内，将 .form-check-label 类添加到标签元素，将 .form-check-input 类添加到复选框，以正确设置样式。
如果要使复选框默认选中，请使用 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>
自己动手试一试 »
