表单教程中的 Bootstrap 4 单选按钮示例

表单教程中的 Bootstrap 4 单选按钮。众所周知，单选按钮允许用户使用 HTML 表单在其他选项中选择一个选项。Bootstrap 是一个免费的开源 UI 框架。它是使用 HTML、CSS 和 JavaScript 开发的，它提供了美观且跨浏览器兼容的 UI 组件，例如表单、按钮、菜单、排版等等。

使用 Bootstrap 4 创建单选按钮非常简单，您必须在单选按钮中添加单选输入类。或者，如果您想在单选按钮中添加新样式，那么您也可以使用第三方插件。

1. 在您的项目中设置Bootstrap Library

要使用 Bootstrap 处理单选按钮，我们需要在项目中设置和配置 Bootstrap 4 UI 库。我建议你使用 Bootstrap CDN 在你的项目中设置 Bootstrap。

将以下代码粘贴到 HTML 文件的标题部分。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

在页脚中导入引导 JavaScript 文件

Bootstrap 中有很多组件依赖于 jQuery 和 Popper js。将以下 JavaScript 脚本粘贴到 HTML 布局中的结束正文标记之前。请按照与本教程中提到的脚本相同的顺序粘贴。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2 .Bootstrap 入门模板示例

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

3. 默认单选按钮示例

我们创建了一个基本的 Bootstrap 布局来显示单选按钮示例。现在，看看下面我们将使用 Bootstrap 类创建一组单选按钮。

<div class="container">
<strong>Which option do you want to choose?</strong>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="a" checked>
   <label class="form-check-label" for="exampleRadios1">
   A
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="b">
   <label class="form-check-label" for="exampleRadios2">
   B
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="c">
   <label class="form-check-label" for="exampleRadios3">
   C
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="d">
   <label class="form-check-label" for="exampleRadios4">
   D
   </label>
</div>

Bootstrap 4 的简单单选按钮示例

4 . Bootstrap 内联单选按钮示例

创建 Bootstrap 内联单选按钮，请使用带有单选按钮外部 div 的 form-check-inline 类，如下例所示。

<div class="container">
    <h4>Which option do you want to choose?</h4>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="a" checked>
        <label class="form-check-label" for="exampleRadios1">
            A
        </label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="b">
        <label class="form-check-label" for="exampleRadios2">
            B
        </label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="c">
        <label class="form-check-label" for="exampleRadios3">
            C
        </label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="d">
        <label class="form-check-label" for="exampleRadios4">
            D
        </label>
    </div>

内联单选按钮演示:

5. 创建引导单选按钮组

在 Bootstrap 中创建单选按钮组非常简单，只需在 HTML 布局中添加以下代码。

引导单选按钮切换状态

要在 Bootstrap 单选按钮中触发活动状态，我们需要传入data-toggle="button"按钮。您应该在按钮中添加.active类和arai-pressed=”true”来设置按钮的预切换状态

<div class="container">
<h4>Which car do you have?</h4>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
   <label class="btn btn-secondary active">
   <input type="radio" name="options" id="hatchback" autocomplete="off" checked> Hatchback
   </label>
   <label class="btn btn-secondary">
   <input type="radio" name="options" id="sedan" autocomplete="off"> Sedan
   </label>
   <label class="btn btn-secondary">
   <input type="radio" name="options" id="suv" autocomplete="off"> SUV
   </label>
</div>

6.为单选按钮添加自定义样式

使用第三方插件和自定义 css 可以轻松地在引导程序中为单选按钮添加自定义样式。我将创建一个自定义样式并将其添加到 Bootstrap 中的样式单选按钮。

在您的 HTML 模板中添加以下代码。

<div class="container">
	<div class="row">
		
<div class="custom-radio-button">
  <div>
    <input type="radio" id="color-red" name="color" value="color-red" checked>
    <label for="color-red">
      <span>
      </span>
    </label>
  </div>
  
  <div>
    <input type="radio" id="color-blue" name="color" value="color-blue">
    <label for="color-blue">
      <span>
      </span>
    </label>
  </div>
  
  <div>
    <input type="radio" id="color-orange" name="color" value="color-orange">
    <label for="color-orange">
      <span>
      </span>
    </label>
  </div>
  <div>
    <input type="radio" id="color-pink" name="color" value="color-pink">
    <label for="color-pink">
      <span>
      </span>
    </label>
  </div>
</div>
	</div>
</div>

然后转到您的 CSS 文件并包含以下代码以在 Bootstrap 中设置自定义单选按钮的样式。

body {
  text-align: center;
  padding-top: 25px;
}
.custom-radio-button div {
  display: inline-block;
}
.custom-radio-button input[type="radio"] {
  display: none;
}
.custom-radio-button input[type="radio"] + label {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
.custom-radio-button input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  line-height: 44px;
}
.custom-radio-button input[type="radio"] + label span img {
  opacity: 0;
  transition: all 0.3s ease;
}
.custom-radio-button input[type="radio"]#color-red + label span {
  background-color: red;
}
.custom-radio-button input[type="radio"]#color-blue + label span {
  background-color: blue;
}
.custom-radio-button input[type="radio"]#color-orange + label span {
  background-color: orange;
}
.custom-radio-button input[type="radio"]#color-pink + label span {
  background-color: pink;
}
.custom-radio-button input[type="radio"]:checked + label span {
  opacity: 1;
  background: url("https://www.positronx.io/wp-content/uploads/2019/06/tick-icon-4657-01.png")
    center center no-repeat;
  width: 40px;
  height: 40px;
  display: inline-block;
}

效果如下：

生活点点

生活点点

表单教程中的 Bootstrap 4 单选按钮示例