Foundation 起步 · W3School Foundation 教程

# Foundation 起步 ## 什么是 Foundation？ * Foundation 是一個免費的前端框架，用于快速開發。 * Foundation 包含了 HTML 和 CSS 的設計模板，提供多種 Web 上的 UI 組件，如表單、按鈕、Tabs 等等。同時也提供了多種 JavaScript 插件。 * Foundation 移動優先，可創建響應式網頁。 * Foundation 適用于初學者和專業人士。 * Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。 > ![Note](https://box.kancloud.cn/2015-12-12_566b901025f8f.jpg) > **什么是響應式網頁設計？** > 響應式Web設計(Responsive Web design)的理念是：頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。 ## 從哪里下載 Foundation? 你可以通過以下兩種方式來獲取 Foundation： 1、從官網下載最新版本：[http://foundation.zurb.com/](http://foundation.zurb.com/)。 2、使用菜鳥教程官網提供的CDN（推薦）： ```  <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-5.5.3/foundation.min.css">  <script src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script>  <script src="http://static.runoob.com/assets/foundation-5.5.3/js/foundation.min.js"></script>  <script src="http://static.runoob.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> ``` 本站靜態 CDN 基于阿里云服務。 > ![Note](https://box.kancloud.cn/2015-12-12_566b901025f8f.jpg) > **Foundation 使用 CDN 的優勢:** > Foundation 使用 CDN 提高了企業站點(尤其含有大量圖片和靜態頁面站點)的訪問速度，并大大提高以上性質站點的穩定性 > **為什么使用 modernizr?** > 一些 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 頁面: ``` <!DOCTYPE html> <html> <head> <title>Foundation Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-5.5.3/foundation.min.css">  <script src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script>  <script src="http://static.runoob.com/assets/foundation-5.5.3/js/foundation.min.js"></script>  <script src="http://static.runoob.com/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> ```