Foundation 5 起步指南
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 文件，直接在浏览器打开即可看到效果：
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Foundation 5 起步示例</title><!-- Foundation CSS --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css"></head><body><divclass="row"><divclass="small-12 medium-6 large-4 columns"><divclass="panel"><h3>左侧栏目</h3><p>小屏占满一行，中屏占一半，大屏占 1/3。</p></div></div><divclass="small-12 medium-6 large-8 columns"><divclass="panel"><h3>主内容区</h3><p>这是一个响应式布局示例。调整浏览器窗口大小查看变化。</p><buttonclass="button">Foundation 按钮</button></div></div></div><!-- jQuery --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><!-- Foundation JS --><scriptsrc="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 侧边栏），告诉我，我继续教你！