Foundation 起步
什么是 Foundation？
- Foundation 是一个免费的前端框架，用于快速开发。
- Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。
- Foundation 移动优先，可创建响应式网页。
- Foundation 适用于初学者和专业人士。
- Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。
 |
什么是响应式网页设计？ 响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 |
|---|
从哪里下载 Foundation?
你可以通过以下两种方式来获取 Foundation：
1、从官网下载最新版本：http://foundation.zurb.com/。
2、使用Ainoob在线教程官网提供的CDN（推荐）：
<!-- css 文件 --> <link rel="stylesheet" href="http://statics.w3cschool.cn/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://statics.w3cschool.cn/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://statics.w3cschool.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://statics.w3cschool.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
本站静态 CDN 基于阿里云服务。
 |
Foundation 使用 CDN 的优势: Foundation 使用 CDN 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性 为什么使用 modernizr? |
|---|
使用 Foundation 创建页面
1. 添加 HTML5 doctype
Foundation 使用 HTML 元素和 CSS 属性，所以需要添加 HTML5 doctype 文档类型声明。
同时我们可以设置文档的语言属性 lang 及字符编码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
</html>
