Foundation是一款前端框架。 Foundation是一款响应式的前端框架。 Foundation是一款响应式且移动优先的前端框架。 Foundation是一款不但响应式且移动优先，而且免费的移动框架。 Foundation是一款不但响应式且移动优先，而且免费的移动框架，用来快速开发。
本教程参考两个地方，官方文档（English）和菜鸟教程（Foundation5.5.3）。 本人的教程是自己总结的，带有幽默性（滑稽），所以你不要在吃饭时看，免得喷出来，和我无关。。。 官方文档位置：https://get.foundation/sites/docs/installation.html如果你英语好的，你可以看一下。来自百度翻译的会和你说的 菜鸟教程地址：https://www.runoob.com/foundation/foundation-tutorial.html和https://www.runoob.com/foundation/foundation-get-started.html 在看本教程前，请注意，您应该学会HTML,CSS,JS三种最重要的语言。如果你没学过就来看，我也当你没有办法。 该教程欢迎转载。但是要注明链接地址。
该教程也在我的博客园出现，如果可以，请看我的博客园，因为那里，我有显示的地方。但是请注意：必须开启“运行脚本”，不然，后果自负。
怎么下载Foundation?
有3种方式。这里只说2种。第三种先透露一下，是通过命令行的方式来安装的。
- 通过Foundation的CDN来下载；
- 通过下载Foundation的文件并且头部引用，FTP时整个文件夹上传。
这里给大家看看流程图：(1)
(2)
CDN链接不建议。因为很慢，不过你要也没办法。
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
从Foundation 6.4开始，默认情况下启用了flex，只有新的XY网格可用。但是，其他CSS版本可用于向后兼容和最常见的使用情况。对于其他用户和高级自定义，我们建议使用自定义设置构建基础（请参阅其他安装方法）。 ——官方文档
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css" integrity="sha256-TPcVVrzfTETpAWQ8HhBHIMT7+DbszMr5n3eFi+UwIl8= sha384-+aXh7XSzITwlvjelsNWuL1A9rT8pWGaiqMMeUjtKcsWIfzT1oV8Mp3oYxmjPK8Gv sha512-cArttU/Yh+PzfQ/dhCdfBiU9+su+fuCwFxLrlLbvuJE/ynUbstaKweVPs7Hdbok9jlv9cwt+xdk20wRz7oYErQ==" crossorigin="anonymous">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css" integrity="sha256-JyhZsgvsqjrdl9GPOILi/zyc+z4dcwXiyP1Q7cwWlM0= sha384-GtUT6gOaCY/S1ggTUOnqe5CQAEAZ6oVTmMq3X4vfZrvp+tLgjBEmwVxJnukor+o0 sha512-x3+KBxBjFh8PGncrfDOsJhntYDBFdJxmpb211THYkQOaGWvk7ckZG6prGUpZqz85AXgiispjow06+bDnIxnWDQ==" crossorigin="anonymous">
<!-- foundation-rtl.min.css: Compressed CSS with right-to-left reading direction -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-rtl.min.css" integrity="sha256-Az+E7JXW71Srarkum5QPTdnobddg2GqI1i8+nMusgLk= sha384-eBKuNtkGVmsJD0uNnWoKYYVnzDT0PXV+XNyAgmmZwYVn7MSNcaR4i5HjOpSRd0o6 sha512-d0RjiDZM/0NlD+7Y2DhUGuAUdwDIL5lS3GPAD0HEayEcrhuLuRiPYOgFWZik+gsFzsykxSn0KO6jim7ev8kIig==" crossorigin="anonymous">
文件下载地址：点击下载
怎么搭建Foundation呢呢呢呢呢呢呢呢呢呢呢呢呢呢呢呢呢呢
- 引用jQuery到头部
<script scr="https://files.cnblogs.com/files/7086cmd/jquery.min.js" />
- 添加 modernizr.js
<script src="https://files.cnblogs.com/files/7086cmd/modernizr.js" />
- 添加HTML5的标识符（Doctype）和No-js标签
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
- 添加移动优先
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
- 初始化组件
<script>
$(document).foundation();
</script>
这样，Foundation的第一个实例就诞生了。
<div class="row">
<div class="medium-12 columns">
<div class="panel">
<h1>Foundation 页面</h1>
<p>重置窗口大小，查看效果！</p>
</div>
</div>
</div>
<div class="row">
<div class="medium-4 columns">
<h3>7086cmd</h3>
<p>我的博客！！！！</p>
</div>
<div class="medium-4 columns">
<h3>7086cmd</h3>
<p>我的博客！！！！</p>
</div>
<div class="medium-4 columns">
<h3>7086cmd</h3>
<p>我的博客！！！！</p>
</div>
</div>
以下效果为在 iframe 标签中的演示，可以点击"尝试一下"查看在线实例：