Bootstrap - 複選框和單選按鈕

上一頁
下一頁

本章將討論 Bootstrap 提供的複選框和單選按鈕實用工具。複選框允許您從列表中選擇一個或多個選項，而單選按鈕只允許您選擇一個。

方法

  • Bootstrap 提供了包裝類 .form-check，用於改進瀏覽器預設複選框和單選按鈕元素的佈局和行為。它還允許更大的自定義和跨瀏覽器一致性。

  • .form-check-label 類用於顯示覆選框標籤。

  • .form-check-input 類用於輸入型別複選框。

  • 在結構上，輸入和標籤作為兄弟元素。

Bootstrap 的自定義圖示用於顯示選中或不確定狀態。

複選框

複選框從列表中選擇一個或多個選項。

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck">
      <label class="form-check-label" for="defaultCheck">
       item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
      <label class="form-check-label" for="flexCheckChecked">
        item 2
      </label>
    </div>
  </body>
  </html>

不確定狀態

  • :indeterminate偽類用於建立中間狀態複選框。

  • 不確定狀態是透過 JavaScript 設定的，因為沒有可用的等效 HTML 屬性來指定它。

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="indeterminateCheckbox" >
      <label class="form-check-label" for="indeterminateCheckbox">
         item 1
      </label>
    </div>

  <script>

      var x = document.getElementById("indeterminateCheckbox").indeterminate = true;;

  </script>
  </body>
  </html>

停用複選框

要指示停用狀態，請使用disabled屬性。這使得關聯的<label>顏色變淺，表示停用狀態。

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledIndeterminateCheckbox" disabled>
      <label class="form-check-label" for="disabledIndeterminateCheckbox">
         item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheckedCheckbox" checked disabled>
      <label class="form-check-label" for="disabledCheckedCheckbox">
         item 2
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
      <label class="form-check-label" for="disabledCheckbox">
       item 3
      </label>
    </div>
  </body>
  <script>
    var x = document.getElementById("disabledIndeterminateCheckbox").indeterminate = true;
  </script>
  </html>

單選按鈕

單選按鈕將選擇數量限制為列表中只有一個。

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Radio</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultRadio">
      <label class="form-check-label" for="defaultRadio">
        Item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="defaultCheckRadio" checked>
      <label class="form-check-label" for="defaultCheckRadio">
        Item 2
      </label>
    </div>
  </body>
  </html>

停用單選按鈕

要指示停用狀態，請使用disabled屬性，關聯的<label>將以較淺的顏色顯示。

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Form - Radio</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledRadio" disabled>
      <label class="form-check-label" for="disabledRadio">
         Item 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDisabled" id="disabledCheckedRadio" checked disabled>
      <label class="form-check-label" for="disabledCheckedRadio">
        Item 2
      </label>
    </div>
  </body>
  </html>

開關按鈕

  • 開關按鈕具有自定義複選框標記，要渲染切換按鈕，請使用.form-switch類。使用role="switch"向輔助技術傳達控制元件型別。

  • 開關按鈕支援disabled屬性。較舊的輔助技術將其作為正常複選框作為後備方案宣佈。

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Form - Radio</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckbox">
      <label class="form-check-label" for="defaultSwitchCheckbox">Wi-fi</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="defaultSwitchCheckedCheckbox" checked>
      <label class="form-check-label" for="defaultSwitchCheckedCheckbox">Bluetooth</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckbox" disabled>
      <label class="form-check-label" for="disabledSwitchCheckbox">Whatsapp Notification</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="disabledSwitchCheckedCheckbox" checked disabled>
      <label class="form-check-label" for="disabledSwitchCheckedCheckbox">Facebook Notification</label>
    </div>
  </body>
  </html>

預設複選框和單選按鈕（堆疊）

可以使用.form-check類垂直堆疊單選按鈕和複選框。

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="defaultStackedRadio" value="option2">
      <label class="form-check-label" for="defaultStackedRadio">
       English
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="disabledStackedRadio" value="option3" disabled>
      <label class="form-check-label" for="disabledStackedRadio">
        Hindi
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheckbox">
      <label class="form-check-label" for="defaultCheckbox">
      Marathi
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
      <label class="form-check-label" for="disabledCheckbox">
       Japanes
      </label>
    </div>
  </body>
  </html>

內聯

要將複選框和單選按鈕並排放置，請將.form-check-inline類與任何.form-check類一起使用。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDeafultRadio" value="option1">
      <label class="form-check-label" for="inlineDeafultRadio">English</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineDisabledRadio" value="option3" disabled>
      <label class="form-check-label" for="inlineDisabledRadio">Hindi</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineDeafultCheckbox" value="option1">
      <label class="form-check-label" for="inlineDeafultCheckbox">Marathi</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="inlineDisabledCheckbox" value="option3" disabled>
      <label class="form-check-label" for="inlineDisabledCheckbox">Japanes</label>
    </div>
  </body>
  </html>

