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>
亲自试一试 »
