<div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
        <label class="form-check-label" for="flexCheckDefault">
          默认的复选框
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
        <label class="form-check-label" for="flexCheckChecked">
          默认选中的复选框
        </label>
      </div>

不确定的

当通过 JavaScript 手动设置复选框时，可以使用 :indeterminate 伪类（没有可用的 HTML 属性来指定它）。

<div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
        <label class="form-check-label" for="flexCheckIndeterminate">
          不确定的复选框
        </label>
      </div>

如果你正使用 jQuery，可以用下面方法：

$('#your-checkbox').prop('indeterminate', true)

禁用

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

<div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
        <label class="form-check-label" for="flexCheckDisabled">
          禁用复选框
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexCheckCheckedDisabled">
          禁用选中的复选框
        </label>
      </div>

默认（堆叠）

默认情况下，任何数量的直接同级复选框都将垂直堆叠并以 .form-check 适当间隔。

<div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">
          默认复选框
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
        <label class="form-check-label" for="defaultCheck2">
          禁用复选框
        </label>
      </div>

内联的

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

<div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" 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="checkbox" id="inlineCheckbox2" 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="checkbox" id="inlineCheckbox3" value="option3" disabled>
        <label class="form-check-label" for="inlineRadio3">3 (禁用)</label>
      </div>

不使用 label

<div>
        <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
      </div>

复选框切换按钮

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
      <label class="btn btn-primary" for="btn-check">单切换</label>

      <input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
      <label class="btn btn-primary" for="btn-check-2">选中</label>

      <input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
      <label class="btn btn-primary" for="btn-check-3">禁用</label>

边框样式

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
      <label class="btn btn-outline-primary" for="btn-check-outlined">单切换</label>

      <input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
      <label class="btn btn-outline-secondary" for="btn-check-2-outlined">选中</label>