本文参考官方文档,网址是:https://get.foundation/sites/docs/index.html
还有菜鸟教程:https://www.runoob.com/foundation/foundation-tutorial.html
文章是我看懂了的再总结的。边看,我边写。投个原创不过分吧。
Foundation不知道有没有人用,我个人认为是很好用的。为什么?因为许多人再开发macOS和Windows,哦对,还有Linux,愁窗体不统一,还写下了这么个代码:
let czW=0;
let czH=0;
if(/*代码部分(判断macOS平台)*/)
{
//代码部分(修改macOS的差值)
}
else if(/*代码部分(判断Linux平台)*/)
{
//代码部分(修改Linux的差值)
}
再来一个Chromium OS的话,不是要D吗!
那么,怎么做呢?管不管他,熟练的程序猿肯定会说:“响应式!!!”
不错,就是这样。
你难道看到百度
首页给你来一个留白?(哦不,那是白的,留不了白。。。)不是百度,Github
总可以了。。Github
来一个留白?多没面子啊啊啊啊啊啊啊啊
(快,记下来!全部是考点!)
HTML, CSS and JavaScript
框架。易用
、强大
而且灵活
的框架,用于构建基于任何设备上
的Web
应用。移动优先
的流行框架。免费
的前端框架,用于快速开发
。HTML
和 CSS
的设计模板,提供多种 Web 上的UI 组件
,如表单
、按钮
、Tabs
等等。同时也提供了多种 JavaScript 插件
。移动优先
,可创建响应式网页
。初学者
和专业人士
。Facebook
,eBay
,Samsung
, Amazon
,Disney
等。Foundation有3种方式下载。
<!-- 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">
使用 Foundation 创建页面
Foundation 使用 HTML 元素和 CSS 属性,所以需要添加 HTML5 doctype 文档类型声明。
同时我们可以设置文档的语言属性 lang 及字符编码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
</html>
为了确保页面可自由缩放可以在 元素中添加以下 标签:
<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>