内添加带有唯一 id 的 ， 元素的 for 属性需要与 的 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开关
当前URL：http://cdxtjz.cn/article/djjisdj.html