Foundation5怎么学_Foundation5教程-沃梦达编程网

Foundation5教程

Foundation5简介

Foundation用于开发响应式的HTML, CSS and JavaScript 框架。 Foundation是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。Foundation是一个以移动优先的流行框架。
数以百万计的设计师和工程师采用 Foundation 作为他们的产品和网站设计的前端框架。Foundation 是第一个响应式、语义化和移动优先的开源框架。最新发布的 Foundation 5 是最先进的响应式前端开发框架，在构建产品和网站的各个方面都更快。
Foundation 5 建立了一个新的命令行工具，可以让你更快速的建立起 Foundation 项目，这些项目现在将使用 Libsass——后端的 Sass 编译库，这将大大加快执行速度。
Foundation 是一个免费的前端框架，用于快速开发。
Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。
Foundation 移动优先，可创建响应式网页。
Foundation 适用于初学者和专业人士。
Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。

什么是响应式

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

怎么创建页面

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 为移动设备的响应式设计。框架的核心是移动优先。
为了确保页面可自由缩放可以在元素中添加以下标签:

<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).ready(function() {    
  $(document).foundation();
})
</script>

Foundation5教程

Foundation5教程

Foundation5简介

什么是响应式

怎么创建页面

相关教程