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 复选框。

输出

下图显示了表单中的默认 bootstrap 5 单选按钮。

已选中的单选按钮

已选中的单选按钮使用 bootstrap 5 元素和关键字选择默认值。此单选按钮在按钮上提供了一个，但我们可以根据需要取消选中并选择另一个按钮。我们可以选中一个单选按钮。

语法

示例

以下示例显示了一个已选中的单选按钮和另一个未选中的单选按钮。第一个元素默认选中，但我们可以使用单选按钮选择其他选项。

输出

下图显示了表单中已选中的 bootstrap 5 单选按钮。

示例

以下示例显示了两个已选中和一个未选中的单选按钮。第一个元素已选中，但默认未显示为已选中的按钮。最后一个选中的按钮显示为默认选中的按钮。我们可以使用单选按钮选择其他选项。

输出

下图显示了表单中的默认 bootstrap 5 单选按钮。

已禁用的单选按钮

如果希望单选按钮默认禁用，请在 bootstrap 5 单选按钮输入元素中使用 disabled 属性。

语法

以下语法向我们展示了如何在表单中默认创建 bootstrap 5 禁用的单选按钮。

示例

以下示例显示了两个已禁用的单选按钮，一个已启用的单选按钮和一个已选中的单选按钮。我们可以在表单中禁用多个单选按钮。

输出

下图显示了表单中的默认 bootstrap 5 单选按钮。

结论

bootstrap 5 单选按钮在表单中选择单个输出数据。它是 bootstrap 5 表单的用户界面功能。单选按钮依赖于用户友好和节省空间的功能。