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