前端必知必会-Bootstrap 5 复选框和单选按钮

文章目录

• Bootstrap 5 复选框和单选按钮
• • 单选按钮
  • 切换开关
• 总结

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>

总结

本文介绍了Bootstrap 5 复选框和单选按钮的使用，如有问题欢迎私信和评论