Foundation 起步

Foundation 是一个免费的前端框架，用于快速开发

为什么是 Foundation ？

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

什么是响应式网页设计？

响应式Web设计(Responsive Web design)的理念是

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

哪里下载 Foundation ?

我们可以通过以下两种方式来获取 Foundation

从官网下载最新版本

https://foundation.zurb.com/
使用 CDN

<!-- css 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/foundation/5.5.3/css/foundation.min.css">

<!-- jQuery 库 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

<!-- JavaScript 文件 -->
<script src="https://cdn.bootcss.com/foundation/5.5.3/js/foundation.min.js"></script>

<!-- modernizr.js 文件 -->
<script src="https://cdn.bootcss.com/foundation/5.5.3/js/vendor/modernizr.js"></script>

Foundation 使用 CDN 的优势

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

为什么使用 modernizr?

一些 Foundation 的组件使用了比较前前沿的 HTML5 和 CSS3 特性，但不是所有浏览器都支持

Modernizr 是一个用于检测用户浏览器 HTML5 和 CSS3 特性的 JavaScript 库 - 让组件能在所有浏览器上正常运行

创建 Foundation 页面

添加 HTML5 doctype

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

同时我们可以设置文档的语言属性 lang 及字符编码
```
<!DOCTYPE html><html lang="zh-cn">  
<meta charset="utf-8">
</html>
```
Foundation 5 移动优先

Foundation 5 为移动设备的响应式设计

Foundation 5 框架的核心是移动优先

为了确保页面可自由缩放可以添加以下 <meta> 标签
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
- width： 控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素
- initial-scale： 初始缩放比例，也即是当页面第一次 load 的时候缩放比例

引入样式表

<link rel="stylesheet" href="https://cdn.bootcss.com/foundation/5.5.3/css/foundation.min.css">

初始化组件

一些 Foundation 组件是基于 jQuery 开发的，如：模态框、下拉菜单等

首先引入 Foundation Javascript

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/foundation/5.5.3/js/foundation.min.js"></script>
<script src="https://cdn.bootcss.com/foundation/5.5.3/js/vendor/modernizr.js"></script>

所以需要使用以下脚本来初始化组件

<script>
    $(document).ready(function() {$(document).foundation();})
</script>

最简单的 Foundation 页面

下面的代码创建了一个最简单也是最基础的 Foundation 页面

<!DOCTYPE html>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/foundation/5.5.3/css/foundation.min.css">
<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>简单教程</h3>
    <p>简单教程，简单编程</p>
  </div>
  <div class="medium-4 columns">
    <h3>简单教程</h3>
    <p>简单教程，简单编程</p>
  </div>
  <div class="medium-4 columns">
    <h3>简单教程</h3>
    <p>简单教程，简单编程</p>
  </div>
</div>

运行范例 »