引导单选按钮 - Html

在HTML中，我们可以使用Bootstrap框架提供的引导单选按钮来呈现单选选项。

具体实现

首先，我们需要想要创建单选选项的父元素，一般使用 <div> 标签。比如：

<div>
  <!-- 这里是单选选项 -->
</div>

在父元素中，我们可以使用 <label> 标签来创建每个单选选项。例如：

<div>
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

在上面的代码中，我们使用了一个 <label> 标签来创建两个单选选项。通过使用 <input> 标签，我们指定了这些选项应该是单选的。通过 name 属性，我们告诉浏览器这些选项是同一个单选组。通过 value 属性，我们指定了每个选项的值。

自定义样式

借助于Bootstrap的强大样式，我们可以轻松地自定义单选选项的样式。例如：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Option 3
  </label>
</div>

在上面的示例中，我们使用了 data-toggle="buttons" 属性来启用按钮式单选选项。使用 btn-group 类，我们将选项装入组中。使用 btn 和 btn-primary 类，我们设定选项应该有哪种样式（蓝色背景）。使用 active 类，我们可以将某个选项默认选中。

Markdown代码

# 引导单选按钮 - Html

在HTML中，我们可以使用Bootstrap框架提供的引导单选按钮来呈现单选选项。

## 具体实现

首先，我们需要想要创建单选选项的父元素，一般使用 `<div>` 标签。比如：

```html
<div>
  <!-- 这里是单选选项 -->
</div>

在父元素中，我们可以使用 <label> 标签来创建每个单选选项。例如：

<div>
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

在上面的代码中，我们使用了一个 <label> 标签来创建两个单选选项。通过使用 <input> 标签，我们指定了这些选项应该是单选的。通过 name 属性，我们告诉浏览器这些选项是同一个单选组。通过 value 属性，我们指定了每个选项的值。

自定义样式

借助于Bootstrap的强大样式，我们可以轻松地自定义单选选项的样式。例如：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Option 3
  </label>
</div>

在上面的示例中，我们使用了 data-toggle="buttons" 属性来启用按钮式单选选项。使用 btn-group 类，我们将选项装入组中。使用 btn 和 btn-primary 类，我们设定选项应该有哪种样式（蓝色背景）。使用 active 类，我们可以将某个选项默认选中。