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