Fable 5 全面解读：新一代旗舰模型的基准测试对比与行业影响
2026/6/11 12:05:54
Foundation 开关（Switch）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把开关（Switch）讲得明明白白！Foundation 6+ 的 Switch 是一个美化后的复选框，常用于开启/关闭设置、订阅通知、切换模式等场景。外观现代、支持尺寸变体、无障碍访问、响应式完美！
1. 基本结构（最简单写法）
<divclass="switch"><inputclass="switch-input"id="exampleSwitch"type="checkbox"name="exampleSwitch"><labelclass="switch-paddle"for="exampleSwitch"><spanclass="show-for-sr">开启通知</span><!-- 只读屏器可见的描述 --></label></div>2. 带文字标签（最常用，好看！）
<divclass="switch"><inputclass="switch-input"id="tinySwitch"type="checkbox"><labelclass="switch-paddle"for="tinySwitch"><spanclass="switch-active"aria-hidden="true">开</span><spanclass="switch-inactive"aria-hidden="true">关</span></label></div>3. 尺寸变体（三种内置）
- .tiny：超小（紧凑布局）
- .small：小（常用）
- .large：大（触摸设备友好）
<divclass="switch tiny">...</div><divclass="switch small">...</div><divclass="switch large">...</div>4. 默认开启 + 禁用状态
<!-- 默认开启 --><divclass="switch"><inputclass="switch-input"id="onSwitch"type="checkbox"checked><labelclass="switch-paddle"for="onSwitch"></label></div><!-- 禁用 --><divclass="switch"><inputclass="switch-input"id="disabledSwitch"type="checkbox"disabled><labelclass="switch-paddle"for="disabledSwitch"></label></div>5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><h3>Foundation Switch 开关全家福</h3><divclass="grid-x grid-padding-x"><divclass="cell medium-4"><p>默认开关</p><divclass="switch"><inputclass="switch-input"id="switch1"type="checkbox"><labelclass="switch-paddle"for="switch1"><spanclass="show-for-sr">默认开关</span></label></div></div><divclass="cell medium-4"><p>带开/关文字</p><divclass="switch large"><inputclass="switch-input"id="switch2"type="checkbox"checked><labelclass="switch-paddle"for="switch2"><spanclass="switch-active"aria-hidden="true">开启</span><spanclass="switch-inactive"aria-hidden="true">关闭</span></label></div></div><divclass="cell medium-4"><p>小尺寸 + 默认开</p><divclass="switch small"><inputclass="switch-input"id="switch3"type="checkbox"checked><labelclass="switch-paddle"for="switch3"><spanclass="show-for-sr">小开关</span></label></div></div></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script><script>$(document).foundation();</script></body></html>下面给你看真实效果（官方和项目中最标准的 Foundation Switch 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/switch.html
你现在想干嘛？
→ 明天终于讲 Foundation 表格（Table）？
→ 帮我做一个设置面板（5个开关 + 文字描述）？
→ 给我一个彩色自定义开关（绿色开、红色关）？
直接回复下一句：
“明天讲 table”
“帮我做设置面板”
“给我彩色开关”
我立刻给你写好！