Foundation 5 起步指南
Foundation 5 是 ZURB 开发的响应式前端框架，采用移动优先设计，核心是强大的 12 列网格系统。起步非常简单，以下是详细步骤。
1. 安装方式（推荐使用 CDN，快速上手）
最简单的方式是通过 CDN 引入文件，无需下载。
- CSS 文件：
https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css - JavaScript 文件：
https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js - jQuery（Foundation 5 依赖 jQuery 1.x 或 2.x）：
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js
或者下载完整包从官网旧版本文档：https://get.foundation/sites/docs-v5/
2. 基本 HTML 模板
复制以下代码创建一个新 HTML 文件，直接在浏览器打开即可看到效果：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation 5 起步示例</title>
<!-- Foundation CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body>
<div class="row">
<div class="small-12 medium-6 large-4 columns">
<div class="panel">
<h3>左侧栏目</h3>
<p>小屏占满一行，中屏占一半，大屏占 1/3。</p>
</div>
</div>
<div class="small-12 medium-6 large-8 columns">
<div class="panel">
<h3>主内容区</h3>
<p>这是一个响应式布局示例。调整浏览器窗口大小查看变化。</p>
<button class="button">Foundation 按钮</button>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Foundation JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script>
<script>
$(document).foundation(); // 初始化 Foundation 插件
</script>
</body>
</html>3. 核心概念：网格系统
- 使用
.row作为容器。 - 使用
.columns作为列，类名格式： small-X：小屏（手机）占 X 列（1-12）。medium-X：中屏（平板）占 X 列。large-X：大屏（桌面）占 X 列。- 示例：
small-12 medium-6 large-4表示小屏占满，中屏占一半，大屏占 1/3。
4. 下一步学习
- 官方 v5 文档：https://get.foundation/sites/docs-v5/（包含所有组件详解）。
- 中文教程：https://www.w3cschool.cn/foundation/ 或 https://www.runoob.com/foundation/foundation-tutorial.html。
- 测试组件：直接在模板中添加按钮（
.button）、表单、导航等类名即可生效。
保存以上代码运行试试，调整窗口大小就能看到响应式效果！如果遇到问题（如 JS 不工作），检查是否正确引入 jQuery 并调用 $(document).foundation();。
有具体组件想学（如 Top Bar 导航、Off-canvas 侧边栏），告诉我，我继续教你！
