Foundation 起步
什麼是 Foundation？
Foundation 是一個免費的前端框架，用於快速開發。
Foundation 包含了 HTML 和 CSS 的設計模板，提供多種 Web 上的 UI 元件，如表單、按鈕、Tabs 等等。同時也提供了多種 JavaScript 插件。
Foundation 行動優先，可建立響應式網頁。
Foundation 適用於初學者和專業人士。
Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。
 | #什麼是響應式網頁設計？ 響應式Web設計(Responsive Web design)的概念是： 頁面的設計與開發應根據使用者行為以及設備環境(系統平台、螢幕尺寸、螢幕定向等)進行相應的回應與調整。 |
|---|
從哪裡下載Foundation?
#你可以透過以下兩種方式來取得Foundation：
1、從官網下載最新版本：http://foundation.zurb.com/。
2、使用php中文網官網提供的CDN（建議）：
<!-- css 檔 -->
<link rel="stylesheet " href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<!-- jQuery 庫 -->
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<!-- JavaScript 文件-->
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<!-- modernizr 檔 -->
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"> </script>
<link rel="stylesheet " href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<!-- jQuery 庫 -->
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<!-- JavaScript 文件-->
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<!-- modernizr 檔 -->
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"> </script>
本站靜態CDN 基於阿里雲服務。
| 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>
<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#>
$(document).foundation();
})
<#/script#>
基本Foundation 頁面如何建立一個基本的foundation 頁面
#實例
執行實例»點擊"運行實例" 按鈕查看線上實例
<!DOCTYPE html> <html> <head> <title>Foundation Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- css 文件 --> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <div class="medium-12 columns"> <div class="panel"> <h1>Foundation 页面</h1> <p>重置窗口大小，查看效果！</p> <button type="button" class="button small">I Like It!</button> </div> </div> </div> <div class="row"> <div class="medium-4 columns"> <h3>Column 1</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 2</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 3</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> </div> </body> </html>
執行實例»點擊"運行實例" 按鈕查看線上實例
