内添加带有唯一 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开关
网页地址：http://www.gawzjz.com/qtweb/news29/175679.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联