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