Foundation 教程

什么是 Foundation？

Foundation 是一个开源的、响应式的前端框架，由 ZURB 公司开发和维护。它提供了一套完整的 HTML、CSS 和 JavaScript 组件，帮助开发者快速构建美观、响应式的网站和 Web 应用程序。

Foundation 的特点

1. 响应式设计

Foundation 采用移动优先（Mobile First）的设计理念，能够自动适应不同尺寸的屏幕设备，从手机到平板再到桌面电脑。

2. 模块化架构

Foundation 采用模块化设计，你可以只引入需要的组件，减少页面加载时间。

3. 可定制性强

通过 Sass 变量，你可以轻松定制 Foundation 的外观和行为，打造符合品牌风格的网站。

4. 丰富的组件

Foundation 提供了大量预制组件，包括：

• 网格系统
• 导航栏
• 按钮
• 表单
• 模态框
• 选项卡
• 等等...

5. 语义化

Foundation 的 HTML 结构更加语义化，有利于 SEO 和可访问性。

Foundation 版本

Foundation 主要有两个版本：

版本	用途
Foundation for Sites	用于构建网站
Foundation for Emails	用于构建响应式 HTML 邮件

本教程主要讲解 Foundation for Sites。

学习前提

在学习 Foundation 之前，你需要具备以下基础知识：

• HTML - 了解 HTML 的基本结构和常用标签
• CSS - 了解 CSS 的基本语法和常用属性
• JavaScript - 了解 JavaScript 的基本概念（用于交互组件）

教程大纲

本教程将涵盖以下内容：

基础篇

1. Foundation 起步 - 安装和基本设置
2. Foundation 文本 - 排版和文本样式
3. Foundation 表格 - 表格样式

组件篇

4. Foundation 按钮 - 按钮样式
5. Foundation 按钮组 - 按钮组
6. Foundation 图标 - 图标使用
7. Foundation 标签 - 标签样式
8. Foundation 提醒框 - 提醒和通知
9. Foundation 进度条 - 进度显示
10. Foundation 面板 - 面板容器
11. Foundation 图片 - 图片处理

导航篇

12. Foundation 下拉菜单 - 下拉菜单
13. Foundation 折叠列表 - 手风琴效果
14. Foundation 列表 - 列表样式
15. Foundation 选项卡 - 选项卡组件
16. Foundation 分页 - 分页导航
17. Foundation 价格表 - 价格表设计
18. Foundation 顶部导航栏 - 顶部导航
19. Foundation 侧边栏 - 侧边栏导航
20. Foundation 滑动导航 - Off-Canvas 导航
21. Foundation Magellan - 滚动导航

表单篇

22. Foundation 表单 - 表单基础
23. Foundation 输入框尺寸 - 输入框大小
24. Foundation 开关 - 开关控件
25. Foundation 滑块 - 滑块控件

高级组件篇

26. Foundation 提示框 - 工具提示
27. Foundation 模态框 - 模态对话框
28. Foundation Joyride - 引导教程
29. Foundation 均衡器 - 等高布局

网格系统篇

30. Foundation 网格 - 网格概述
31. Foundation 网格系统 - 网格系统详解
32. Foundation 网格 - 水平堆叠
33. Foundation 网格 - 小型设备
34. Foundation 网格 - 中型设备
35. Foundation 网格 - 大型设备
36. Foundation 块状网格 - 块状网格
37. Foundation 网格实例 - 实战案例

为什么选择 Foundation？

特性	Foundation	其他框架
响应式	✓ 原生支持	部分支持
可定制	✓ 高度可定制	有限定制
学习曲线	中等	各异
社区支持	活跃	各异
语义化	✓ 优秀	一般

开始学习

准备好开始学习 Foundation 了吗？让我们从 Foundation 起步 开始吧！

---

提示：建议按照教程顺序学习，每章都配有代码示例，你可以边学边练习。