那么现在就让我们开始学习 Foundation 吧。目前不少 Foundation 教程实际上是 Foundation5 的教程。而现在 Foundation 已经推出 Foundation6 了。那么我们当然是讲解最新版本的 Foundation 啦。因为 Foundation6 中推出了不少实用的新功能。如果我们再用老版本的讲解，实在显得有些笨拙了。（笑）
那么我们今天就从如何配置 Foundation6 开始讲起。您可以从 Foundation 的官方网站（http://foundation.zurb.com/ ）下载到最新的 Foundation6 。除了要下载 Foundation6 之外，您可能还需要下载 jQuery 。jQuery 是一个 JavaScript 库。Foundation 中的某些组件是依赖 jQuery 库的，所以您也需要下载它。所谓依赖 jQuery 库的原因是因为 Foundation 中的一部分组件是基于jQuery 库开发的。
您知道吗？
Foundation6 有时也简写做 F6 ，就像 HTML5 可以简写成 H5 。相应的 Foundation 的早期版本 Foundation5 也可以简写成 F5 。
当然您也可以使用 CDN ：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
使用 CDN 通常可以加快您的页面加载速度，但是 GitHub Pages 目前并不支持 CDN 。所以，当您想在 GitHub Pages 开发您的静态页面时，还请下载 Foundation6 和 jQuery 。
作为一个有经验的前端工程师我们都知道应该如何配置我们的网页。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="HTML, CSS, XML, JavaScript, Front-end">
<meta name="author" content="刘祺">
<title>绽放的前端</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
</head>
<body>
<!-- 预留的网页内容 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
这里可能需要解释部分内容：
<meta name="viewport" content="width=device-width, initial-scale=1">
这一行的作用是为了确保页面可以自由的缩放，因为 Foundation6 是为了创建响应式页面的框架。
您知道吗？
所谓响应式页面，我们有时也称其为响应式网页设计。它实际上是一种根据不同分辨率的设备自行调整页面的技术。而这本身并不是什么新的技术，而是基于已有的技术（CSS、JavaScript等）提出的对于不同设备不需要多次设计网页的技术方案。如果您想进一步了解响应式页面，您可以参考 The Responsive Web。
一部分 Foundation 组件是基于 jQuery 开发的，所以我们需要对这部分组件进行初始化，下面则是对它们进行初始化的代码。
<script>
$(document).foundation();
</script>
