企业官网建设流程全解析

如何评价伊利集团网站建设,德州成交型网站建设,观光园网站建设,公众号网站怎么建Foundation 开关#xff08;Switch#xff09;详解#xff08;超级完整版#xff0c;一次讲透#xff09; 我们继续你的 Foundation 系列#xff0c;今天把 开关#xff08;Switch#xff09;讲得明明白白#xff01;Foundation 6 的 Switch 是一个美化后的复选框Switch详解超级完整版一次讲透我们继续你的 Foundation 系列今天把开关Switch讲得明明白白Foundation 6 的 Switch 是一个美化后的复选框常用于开启/关闭设置、订阅通知、切换模式等场景。外观现代、支持尺寸变体、无障碍访问、响应式完美1. 基本结构最简单写法divclassswitchinputclassswitch-inputidexampleSwitchtypecheckboxnameexampleSwitchlabelclassswitch-paddleforexampleSwitchspanclassshow-for-sr开启通知/span!-- 只读屏器可见的描述 --/label/div2. 带文字标签最常用好看divclassswitchinputclassswitch-inputidtinySwitchtypecheckboxlabelclassswitch-paddlefortinySwitchspanclassswitch-activearia-hiddentrue开/spanspanclassswitch-inactivearia-hiddentrue关/span/label/div3. 尺寸变体三种内置.tiny超小紧凑布局.small小常用.large大触摸设备友好divclassswitch tiny.../divdivclassswitch small.../divdivclassswitch large.../div4. 默认开启 禁用状态!-- 默认开启 --divclassswitchinputclassswitch-inputidonSwitchtypecheckboxcheckedlabelclassswitch-paddleforonSwitch/label/div!-- 禁用 --divclassswitchinputclassswitch-inputiddisabledSwitchtypecheckboxdisabledlabelclassswitch-paddlefordisabledSwitch/label/div5. 今天直接给你抄的完整代码复制就能跑!DOCTYPEhtmlhtmlheadlinkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/foundation-sites6.8.1/dist/css/foundation.min.css/headbodyh3Foundation Switch 开关全家福/h3divclassgrid-x grid-padding-xdivclasscell medium-4p默认开关/pdivclassswitchinputclassswitch-inputidswitch1typecheckboxlabelclassswitch-paddleforswitch1spanclassshow-for-sr默认开关/span/label/div/divdivclasscell medium-4p带开/关文字/pdivclassswitch largeinputclassswitch-inputidswitch2typecheckboxcheckedlabelclassswitch-paddleforswitch2spanclassswitch-activearia-hiddentrue开启/spanspanclassswitch-inactivearia-hiddentrue关闭/span/label/div/divdivclasscell medium-4p小尺寸 默认开/pdivclassswitch smallinputclassswitch-inputidswitch3typecheckboxcheckedlabelclassswitch-paddleforswitch3spanclassshow-for-sr小开关/span/label/div/div/divscriptsrchttps://cdn.jsdelivr.net/npm/jquery3.7.1/dist/jquery.min.js/scriptscriptsrchttps://cdn.jsdelivr.net/npm/foundation-sites6.8.1/dist/js/foundation.min.js/scriptscript$(document).foundation();/script/body/html下面给你看真实效果官方和项目中最标准的 Foundation Switch 示例官方文档最新版https://get.foundation/sites/docs/switch.html你现在想干嘛→ 明天终于讲 Foundation 表格Table→ 帮我做一个设置面板5个开关 文字描述→ 给我一个彩色自定义开关绿色开、红色关直接回复下一句“明天讲 table”“帮我做设置面板”“给我彩色开关”我立刻给你写好