Bootstrap - 檢查框與單選按鈕：初學者指南

你好，未來的網頁開發者們！今天，我們將深入Bootstrap表單控制的精彩世界，特別是檢查框和單選按鈕。這些小巧的互動元素看起來可能很簡單，但它們對於收集用戶輸入非常強大。那麼，讓我們捋起袖子開始吧！

Bootstrap表單控制介紹

在我們深入細節之前，讓我們先花點時間欣賞我們為什麼要學習Bootstrap。想像你正在蓋房子。你可以從頭開始製造每一塊磚，或者你可以使用預製的組件。Bootstrap就像是你的網站預製組件的寶藏庫。它能節省時間並確保一致性。現在，讓我們來探索我們的第一個組件！

檢查框：多選奇蹟

基本檢查框

檢查框就像是可以讓用戶點選以選擇多個選項的小方框。當你希望用戶從列表中選擇多於一個項目時，它們非常適合。讓我們創建我們的第一個檢查框：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
預設檢查框
</label>
</div>

在這個例子中，我們使用Bootstrap類來設計我們的檢查框。form-check類創建一個包裹器，而form-check-input則設計檢查框本身。標籤中的for屬性與輸入的id相匹配，將它們連接起來。

預設選中狀態

有時候，你希望一個檢查框被預設選中。這只需簡單地添加checked屬性：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
預設選中的檢查框
</label>
</div>

不確定狀態

現在，這裡有一個有趣的知識：檢查框可以有一個第三種狀態，稱為"不確定"。這就像當你的青少年清理他們的房間時一樣 - 它們既不完全是乾淨的，也不完全是亂的。我們不能在HTML中設置這種狀態，但我們可以用JavaScript來設置：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
不確定的檢查框
</label>
</div>

<script>
document.getElementById('flexCheckIndeterminate').indeterminate = true;
</script>

禁用的檢查框

有時候，你可能想要顯示一個檢查框但不允許用戶與之交互。這就是disabled屬性派上用場的地方：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
禁用的檢查框
</label>
</div>

單選按鈕：單選冠軍

基本單選按鈕

單選按鈕就像是檢查框的表親。它們看起來相似但行為不同。當檢查框允許多個選擇時，單選按鈕則在組內強制只能選擇一個。讓我們創建一組單選按鈕：

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
預設單選
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
預設選中的單選
</label>
</div>

注意兩個單選按鈕都有相同的name屬性？這將它們分組在一起，確保一次只能選擇一個。

禁用的單選按鈕

就像檢查框一樣，我們也可以禁用單選按鈕：

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
禁用的單選
</label>
</div>

滑動開關：現代開關

滑動開關是檢查框的時尚替代品。它們對於開/關設置非常適合。讓我們創建一個：

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">預設開關檢查框輸入</label>
</div>

form-switch類將我們的檢查框轉換成了時尚的滑動開關。

佈局選項

預設（堆疊）

預設情況下，檢查框和單選按鈕是垂直堆疊的：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">堆疊檢查框 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">堆疊檢查框 2</label>
</div>

水平排列

想要你的選項並排？使用form-check-inline類：

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">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="inlineCheckbox2">2</label>
</div>

反向佈局

想要標籤在檢查框之前？使用form-check-reverse：

<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">反向檢查框</label>
</div>

無標籤

有時候，你可能想要一個沒有標籤的檢查框或單選按鈕：

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

記得使用aria-label以提高可訪問性！

切換按鈕

切換按鈕是使用檢查框和單選按鈕的時尚方式。它們看起來像普通按鈕但行為像檢查框或單選按鈕：

<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-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">單個切換</label>

結論

恭喜你！你剛剛對Bootstrap的檢查框和單選按鈕進行了一次宏大的巡覽。這些小巧的組件看起來可能很簡單，但它們是交互式表單的基石。記住，熟能生巧。嘗試以不同的方式組合這些元素，為你的用戶創建有吸引力的表單。

這裡是我們已經涵蓋的方法的快速參考表：

方法	描述
基本檢查框	<input class="form-check-input" type="checkbox">
預設選中的檢查框	添加checked屬性
不確定的檢查框	用JavaScript設置
禁用的檢查框	添加disabled屬性
基本單選按鈕	<input class="form-check-input" type="radio">
禁用的單選按鈕	添加disabled屬性
滑動開關	使用form-switch類
水平佈局	使用form-check-inline類
反向佈局	使用form-check-reverse類
無標籤	省略標籤，使用aria-label
切換按鈕	使用btn-check類
輪廓樣式	使用btn-outline-*類

持續實驗，持續學習，最重要的是，在構建令人驚艷的網頁表單時玩得開心！

Credits: Image by storyset