1.1 Foundation 概述与配置
那么现在就让我们开始学习 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 。（本书中文版《响应式Web》由电子工业出版社出版）
一部分 Foundation 组件是基于 jQuery 开发的，所以我们需要对这部分组件进行初始化，下面则是对它们进行初始化的代码。
<script>
$(document).foundation();
</script>
连载于：刘祺的公众号
相关博文
-
社区使用反馈专区
尊敬的博文视点用户您好： 欢迎您访问本站，您在本站点访问过程中遇到任何问题，均可以在本页留言，我们会根据您的意见和建议，对网站进行不断的优化和改进，给您带来更好的访问体验！ 同时，您被采纳的意见和建议，管理员也会赠送您相应的积分...
5742 749 3 7 -
迎战“双12”！《Unity3D实战核心技术详解》独家预售开启！
时隔一周，让大家时刻挂念的《Unity3D实战核心技术详解》终于开放预售啦！ 这本书不仅满足了很多年轻人的学习欲望，并且与实际开发相结合，能够解决工作中真实遇到的问题。预售期间优惠多多，实在不容错过！ Unity 3D实战核心技术详解 ...
3460 36 0 1 -
请问“下载资源”这个版块在哪？找半天没找着。
如题 ...
6314 28 0 1
读者评论