Foundation起步

司空浩邈
2023-12-01

本文参考官方文档,网址是: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 包含了 HTMLCSS 的设计模板,提供多种 Web 上的UI 组件,如表单按钮Tabs 等等。同时也提供了多种 JavaScript 插件

Foundation 移动优先,可创建响应式网页

Foundation 适用于初学者专业人士

Foundation 已使用在Facebook,eBay,Samsung, Amazon,Disney等。

Foundation的下载

Foundation有3种方式下载。

  1. 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">
  1. 下载到本地后引用(推荐)
    Download Foundation
  2. 命令行安装(以后再说,可以参考官文的Installation)

使用 Foundation 创建页面

  1. 添加 HTML5 doctype

Foundation 使用 HTML 元素和 CSS 属性,所以需要添加 HTML5 doctype 文档类型声明。

同时我们可以设置文档的语言属性 lang 及字符编码:

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
  </head>
</html>
  1. 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>
 类似资料: