编程入门教程

Foundation 开关

开关是在鼠标点击(手指敲击)下在 "On" 和 "Off" 状态下切换:

切换开关使用 <div class="switch"> 创建。 <div> 内添加带有唯一 id 的 <input type="checkbox"><label> 元素的 for 属性需要与 <input type="checkbox"> 的 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 >