良许Linux教程网 干货合集 快速上手Foundation框架

快速上手Foundation框架

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。 Foundation 是一个以移动优先的流行框架。

Foundation 起步介绍Foundation 起步介绍

什么是响应式网页设计?

响应式Web设计(Responsive Web design)的理念是: 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

从哪里下载 Foundation?

你可以通过以下两种方式来获取 Foundation:

1、从官网下载最新版本:http://foundation.zurb.com/。

2、使用菜鸟教程官网提供的CDN(推荐):


"stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">


本站静态 CDN 基于阿里云服务。

Foundation 使用 CDN 的优势:

Foundation 使用 CDN 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度,并大大提高以上性质站点的稳定性

为什么使用 modernizr?

Some Foundation 的组件使用了比较前前沿的 HTML5 和 CSS3 特性,但不是所有浏览器都支持。 Modernizr 是一个用于检测用户浏览器HTML5和CSS3特性的JavaScript库 – 让组件能在所有浏览器上正常运行。

使用 Foundation 创建页面

1. 添加 HTML5 doctype

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

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

nbsp;html>      
 "utf-8">   
2. Foundation 5 移动优先

Foundation 5 为移动设备的响应式设计。框架的核心是移动优先。

为了确保页面可自由缩放可以在 元素中添加以下 标签:

"viewport" content="width=device-width, initial-scale=1">
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
3. 初始化组件

一些 Foundation 组件是基于 jQuery 开发的,如:模态框、下拉菜单等。你可以使用以下脚本来初始化组件:

 

基本 Foundation 页面

如何创建一个基本的 foundation 页面:

Foundation 实例
 
"medium-12 columns">    
     

Foundation 页面

     

重置窗口大小,查看效果!

         
 
 
"medium-4 columns">    

菜鸟教程

   

学的不仅是技术,更是梦想!!!

 
 
"medium-4 columns">    

菜鸟教程

   

学的不仅是技术,更是梦想!!!

 
 
"medium-4 columns">    

菜鸟教程

   

学的不仅是技术,更是梦想!!!

 

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

img
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部