Foundation 面板（Callout）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把面板（Callout）讲得清清楚楚！它就是之前提醒框的“升级版”，在 Foundation 6 中，Callout 是一个通用容器，可以用来做信息面板、卡片、提示框、内容区块等，超级灵活！
1. 基本结构（Foundation 6+ 标准写法）
<div class="callout">
<h5>标题</h5>
<p>这里是面板内容，可以放任何东西：文字、图片、按钮、列表...</p>
<a href="#">链接也会自动变色</a>
</div>2. 颜色变体（最常用）
添加颜色类到 .callout 上，内部链接会自动匹配颜色：
<div class="callout primary">主要（蓝色）</div>
<div class="callout secondary">次要（灰色）</div>
<div class="callout success">成功（绿色）</div>
<div class="callout warning">警告（黄色）</div>
<div class="callout alert">危险（红色）</div>3. 大小变体
<div class="callout small">小面板（内边距小）</div>
<div class="callout large">大面板（内边距大）</div>4. 可关闭面板（超级实用，用户点×就消失）
<div class="callout alert" data-closable>
<h5>重要提示！</h5>
<p>读完后点右上角×关闭我。</p>
<button class="close-button" aria-label="关闭面板" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<!-- 带动画关闭（需要 Motion UI） -->
<div class="callout success" data-closable="slide-out-right">
<p>我可以向右滑出消失！</p>
<button class="close-button" aria-label="关闭" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>5. 组合用法（真实项目中最常见）
<div class="callout large success">
<h4>🎉 恭喜完成！</h4>
<p>你的任务已成功提交，我们会在24小时内审核。</p>
<button class="button">查看详情</button>
</div>6. 今天直接给你抄的完整代码（复制就能跑）
<!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 Callout 面板全家福</h3>
<div class="callout primary"><h5>Primary 面板</h5><p>默认蓝色主题</p></div>
<div class="callout success" data-closable>
<h5>Success 面板（可关闭）</h5><p>绿色成功消息</p>
<button class="close-button" data-close>×</button>
</div>
<div class="callout warning small"><h5>Warning 小面板</h5><p>黄色警告</p></div>
<div class="callout alert large"><h5>Alert 大面板</h5><p>红色危险提示</p></div>
<div class="callout secondary"><h5>Secondary 面板</h5><p>灰色次要信息</p></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 风格的图）：
官方文档（最新版）：https://get.foundation/sites/docs/callout.html
你现在想干嘛？
→ 明天继续讲 Foundation 按钮组（Button Group）还是开关（Switch）？
→ 帮我做一个绿色 success 可关闭的成功面板，里面有标题“支付成功”和按钮“返回首页”？
→ 给我一个卡片式面板组件（带阴影或边框）？
直接回复下一句：
“明天讲 button group”
“帮我做支付成功面板”
“给我卡片组件”
我立刻给你写好！
