如何使用 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 - 现在创建一个带有单选按钮输入类型的标签。将此标签的类名定义为“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 应用程序中的暗模式和亮模式更改。这些类型的按钮用于进行某些更改或产生某些操作。这些切换按钮也用于游戏中进行前进、后退和跳跃等操作。基本的单选按钮通常可以在网站上的实时注册表单中看到。在一组单选按钮中，我们只能选择一个按钮，如果我们想要选择多个按钮，则应使用复选框而不是单选按钮。

更新于: 2023年4月11日

1K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告