復(fù)選框和單選按鈕

復(fù)選框

如果您希望用戶從預(yù)設(shè)選項(xiàng)列表中選擇任意數(shù)量的選項(xiàng)，則請使用復(fù)選框。

實(shí)例

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">選項(xiàng) 1</label>
</div>

例子解釋

如需設(shè)置復(fù)選框樣式，請使用 class="form-check" 的包裝元素，來確保標(biāo)簽和復(fù)選框有適當(dāng)?shù)耐膺吘唷?/p>

然后，將 .form-check-label 類添加到標(biāo)簽元素，并將 .form-check-input 添加到 .form-check 容器內(nèi)，以正確設(shè)置復(fù)選框的樣式。

如果您希望默認(rèn)選中復(fù)選框，請使用 checked 屬性。

單選按鈕

如果您想限制用戶只能從預(yù)設(shè)選項(xiàng)列表中選擇其中之一，則使用單選按鈕。

實(shí)例

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>選項(xiàng) 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">選項(xiàng) 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>選項(xiàng) 3
  <label class="form-check-label"></label>
</div>

撥動開關(guān)

如果您希望將復(fù)選框設(shè)置為切換開關(guān)的樣式，請將 .form-switch 類與 .form-check 容器一起使用：

實(shí)例

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">深色模式</label>
</div>