Bootstrap Checkbox 樣式的詳細闡述

Bootstrap 是一個支持響應式的現代化前端開發框架。框架內部支持了一系列組件，Bootstrap Checkbox 也是其中一個常用的組件。這篇文章將會從多個方面闡述 Bootstrap Checkbox 的樣式。

一、選擇框的基本樣式

Bootstrap Checkbox 提供了豐富的選擇框樣式，通過簡單地定義相應的 class，就可以應用各種風格的樣式。以下是常用的選擇框樣式：

<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="customCheck1">
  <label class="form-check-label" for="customCheck1">自定義樣式1</label>
</div>

<div class="form-check">
  <input class="form-check-input custom-control-input" type="checkbox" value="" id="customCheck2">
  <label class="form-check-label custom-control-label" for="customCheck2">自定義樣式2</label>
</div>

可以看到，不同的樣式都對應了不同的 class。其中，常見的基本樣式有如下幾種：

1. form-check-input：定義選擇框

2. form-check-label：定義選擇框標籤

3. custom-control-input：自定義選擇框，與 form-check-input 同樣作用

4. custom-control-label：自定義選擇框標籤，與 form-check-label 同樣作用

通過改變 class 的不同組合，就可以輕鬆實現不同風格的選擇框。

二、禁用和選中狀態樣式

Bootstrap 為選擇框提供了明確的禁用和選中狀態樣式。以下是禁用和選中狀態的示例代碼：

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">禁用樣式</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck3" checked>
  <label class="form-check-label" for="defaultCheck3">選中樣式</label>
</div>

需要注意的是，禁用狀態只需要在 input 標籤中添加屬性 disabled 即可：

<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>

而選中狀態則需要在 input 標籤中添加屬性 checked：

<input class="form-check-input" type="checkbox" value="" id="defaultCheck3" checked>

三、橫向布局樣式

有時候需要將多個選擇框放在一行內，以節省頁面空間。Bootstrap Checkbox 提供了相應的橫向布局樣式，只需要將 form-check-inline 類添加到最外層的 div 即可，示例代碼如下：

<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>

四、大小尺寸樣式

有些時候，需要將選擇框的大小縮小或放大。Bootstrap Checkbox 提供了多種不同大小尺寸的樣式定義，示例代碼如下：

<div class="form-check form-check-lg">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck4">
  <label class="form-check-label" for="defaultCheck4">大尺寸樣式</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck5">
  <label class="form-check-label" for="defaultCheck5">默認尺寸樣式</label>
</div>

<div class="form-check form-check-sm">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck6">
  <label class="form-check-label" for="defaultCheck6">小尺寸樣式</label>
</div>

以上是 Bootstrap Checkbox 樣式的詳細闡述。