Foundation 5 安装使用教程
一、Foundation 简介
Foundation 是由 Zurb 推出的响应式前端框架，与 Bootstrap 类似，提供了完整的 CSS 和 JavaScript 组件体系。Foundation 5 是其经典稳定版本，适合快速构建响应式网站和应用。
二、Foundation 5 安装方式
2.1 使用 CDN（推荐）
无需下载，直接在 HTML 页面中引入：
<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.3/css/foundation.min.css"><script src="https://cdn.jsdelivr.net/foundation/5.5.3/js/vendor/modernizr.js"></script>
</head>
<body><script src="https://cdn.jsdelivr.net/foundation/5.5.3/js/vendor/jquery.js"></script><script src="https://cdn.jsdelivr.net/foundation/5.5.3/js/foundation.min.js"></script><script>$(document).foundation();</script>
</body>
2.2 下载源码使用
- 下载地址：https://foundation.zurb.com/sites/download/archive.html
- 选择 Foundation 5 → 下载完整版本
- 解压后包含：
├── css/
│ └── foundation.css / foundation.min.css
├── js/
│ ├── foundation.min.js
│ └── vendor/
├── index.html
- 在 HTML 中引入：
<link rel="stylesheet" href="css/foundation.min.css">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/modernizr.js"></script>
<script src="js/foundation.min.js"></script>
<script>$(document).foundation();
</script>
三、快速上手示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Foundation 5 示例</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.3/css/foundation.min.css">
</head>
<body><div class="row"><div class="large-6 columns"><h1>欢迎使用 Foundation 5</h1></div><div class="large-6 columns"><button class="button">按钮</button></div></div><script src="https://cdn.jsdelivr.net/foundation/5.5.3/js/vendor/jquery.js"></script><script src="https://cdn.jsdelivr.net/foundation/5.5.3/js/foundation.min.js"></script><script>$(document).foundation();</script>
</body>
</html>
四、常用组件类名示例
| 组件 | 类名或结构 |
|---|---|
| 按钮 | button |
| 网格系统 | row / columns / large-6 |
| 警告框 | alert-box |
| 表单 | form、input、label 等 |
| 导航菜单 | top-bar、has-dropdown |
五、响应式布局说明
Foundation 使用 12 栅格系统：
<div class="row"><div class="small-12 medium-6 columns">左</div><div class="small-12 medium-6 columns">右</div>
</div>
断点类：
small-*：适用于手机medium-*：适用于平板large-*：适用于桌面
六、常见问题
Q1: 样式或脚本无效？
- 请确保正确引入 jQuery、foundation.min.js，并在末尾执行
$(document).foundation();
Q2: 是否需要 SASS 或 CLI 工具？
- Foundation 5 可直接使用预编译版，无需 SASS 或 CLI。
七、学习资源推荐
- Foundation 官网
- Foundation 5 文档
- W3Cplus Foundation 教程
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
