Foundation 起步

什么是 Foundation？

  • Foundation 是一个免费的前端框架，用于快速开发。
  • Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。
  • Foundation 移动优先，可创建响应式网页。
  • Foundation 适用于初学者和专业人士。
  • Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。

Note 什么是响应式网页设计？

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

从哪里下载 Foundation?

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

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

2、使用云搜索MX教程官网提供的CDN（推荐）： 

									<!-- css 文件 -->
<link rel="stylesheet" href="http://cdn.static.yssmx.com/libs/foundation/5.5.3/css/foundation.min.css">
<!-- jQuery 库 -->
<script src="http://cdn.static.yssmx.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- JavaScript 文件 -->
<script src="http://cdn.static.yssmx.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
<!-- modernizr.js 文件 -->
<script src="http://cdn.static.yssmx.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

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

Note 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 为移动设备的响应式设计。框架的核心是移动优先。

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

< 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 >

基本 Foundation 页面

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

Foundation 实例

< div class = " row " > < div class = " medium-12 columns " > < div class = " panel " > < h1 > Foundation 页面 </ h1 > < p > 重置窗口大小，查看效果！ </ p > < button type = " button " class = " button small " > 我是按钮! </ button > </ div > </ div > </ div > < div class = " row " > < div class = " medium-4 columns " > < h3 > 云搜索MX教程 </ h3 > < p > 学的不仅是技术，更是梦想！！！ </ p > </ div > < div class = " medium-4 columns " > < h3 > 云搜索MX教程 </ h3 > < p > 学的不仅是技术，更是梦想！！！ </ p > </ div > < div class = " medium-4 columns " > < h3 > 云搜索MX教程 </ h3 > < p > 学的不仅是技术，更是梦想！！！ </ p > </ div > </ div >

尝试一下 »