Foundation 起步

Foundation 是一個免費的前端架構，用于快速開發。

Foundation 包含了 HTML 和 CSS 的設計模闆，提供多種 Web 上的 UI 元件，如表單、按鈕、Tabs 等等。同時也提供了多種 JavaScript 插件。

Foundation 移動優先，可建立響應式網頁。

Foundation 适用于初學者和專業人士。

Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。

<b>什麼是響應式網頁設計？</b>

響應式Web設計(Responsive Web design)的理念是：

頁面的設計與開發應當根據使用者行為以及裝置環境(系統平台、螢幕尺寸、螢幕定向等)進行相應的響應和調整。

你可以通過以下兩種方式來擷取 Foundation：

1、從官網下載下傳最新版本：http://foundation.zurb.com/。

2、使用菜鳥教程官網提供的CDN（推薦）：

本站靜态 CDN 基于阿裡雲服務。

<b>Foundation 使用 CDN 的優勢:</b>

Foundation 使用 CDN 提高了企業站點(尤其含有大量圖檔和靜态頁面站點)的通路速度，并大大提高以上性質站點的穩定性

為什麼使用 modernizr?

Some

Foundation 的元件使用了比較前前沿的 HTML5 和 CSS3 特性，但不是所有浏覽器都支援。 Modernizr 是一個用于檢測使用者浏覽器HTML5和CSS3特性的JavaScript庫 - 讓元件能在所有浏覽器上正常運作。

1. 添加 HTML5 doctype

Foundation 使用 HTML 元素和 CSS 屬性，是以需要添加 HTML5 doctype 文檔類型聲明。

同時我們可以設定文檔的語言屬性 lang 及字元編碼：

&lt;!DOCTYPE html&gt;

&lt;html lang="zh-cn"&gt;

  &lt;head&gt;

&lt;meta charset="utf-8"&gt;

  &lt;/head&gt;

&lt;/html&gt;

2. Foundation 5 移動優先

Foundation 5 為移動裝置的響應式設計。架構的核心是移動優先。

為了確定頁面可自由縮放可以在 <code>&lt;head&gt;</code> 元素中添加以下 <code>&lt;meta&gt;</code> 标簽:

&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為裝置的寬度（機關為縮放為 100% 時的 CSS 的像素）。

initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。

3. 初始化元件

一些 Foundation 元件是基于 jQuery 開發的，如：模态框、下拉菜單等。你可以使用以下腳本來初始化元件：

&lt;script&gt;

$(document).ready(function() {

$(document).foundation();

})

&lt;/script&gt;

如何建立一個基本的 foundation 頁面:

&lt;div class="row"&gt;

&lt;div class="medium-12 columns"&gt;

&lt;div class="panel"&gt;

&lt;h1&gt;Foundation 頁面&lt;/h1&gt;

&lt;p&gt;重置視窗大小，檢視效果！&lt;/p&gt;

&lt;button type="button" class="button small"&gt;我是按鈕!&lt;/button&gt;

&lt;/div&gt;

&lt;div class="medium-4 columns"&gt;

&lt;h3&gt;菜鳥教程&lt;/h3&gt;

&lt;p&gt;學的不僅是技術，更是夢想！！！&lt;/p&gt;