反轉

使用.form-check-reverse修飾符類將複選框、單選按鈕和開關放置在相對側。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="form-check form-check-reverse">
      <h4>Inline Checkboxes</h4>
      <input class="form-check-input" type="checkbox" value="" id="deafultReverseCheckbox">
      <label class="form-check-label" for="deafultReverseCheckbox">
       English
      </label>
    </div>
    <div class="form-check form-check-reverse">
      <input class="form-check-input" type="checkbox" value="" id="disabledReverseCheckbox" disabled>
      <label class="form-check-label" for="disabledReverseCheckbox">
       Hindi
      </label>
    </div>
    <div class="form-check form-switch form-check-reverse">
      <input class="form-check-input" type="checkbox" id="switchReverseCheckbox">
      <label class="form-check-label" for="switchReverseCheckbox">Wifi</label>
    </div>
    <div class="form-check form-check-reverse">
      <h4>Inline Radios</h4>
      <input class="form-check-input" type="radio" value="" id="deafultReverseRadio">
      <label class="form-check-label" for="deafultReverseRadio">
       Marathi
      </label>
    </div>
    <div class="form-check form-check-reverse">
      <input class="form-check-input" type="radio" value="" id="disabledReverseRadio" disabled>
      <label class="form-check-label" for="disabledReverseRadio">
        Japanes
      </label>
    </div>
    <div class="form-check form-switch form-check-reverse">
      <input class="form-check-input" type="radio" id="switchReverseRadio">
      <label class="form-check-label" for="switchReverseRadio">Bluetooth</label>
    </div>
  </body>
  </html>

無標籤

  • 對於沒有標籤文字的複選框和單選按鈕，跳過包裝類.form-check。

  • 為輔助技術提供可訪問的名稱（例如，使用aria-label）。有關資訊，請參閱表單概述部分的可訪問性部分。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Form - Checkbox and Radio Buttons</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div>
      <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
      Item 1
    </div>

    <div>
      <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
      Item 2
    </div>
  </body>
  </html>

切換按鈕

  • 在<label>元素上使用.btn類而不是.form-check-label類來建立類似按鈕的複選框和單選按鈕。這些切換按鈕也可以一起放置在一個按鈕組中。

  • 使用.btn-check類表示輸入是按鈕型別的複選框。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radios</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h5>Checkbox Toggle Buttons</h5>
    <input type="checkbox" class="btn-check" id="defaultToggleChecbox" autocomplete="off">
    <label class="btn btn-primary" for="defaultToggleChecbox">Item 1</label>

    <input type="checkbox" class="btn-check" id="checkedToggleChecbox" checked autocomplete="off">
    <label class="btn btn-secondary" for="checkedToggleChecbox">Item 2</label>

    <input type="checkbox" class="btn-check" id="disabledToggleChecbox" autocomplete="off" disabled>
    <label class="btn btn-info" for="disabledToggleChecbox">Item 3</label>

    <h5>Radios Toggle Buttons</h5>
    <input type="radio" class="btn-check"  id="defaultToggleRadio" autocomplete="off">
    <label class="btn btn-primary" for="defaultToggleRadio">Item 1</label>

    <input type="radio" class="btn-check" id="checkedToggleRadio" checked autocomplete="off">
    <label class="btn btn-secondary" for="checkedToggleRadio">Item 2</label>

    <input type="radio" class="btn-check" id="disabledToggleRadio" autocomplete="off" disabled>
    <label class="btn btn-info" for="disabledToggleRadio">Item 3</label>
  </body>
  </html>

輪廓樣式

支援不同的.btn變體，包括在以下示例中演示的不同輪廓樣式。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Checkbox and Radio Buttons</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <input type="checkbox" class="btn-check" id="defualtOutlineCheckbox" autocomplete="off">
    <label class="btn btn-outline-primary" for="defualtOutlineCheckbox">Single toggle</label><br><br>

    <input type="checkbox " class="btn-check" id="checkedOutlineCheckbox" checked autocomplete="off">
    <label class="btn btn-secondary" for="checkedOutlineCheckbox">Checked</label><br><br>

    <input type="radio" class="btn-check" name="options-outlined" id="checkedOutlineRadio" autocomplete="off" checked>
    <label class="btn btn-info" for="checkedOutlineRadio">Checked success radio</label>

    <input type="radio" class="btn-check" name="options-outlined" id="defualtOutlineRadio" autocomplete="off">
    <label class="btn btn-outline-warning" for="defualtOutlineRadio">Danger radio</label>
  </body>
  </html>
列印頁面
上一頁
下一頁
廣告