Foundation 开关（Switch）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 开关（Switch）讲得明明白白！Foundation 6+ 的 Switch 是一个美化后的复选框，常用于开启/关闭设置、订阅通知、切换模式等场景。外观现代、支持尺寸变体、无障碍访问、响应式完美！
1. 基本结构（最简单写法）
<div class="switch">
<input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="exampleSwitch">
<span class="show-for-sr">开启通知</span> <!-- 只读屏器可见的描述 -->
</label>
</div>2. 带文字标签（最常用，好看！）
<div class="switch">
<input class="switch-input" id="tinySwitch" type="checkbox">
<label class="switch-paddle" for="tinySwitch">
<span class="switch-active" aria-hidden="true">开</span>
<span class="switch-inactive" aria-hidden="true">关</span>
</label>
</div>3. 尺寸变体（三种内置）
- .tiny：超小（紧凑布局）
- .small：小（常用）
- .large：大（触摸设备友好）
<div class="switch tiny">...</div>
<div class="switch small">...</div>
<div class="switch large">...</div>4. 默认开启 + 禁用状态
<!-- 默认开启 -->
<div class="switch">
<input class="switch-input" id="onSwitch" type="checkbox" checked>
<label class="switch-paddle" for="onSwitch"></label>
</div>
<!-- 禁用 -->
<div class="switch">
<input class="switch-input" id="disabledSwitch" type="checkbox" disabled>
<label class="switch-paddle" for="disabledSwitch"></label>
</div>5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<h3>Foundation Switch 开关全家福</h3>
<div class="grid-x grid-padding-x">
<div class="cell medium-4">
<p>默认开关</p>
<div class="switch">
<input class="switch-input" id="switch1" type="checkbox">
<label class="switch-paddle" for="switch1">
<span class="show-for-sr">默认开关</span>
</label>
</div>
</div>
<div class="cell medium-4">
<p>带开/关文字</p>
<div class="switch large">
<input class="switch-input" id="switch2" type="checkbox" checked>
<label class="switch-paddle" for="switch2">
<span class="switch-active" aria-hidden="true">开启</span>
<span class="switch-inactive" aria-hidden="true">关闭</span>
</label>
</div>
</div>
<div class="cell medium-4">
<p>小尺寸 + 默认开</p>
<div class="switch small">
<input class="switch-input" id="switch3" type="checkbox" checked>
<label class="switch-paddle" for="switch3">
<span class="show-for-sr">小开关</span>
</label>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="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”
“帮我做设置面板”
“给我彩色开关”
我立刻给你写好！
