Foundation 开关
开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换：
切换开关使用
<div class="switch">
创建。
<div>
内添加带有唯一 id 的
<input type="checkbox">
，
<label>
元素的 for 属性需要与
<input type="checkbox">
的 id 相匹配：
实例
< input id= "mySwitch" type= "checkbox" >
< label for= "mySwitch" > < /label >
< /div >
尝试一下 »
开关大小
使用
.large
,
.small
或
.tiny
类来设置开关大小：
实例
< div class= "switch" > ... < /div >
< div class= "switch small" > ... < /div >
< div class= "switch tiny" > ... < /div >
尝试一下 »
圆角切换开关
使用
.radius
和
.round
类来设置圆角切换开关：
实例
< div class= "switch radius" > ... < /div >
< div class= "switch round" > ... < /div >
尝试一下 »
开关组
可以通过设置单选按钮(radio)来设置单个选项。
注意:
注意各个选项的
name
属性必须一致 (实例中为 "myGroup" )。
实例
< 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 >
尝试一下 »
