Bootstrap 5 复选框

Bootstrap 5 复选框用于存在多个选项列表，并且用户可以从一个或多个选项中进行选择的情况。 换句话说，列表中的 Bootstrap 5 复选框彼此独立； 因此，单击一个框不会取消选中其他框。

当您希望用户从预定义的备选项列表中进行选择时，可以使用 Bootstrap 5 复选框。

默认复选框

Bootstrap 5 默认复选框在表单中显示未选中和未禁用状态。 Bootstrap 5 复选框用于单个输入元素的多个选择。 它是一种用户交互功能，彼此独立。

语法

以下语法展示了如何在表单中创建 Bootstrap 5 复选框。

示例

• 使用带有 class="form-check" 的包装元素以确保合适的标签和复选框边距来设置复选框的样式。
• 然后，添加用于标记元素并显示复选框的 ".form-check-label" 和 ".form-check-input" 类。 它位于容器的 ".form-check" 类中。
• 我们可以使用以下示例及其输出来显示 Bootstrap 5 复选框。

输出

选中复选框

如果我们希望默认选中复选框，请在复选框输入元素中使用 checked 属性。

语法

以下语法展示了如何在表单中默认创建 Bootstrap 5 选中复选框。

示例

前三个复选框使用 "checked" 关键字默认选中。 最后一个复选框默认显示未选中。

输出

禁用复选框

如果我们希望默认禁用复选框，请在复选框输入元素中使用 disabled 属性。

语法

以下语法展示了如何在表单中创建 Bootstrap 5 禁用复选框。

示例

以下示例使用 Bootstrap 5 元素显示禁用、选中和未选中的复选框。 第一个复选框使用 disabled 关键字。 第二个复选框使用 disabled 和 checked 关键字。 第三个复选框显示默认复选框功能。

输出

结论

Bootstrap 5 复选框功能用于使用表单功能和元素进行用户交互。 它选择多个选项以将数据保存在数据库中。 复选框功能包含在网页上的一个小空间中。