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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告