如何使用 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+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告