當前位置：
首頁 > 知識 > Foundation 起步

Foundation 起步

知識 08-06

什麼是 Foundation？

  • Foundation 是一個免費的前端框架，用於快速開發。

  • Foundation 起步

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

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

  • Foundation 適用於初學者和專業人士。

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

Foundation 起步

從哪裡下載 Foundation?

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

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

2、使用提供的CDN（推薦）：

<!-- css 文件 --> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css"> <!-- jQuery 庫 --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script> <!-- modernizr.js 文件 --> <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

本站靜態 CDN 基於阿里雲服務。


Foundation 起步

使用 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></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>

什麼是響應式網頁設計？

響應式Web設計(Responsive Web design)的理念是： 頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。

Foundation 使用 CDN 的優勢:

Foundation 使用 CDN 提高了企業站點(尤其含有大量圖片和靜態頁面站點)的訪問速度，並大大提高以上性質站點的穩定性

為什麼使用 modernizr?

Some Foundation 的組件使用了比較前前沿的 HTML5 和 CSS3 特性，但不是所有瀏覽器都支持。 Modernizr 是一個用於檢測用戶瀏覽器HTML5和CSS3特性的JavaScript庫 - 讓組件能在所有瀏覽器上正常運行。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

※Font Awesome 圖標
※Foundation5 編程
※Foundation 文本
※Foundation 表格
※Vue.js 事件處理器

TAG:程序員小新人學習 |

您可能感興趣

※該怎麼玩兒？The Foundation of Learning
※粉底測評＃Dior forever undercover 24h foundation
※PH7現場 Blue Foundation
※mac fix studio foundation nc15 and嘮嗑哈哈哈
※Royal Foundation懷孕時尚抓拍欣賞
※蘋果 FoundationDB 開源 CloudKit 使用的數據層
※世界智能駕駛挑戰賽：AutoCore受邀代表Autoware Foundation參賽
※阿什莉·比克頓將參展K11 Art Foundation群展Emerald City
※Unity：AR Foundation將支持ARKit 3
※大健康鏈BHIC獲得Misitour foundation千萬美元戰略投資
※Unity AR Foundation開始支持ARKit 3.0
※重磅！羅氏24億美元收購Foundation Medicine
※滑板 | Foundation壓軸滑手Cole Wilson-滑板的一天！
※Apple的雲資料庫FoundationDB現在開源
※CoreLink推出Foundation 3D列印鈦金屬植入體多孔籠式系統
※蘋果開源NoSQL 資料庫FoundationDB
※如何看待FoundationDB資料庫發展前景？
※三言財經與Global Blockchain Foundation達成戰略合作，成為其中國首家戰略合作媒體
※Unity為手機AR推出跨平台開發工具AR Foundation
※羅氏155億與Foundation Medicine達成併購協議，全面進軍癌症基因檢測行業！