Bootstrap 5 複選框和單選按鈕
複選框
複選框用於讓使用者從預設選項列表中選擇任意數量的選項。
示例
<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>
自己動手試一試 »
示例解釋
要對複選框進行樣式設定，請使用帶有 class="form-check" 的包裝元素，以確保標籤和複選框具有正確的邊距。
然後，在 .form-check 容器內，將 .form-check-label 類新增到標籤元素，將 .form-check-input 類新增到複選框，以正確設定樣式。
如果要使複選框預設選中，請使用 checked 屬性。
單選按鈕
單選按鈕用於將使用者限制為從預設選項列表中僅選擇一個選項。
示例
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>選項 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">選項 2
<label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>選項 3
<label class="form-check-label"></label>
</div>
自己動手試一試 »
切換開關
如果你希望你的複選框被樣式化為切換開關，請將 .form-switch 類與 .form-check 容器一起使用
示例
<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>
自己動手試一試 »
