Foundation 价格表（Pricing Table）详解
Foundation 价格表（Pricing Table）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把价格表（Pricing Table）讲得明明白白！Foundation 6+ 的 Pricing Table 是一个经典组件，专为展示订阅计划、套餐对比设计，常用于 SaaS 落地页、产品定价页。特点：响应式、突出热门计划、易自定义。
1. 基本结构（最常用）
<ulclass="pricing-table"><liclass="title">标准版</li><!-- 标题 --><liclass="price">$99/月</li><!-- 价格 --><liclass="description">适合个人用户</li><!-- 描述 --><liclass="bullet-item">10GB 存储</li><!-- 特性列表 --><liclass="bullet-item">无限流量</li><liclass="bullet-item">基础支持</li><liclass="cta-button"><aclass="button"href="#">立即购买</a></li><!-- 按钮 --></ul>2. 多列价格表（真实项目最常见，3-4 列）
用 Grid 包裹多个 Pricing Table，实现响应式布局：
<divclass="grid-x grid-margin-x align-center"><divclass="cell small-12 medium-4"><ulclass="pricing-table"><liclass="title">免费版</li><liclass="price">免费</li><liclass="description">入门体验</li><liclass="bullet-item">1GB 存储</li><liclass="bullet-item">有限支持</li><liclass="bullet-item disabled">无自定义域名</li><!-- 用 disabled 表示无 --><liclass="cta-button"><aclass="button"href="#">注册</a></li></ul></div><divclass="cell small-12 medium-4"><ulclass="pricing-table popular"><!-- 加 popular 突出热门 --><liclass="title">专业版</li><liclass="price">$199/月</li><liclass="description">最受欢迎</li><liclass="bullet-item">100GB 存储</li><liclass="bullet-item">优先支持</li><liclass="bullet-item">自定义域名</li><liclass="cta-button"><aclass="button expanded success"href="#">立即购买</a></li></ul></div><divclass="cell small-12 medium-4"><ulclass="pricing-table"><liclass="title">企业版</li><liclass="price">自定义报价</li><liclass="description">大型团队</li><liclass="bullet-item">无限存储</li><liclass="bullet-item">24/7 支持</li><liclass="bullet-item">专属经理</li><liclass="cta-button"><aclass="button"href="#">联系我们</a></li></ul></div></div>3. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"><style>.pricing-table.popular{border:3px solid #1779ba;transform:scale(1.05);}</style></head><body><h3class="text-center">Foundation Pricing Table 价格表全家福</h3><divclass="grid-x grid-margin-x align-center small-up-1 medium-up-3"><divclass="cell"><ulclass="pricing-table"><liclass="title">免费版</li><liclass="price">¥0</li><liclass="description">入门级</li><liclass="bullet-item">5个项目</li><liclass="bullet-item">基础功能</li><liclass="bullet-item disabled">无高级支持</li><liclass="cta-button"><aclass="button"href="#">开始使用</a></li></ul></div><divclass="cell"><ulclass="pricing-table popular"><liclass="title">专业版</li><liclass="price">¥99/月</li><liclass="description">最受欢迎 🔥</li><liclass="bullet-item">无限项目</li><liclass="bullet-item">高级分析</li><liclass="bullet-item">优先支持</li><liclass="cta-button"><aclass="button expanded success"href="#">立即订阅</a></li></ul></div><divclass="cell"><ulclass="pricing-table"><liclass="title">企业版</li><liclass="price">定制</li><liclass="description">大型团队</li><liclass="bullet-item">所有功能</li><liclass="bullet-item">专属服务</li><liclass="bullet-item">SLA 保障</li><liclass="cta-button"><aclass="button"href="#">联系销售</a></li></ul></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 Pricing Table 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/pricing-table.html
你现在想干嘛？
→ 明天继续讲 Foundation 表格（Table）还是面包屑（Breadcrumbs）？
→ 帮我做一个 4 列的价格表（加年付折扣标签）？
→ 给我一个带开关（月付/年付）的动态价格表代码？
直接回复下一句：
“明天讲 table”
“帮我做 4 列价格表”
“给我月年切换价格表”
我立刻给你写好！