如何使用 Bootstrap 创建类似于切换按钮的单选按钮
概述
我们可以创建一个与切换按钮相同的单选按钮，并将其用于 Web 应用程序中需要选择选项或更改操作的部分。在创建单选按钮时，我们可以使用 Bootstrap 预定义的类来构建单选按钮。切换按钮与普通按钮相同，都是可切换按钮;而单选按钮则是在选项前面带有类似复选框形状的按钮。
内容分发网络 (CDN) 链接
这些 CDN 链接用于使用 Bootstrap 的类。第一个链接提供 Bootstrap 类对网页的访问。另外两个脚本标签用于向 Bootstrap 的单选按钮添加功能。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
语法
创建简单单选按钮的语法是 −
<div> <input type="radio" name="button" id="button1"> <label>Option</label> </div>
算法
步骤 1 - 在文本编辑器中创建 HTML 样板。
步骤 2 - 将上面给出的 CDN 链接添加到代码的 head 标签中。
步骤 3 - 现在为页面创建一个 div 容器，该容器将包含页面的所有组件。
步骤 4 - 在父 div 容器内创建另一个子 div，类名为"btn-group"和"btn-group-toggle"，并为其添加另一个属性 data-toggle，值为 buttons。
<div class="btn-group btn-group-toggle" data-toggle="buttons"></div>
步骤 5 − 现在创建一个输入类型为 radio 的标签。将此标签的类名定义为"btn btn-success"，这将使单选按钮成为切换按钮。
<label class="btn btn-success my-1 rounded"> <input type="radio" name="button" id="button1"> A. Option </label>
步骤 6 - 如果您想在同一 div 内添加更多按钮，请重复步骤 5。
步骤 7 - 单选按钮已成功创建。
示例
为了了解如何创建与切换按钮相同的单选按钮，我们将以多项选择题布局为例进行学习。在此示例中，我们创建了一些用作切换按钮的单选按钮。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"> </script>
<title>Radio Toggle Button</title>
</head>
<body>
<div class="radio container mt-3">
<h2 class="text-center text-success fw-bold bg-light">Toggle Button Options</h2>
<div class="btn-group btn-group-toggle d-flex flex-column w-50 container mt-4" data-toggle="buttons">
<label class="btn btn-success my-1 rounded">
<input type="radio" name="button" id="button1">
A. Option
</label>
<label class="btn btn-success my-1 rounded">
<input type="radio" name="button" id="button2">
B. Option
</label>
<label class="btn btn-success my-1 rounded">
<input type="radio" name="button" id="button3">
C. Option
</label>
<label class="btn btn-success my-1 rounded">
<input type="radio" name="button" id="button4">
D. Option
</label>
</div>
</div>
</body>
</html>
下图显示了四个选项:选项 A、选项 B、选项 C 和选项 D。它们都是单选按钮，但功能类似于切换按钮。要将单选按钮设置为切换按钮，请将相应的单选按钮类定义为 btn btn-success，这将为单选按钮实现切换按钮的样式。
结论
单选按钮与切换按钮类似，也可用于 Web 应用程序中的暗模式和亮模式切换。这类按钮用于执行特定更改或特定操作。这些切换按钮也用于游戏中，用于执行前进、后退和跳转等操作。基本的单选按钮通常出现在网站的实时注册表单中。从一组单选按钮中，我们只能选择一个按钮，如果要选择多个按钮，则应该使用复选框而不是单选按钮。
