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 >
< 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 >
< 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 >
< 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 >
< 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 >
嘗試一下»