Foundation5 教程
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 模板：
<!doctypehtml><htmlclass="no-js"lang="zh"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Foundation 5 示例</title><linkrel="stylesheet"href="css/foundation.css"></head><body><divclass="row"><divclass="small-12 medium-6 large-4 columns"><p>这是一个 12 列网格系统示例，在小屏堆叠，中屏和大屏并排。</p></div><divclass="small-12 medium-6 large-8 columns"><p>内容区域</p></div></div><scriptsrc="js/vendor/jquery.js"></script><scriptsrc="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。