无线电

无线电-Bootstrap 5和Material Design 2.0表格

单选按钮是用于允许用户在多个 选项(而 复选框用于选择多个 选项)。


基本例子

浏览器的默认复选框和单选按钮已被替换为 .form-check ,这两种输入类型的一系列类,可改善布局 和HTML元素的行为,从而提供更大的自定义和跨浏览器 一致性。复选框用于选择列表中的一个或多个选项,而收音机则用于 从众多选项中选择一种。

在结构上,我们的 <input>s 和 <label>s在同级 元素与 <input> 在一个 <label>. 这个 如您必须指定的那样,稍微冗长一些idfor 属性 关联 <input><label>.

我们使用兄弟选择器(~) 为了我们所有 <input> 状态,例如 :checked 要么:disabled. 什么时候 结合 .form-check-label 类,我们可以轻松地为每个文本设置样式 基于的项目 <input>'的状态。


          <!-- Default radio -->
          <div class="form-check">
            <input
              class="form-check-input"
              type="radio"
              name="flexRadioDefault"
              id="flexRadioDefault1"
            />
            <label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
          </div>

          <!-- Default checked radio -->
          <div class="form-check">
            <input
              class="form-check-input"
              type="radio"
              name="flexRadioDefault"
              id="flexRadioDefault2"
              checked
            />
            <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
          </div>
        

残障人士

添加 disabled 属性和关联的<label>s 是 自动设置样式以与较浅的颜色匹配,以帮助指示输入状态。


          <div class="form-check">
            <input
              class="form-check-input"
              type="radio"
              name="flexRadioDisabled"
              id="flexRadioDisabled"
              disabled
            />
            <label class="form-check-label" for="flexRadioDisabled"> Disabled radio </label>
          </div>

          <div class="form-check">
            <input
              class="form-check-input"
              type="radio"
              name="flexRadioDisabled"
              id="flexRadioCheckedDisabled"
              checked
              disabled
            />
            <label class="form-check-label" for="flexRadioCheckedDisabled">
              Disabled checked radio
            </label>
          </div>
        

排队

通过添加将同一水平行上的复选框或单选按钮分组 .form-check-inline 到任何 .form-check


          <div class="form-check form-check-inline">
            <input
              class="form-check-input"
              type="radio"
              name="inlineRadioOptions"
              id="inlineRadio1"
              value="option1"
            />
            <label class="form-check-label" for="inlineRadio1">1</label>
          </div>

          <div class="form-check form-check-inline">
            <input
              class="form-check-input"
              type="radio"
              name="inlineRadioOptions"
              id="inlineRadio2"
              value="option2"
            />
            <label class="form-check-label" for="inlineRadio2">2</label>
          </div>

          <div class="form-check form-check-inline">
            <input
              class="form-check-input"
              type="radio"
              name="inlineRadioOptions"
              id="inlineRadio3"
              value="option3"
              disabled
            />
            <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
          </div>
        

没有标签

对于没有标签文本的复选框和单选框,请省略包装的 .form-check 。 请记住,仍要为辅助技术提供某种形式的标签(例如,使用 aria-label )。


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

          <div>
            <input
              class="form-check-input"
              type="radio"
              name="radioNoLabel"
              id="radioNoLabel2"
              value=""
              aria-label="..."
            />
          </div>
        

切换按钮

切换按钮可以分组为 按钮组 如果需要的话。


          <div class="btn-group">
            <input
              type="radio"
              class="btn-check"
              name="options"
              id="option1"
              autocomplete="off"
              checked
            />
            <label class="btn btn-secondary" for="option1">Checked</label>

            <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off" />
            <label class="btn btn-secondary" for="option2">Radio</label>

            <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" />
            <label class="btn btn-secondary" for="option3">Radio</label>
          </div>