Foundation起步
本文参考官方文档，网址是：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>
Foundation起步相关推荐
- TFS(Team Foundation Server)介绍和入门
在本文的两个部分中,我将介绍Team Foundation Server的一些核心特征,重点介绍在本产品的日常应用中是如何将这些特性结合在一起使用的. 作为一名软件开发人员,在我的职业生涯中,我经常会 ...
- Windows Presentation Foundation（介绍外连接）
Windows Presentation Foundation 2011/08/12 更新:2010 年 12 月 Windows Presentation Foundation (WPF) 为开发人 ...
- 从试用到使用：计算机视觉产业新一轮发展的起步年
参加 2018 AI开发者大会,请点击官网报名 CSDN 出品的<2018-2019 中国人工智能产业路线图>V2.0 版即将重磅面世! V1.0 版发布以来,我们有幸得到了诸多读者朋友及 ...
- react中试用leaflet简单起步
写在最前边,前不久的一个项目中要做一个地图的数据可视化需求.项目中用到了 Leaflet.项目到现在功能已经基本实现,现在写下来做一下记录.Demo是用 create-react-app 搭建的.源码 ...
- 借助Unity AR Foundation构建跨平台AR应用
Unity是同名游戏引擎的制造商,它在继续推进自己的AR Foundation项目,该项目旨在让开发者可以更容易地创建能够同时在iOS和Android上运行的AR应用.其最新版本增加了对ARKit A ...
- Foundation ActionScript 3.0.With Flash CS3 And Flex ..
这是一本很好的电子书,可以帮助你更好的学习flash and flex. Foundation ActionScript 3.0.With Flash CS3 And Flex.PDF 转载于:htt ...
- 【译】在ASP.NET中创建PDF-iTextSharp起步
.Net framework 中自身并不包含可以和pdf打交道的方法.所以,当你需要你的ASP.Net Web应用程序中包含创建或与PDF文件交互的部分时,就不得不去找可用的第三方组件.使用谷歌可以搜 ...
- Foundation 框架 归档
一.使用XML属性列表归档 此方法适用于NSString.NSDictionary.NSarray.NSDate.NSnumber,其中atomically参数表示先将字典写入临时备份文件,成功之后, ...
- Foundation 框架
前言 框架是由许多类.方法.函数和文档按照一定的逻辑组织起来的集合,以使研发程序更容易. Foundation 框架:为所有程序开发奠定基础的框架称为 Foundation 框架. Cocoa :是指 ...
最新文章
- ASP.NET 网页- WebGrid 帮助器简介
- BBED修复DB启动问题
- [原创]正则表达式在c#中的学习和应用
- Graph Attention Networks
- 正则表达式删除文件中某些列
- ABP vNext 自动注入，暗藏天坑如斯
- 带注释源码php,php的注释方法
- php球鞋,适合宽脚选手的球鞋有哪些“宽型脚”必备的实战利器推荐
- 案例-图片缩放（CSS3）
- 逆向工程核心原理笔记
- SHELL使用sudo echo x 时提示权限不够，怎么办？
- java 解析p12_java读取*.p12证书的信息
- Win11不能拖拽图片到任务栏软件上快速打开怎么办
- 基本函数依赖和候选键_给定一组字母表示的函数依赖集，怎样确定候选键？
- 智能路由器要成功 该怎样修炼穿墙术？
- 剑指offe题解(二叉树中和为某一值的路径）
- 用python根据生日判断星座_求指教，我这个 代码是实现 根据生日判断星座
- UI设计都有哪些分类，UI设计岗位哪个更好
- Docker制作base镜像
- gearman 总结