本文参考官方文档，网址是：https://get.foundation/sites/docs/index.html
还有菜鸟教程：https://www.runoob.com/foundation/foundation-tutorial.html
文章是我看懂了的再总结的。边看，我边写。投个原创不过分吧。
Foundation的介绍
Foundation不知道有没有人用，我个人认为是很好用的。为什么？因为许多人再开发macOS和Windows，哦对，还有Linux，愁窗体不统一，还写下了这么个代码：
let czW=0;
let czH=0;
if(/*代码部分（判断macOS平台）*/)
{
//代码部分（修改macOS的差值）
}
else if(/*代码部分（判断Linux平台）*/)
{
//代码部分（修改Linux的差值）
}
再来一个Chromium OS的话，不是要D吗！
那么，怎么做呢？管不管他，熟练的程序猿肯定会说：“响应式！！！”
不错，就是这样。
你难道看到百度首页给你来一个留白？（哦不，那是白的，留不了白。。。）不是百度，Github总可以了。。Github来一个留白？多没面子啊啊啊啊啊啊啊啊
（快，记下来！全部是考点！）
Foundation 用于开发响应式的 HTML, CSS and JavaScript框架。
Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的Web应用。
Foundation 是一个以移动优先的流行框架。
Foundation 是一个免费的前端框架，用于快速开发。
Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。
Foundation 移动优先，可创建响应式网页。
Foundation 适用于初学者和专业人士。
Foundation 已使用在Facebook,eBay,Samsung, Amazon,Disney等。
Foundation的下载
Foundation有3种方式下载。
- CDN
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/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/foundation-sites@6.4.3/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/foundation-sites@6.4.3/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/foundation-sites@6.4.3/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/foundation-sites@6.4.3/dist/css/foundation-rtl.min.css" integrity="sha256-Az+E7JXW71Srarkum5QPTdnobddg2GqI1i8+nMusgLk= sha384-eBKuNtkGVmsJD0uNnWoKYYVnzDT0PXV+XNyAgmmZwYVn7MSNcaR4i5HjOpSRd0o6 sha512-d0RjiDZM/0NlD+7Y2DhUGuAUdwDIL5lS3GPAD0HEayEcrhuLuRiPYOgFWZik+gsFzsykxSn0KO6jim7ev8kIig==" crossorigin="anonymous">
- 下载到本地后引用（推荐）
Download Foundation - 命令行安装（以后再说，可以参考官文的Installation）
使用 Foundation 创建页面
- 添加 HTML5 doctype
Foundation 使用 HTML 元素和 CSS 属性，所以需要添加 HTML5 doctype 文档类型声明。
同时我们可以设置文档的语言属性 lang 及字符编码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
</html>
- Foundation 移动优先
Foundation 为移动设备的响应式设计。框架的核心是移动优先。
为了确保页面可自由缩放可以在 元素中添加以下 标签:
<meta name="viewport" content="width=device-width, initial-scale=1">
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
3. 初始化组件
一些 Foundation 组件是基于 jQuery 开发的，如：模态框、下拉菜单等。你可以使用以下脚本来初始化组件：
<script>
$(document).foundation();
</script>
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
