# Foundation 開關 開關是在鼠標點擊(手指敲擊)下在 "On" 和 "Off" 狀態下切換：  切換開關使用 `&lt;div class="switch"&gt;` 創建。 `&lt;div&gt;` 內添加帶有唯一 id 的 `&lt;input type="checkbox"&gt;` ， `&lt;label&gt;` 元素的 for 屬性需要與 `&lt;input type="checkbox"&gt;` 的 id 相匹配： ### 實例 ``` <div class="switch"> ? <input id="mySwitch" type="checkbox"> ? <label for="mySwitch"></label> </div> ``` ## 開關大小 使用 `.large`, `.small` 或 `.tiny` 類來設置開關大小： ### 實例 ``` <div class="switch large">...</div> <div class="switch">...</div> <div class="switch small">...</div> <div class="switch tiny">...</div> ``` ## 圓角切換開關 使用 `.radius` 和 `.round` 類來設置圓角切換開關： ### 實例 ``` <div class="switch">...</div> <div class="switch radius">...</div> <div class="switch round">...</div> ``` ## 開關組 可以通過設置單選按鈕(radio)來設置單個選項。**注意:** 注意各個選項的 `name` 屬性必須一致 (實例中為 "myGroup" )。 ### 實例 ``` <div class="switch"> ? <input id="mySwitch1" type="radio" name="myGroup"> ? <label for="mySwitch1"></label> </div> <div class="switch"> ? <input id="mySwitch2" type="radio" name="myGroup" checked> ? <label for="mySwitch2"></label> </div> ```