引导程序中的单选按钮

单选按钮（RadioButton）是引导程序（Bootstrap）中的一种常见形式控件，它允许用户从一组选项中选择一个选项。

使用示例

要将单选按钮添加到您的引导程序中，请使用以下代码：

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
  <label class="form-check-label" for="exampleRadios1">
    Option 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Option 2
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Option 3 (disabled)
  </label>
</div>

这将创建一个包含三个单选按钮的组，其中第三个单选按钮被禁用。

在这个示例中，.form-check类告诉引导程序将其包含的元素视为表单控件。.form-check-input类告诉引导程序将相应的输入框渲染为单选按钮。每个单选按钮具有唯一的id属性，以及一个共享name属性，该属性指示它们位于同一组中。每个单选按钮还必须有一个标签，标签的for属性的值与单选按钮的id属性相同。

可用选项

单选按钮包含许多可用选项，以修改它们的外观和行为。

样式

您可以使用不同的样式类修改单选按钮的外观。例如，.form-check-inline类可以将单选按钮渲染为内联元素，而.form-check-lg和.form-check-sm类可以缩放单选按钮的大小。

状态

单选按钮可以处于以下几种状态之一：

• 默认（未选中）
• 选中
• 禁用

要将单选按钮设置为选中状态，请在HTML中添加checked属性。要将单选按钮禁用，请在HTML中添加disabled属性。

互动

单选按钮可以与其他元素进行交互，例如使用JavaScript或HTML表格。您可以使用JavaScript调用单选按钮的checked属性来检查或更改其选中状态。 HTML表格可以将单选按钮组用作行选择器。

总结

单选按钮是引导程序中一种常见的表单控件，可让用户从多个选项中选择一个。单选按钮可以设置样式，状态和交互，并用于各种不同的应用程序中。