Foundation起步介绍
Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。 Foundation 是一个以移动优先的流行框架。 |
专注于为中小企业提供网站制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业营山免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
什么是 Foundation?
- Foundation 是一个免费的前端框架,用于快速开发。
- Foundation 包含了 HTML 和 CSS 的设计模板,提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。
- Foundation 移动优先,可创建响应式网页。
- Foundation 适用于初学者和专业人士。
- Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。
什么是响应式网页设计?
响应式Web设计(Responsive Web design)的理念是: 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
从哪里下载 Foundation?
你可以通过以下两种方式来获取 Foundation:
1、从官网下载最新版本:http://foundation.zurb.com/。
2、使用菜鸟教程官网提供的cdn(推荐):
本站静态 CDN 基于阿里云服务。
Foundation 使用 CDN 的优势:
Foundation 使用 CDN 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度,并大大提高以上性质站点的稳定性
为什么使用 modernizr?
Some Foundation 的组件使用了比较前前沿的 HTML5 和 CSS3 特性,但不是所有浏览器都支持。 Modernizr 是一个用于检测用户浏览器HTML5和CSS3特性的JavaScript库 - 让组件能在所有浏览器上正常运行。
使用 Foundation 创建页面 1. 添加 HTML5 doctype
Foundation 使用 HTML 元素和 CSS 属性,所以需要添加 HTML5 doctype 文档类型声明。
同时我们可以设置文档的语言属性 lang 及字符编码:
< !DOCTYPE html >
< html lang= "zh-cn" >
< head >
< meta charset= "utf-8" >
< /head >
< /html >
2. Foundation 5 移动优先
Foundation 5 为移动设备的响应式设计。框架的核心是移动优先。
为了确保页面可自由缩放可以在 元素中添加以下 标签:
- width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
3. 初始化组件
一些 Foundation 组件是基于 jQuery 开发的,如:模态框、下拉菜单等。你可以使用以下 脚本来初始化组件:
$(document).ready(function() { $(document).foundation(); })
基本 Foundation 页面
如何创建一个基本的 foundation 页面:
Foundation 实例
Foundation 页面
重置窗口大小,查看效果!
菜鸟教程
学的不仅是技术,更是梦想!!!
菜鸟教程
学的不仅是技术,更是梦想!!!
菜鸟教程
学的不仅是技术,更是梦想!!!
原文地址: https://www.linuxprobe.com/introduction-of-foundation.html
网页名称:Foundation起步介绍
本文链接:http://ybzwz.com/article/jggjgp.html