Bootstrap 5 Checkboxes and Radio Buttons

复选框

如果您希望用户从预设选项列表中选择任意数量的选项，则请使用复选框。

Shirin

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">选项 1</label>
</div>

Taimakar kai samun kuma kai amfani da ita

例子解释

如需设置复选框样式，请使用 class="form-check" 的包装元素，来确保标签和复选框有适当的外边距。

然后，将 .form-check-label 类添加到标签元素，并将 .form-check-input 添加到 .form-check Dokar na kamfani, domin karewa kwarin kuma saukar da saukar da kwarin.

Idan ka yi imani ya yi amfani da kwarin don saukar da cikakken kwarin, ka yi amfani da: checked Dokar.

Kwarin samfuri

Idan ka yi imani ya yi amfani da kwarin don rufe mutum daga samun kwanan wata, ka yi amfani da:

Shirin

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked> Option 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"> Option 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled> Option 3
  <label class="form-check-label"></label>
</div>

Taimakar kai samun kuma kai amfani da ita

Dandama

Idan ka yi imani ya yi amfani da cikakken kwarin don saukar da sabunta kwarin, ka yi amfani da: .form-switch Dokar da: .form-check Kamfani na:

Shirin

<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">Modi na farko</label>
</div>

Taimakar kai samun kuma kai amfani da ita