Bootstrap5 复选框和单选按钮

复选框

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

选项1

选项2

禁用选项

示例

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

亲自试一试 »

示例解释

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

然后，添加.form-check-label标签元素的类，以及.form-check-input在里面正确设置复选框的样式.form-check容器。

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

单选按钮

如果您希望限制用户只能从预设选项列表中进行一项选择，则可以使用单选按钮。

选项1

选项2

选项3

示例

<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 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">Option 2
<label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>Option 3
<label class="form-check-label"></label>
</div>

亲自试一试 »

拨动开关

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

深色模式

示例

亲自试一试 »