Foundation 5 教程
Foundation 5 是 ZURB 公司开发的响应式前端框架（2013 年发布），以移动优先、网格系统强大著称，是当时最先进的响应式框架之一。虽然现在最新版本是 Foundation 6+，但 Foundation 5 仍有许多遗留项目在使用。下面我为你推荐一些中文和英文的学习资源，并简单介绍入门知识。
推荐中文教程（最适合初学者）
- 菜鸟教程（Runoob）Foundation 教程：
https://www.runoob.com/foundation/foundation-tutorial.html
这是一个完整的中文教程，涵盖从起步、网格、按钮、表单到高级组件（如 Off-Canvas、Joyride 等），有大量在线实例代码，可以直接运行测试。强烈推荐作为入门首选！ - W3Cschool Foundation5 教程：
https://www.w3cschool.cn/foundation/
类似菜鸟教程的中文手册，支持离线下载。 - 其他中文资源：OGeek 或 PHP.cn 上也有 Foundation 5 的章节式教程。
官方文档（英文，但代码示例清晰）
- Foundation 5 官方文档：
https://get.foundation/sites/docs-v5/
包括 Getting Started、网格系统、组件详解等。官方还保留了 v5 的文档，便于查阅。
视频教程（英文为主）
- YouTube 播放列表：Learn ZURB Foundation 5（James Stone 的系列视频）
https://www.youtube.com/playlist?list=PL1gbVstzjPTaSZxKtqzr0Qhlut5yBMxPu
从下载安装到网格、组件实战，非常适合视觉学习。 - Udemy 免费课程：Foundation 5 for Beginners
https://www.udemy.com/course/foundation-5-for-beginners/
快速入门指南（Getting Started）
- 下载 Foundation 5：
从 GitHub 下载旧版本：https://github.com/foundation/foundation-sites/releases（找 5.x 版本，如 5.5.3）。 - 基本 HTML 模板：
<!doctype html>
<html class="no-js" lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation 5 示例</title>
<link rel="stylesheet" href="css/foundation.css">
</head>
<body>
<div class="row">
<div class="small-12 medium-6 large-4 columns">
<p>这是一个 12 列网格系统示例，在小屏堆叠，中屏和大屏并排。</p>
</div>
<div class="small-12 medium-6 large-8 columns">
<p>内容区域</p>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>- 核心概念：
- 网格系统：使用
.row和.columns，如small-12（小屏占满）、medium-6（中屏占一半）。 - 移动优先：从小屏开始设计，大屏继承样式。
- 组件：按钮（
.button）、导航栏（Top Bar）、表单等，开箱即用。 - JS 初始化：页面加载后调用
$(document).foundation();激活插件。
如果您有具体问题（如网格使用、某个组件），可以告诉我，我可以提供更多代码示例！如果想升级到新版本，推荐直接学 Foundation 6 或更现代的框架如 Bootstrap 5/Tailwind CSS。
