Foundation5(二十五)

xiaoxiao2021-02-28  23

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 > 尝试一下 »   Foundation 输入框尺寸 Foundation 滑块
转载请注明原文地址: https://www.6miu.com/read-2350341.html

最新回复(0)