您好,登錄后才能下訂單哦!
Foundation 用于開發(fā)響應(yīng)式的 HTML, CSS and JavaScript 框架。
Foundation 是一個易用、強大而且靈活的框架,用于構(gòu)建基于任何設(shè)備上的 Web 應(yīng)用。 Foundation 是一個以移動優(yōu)先的流行框架。 |
什么是 Foundation?
什么是響應(yīng)式網(wǎng)頁設(shè)計?
響應(yīng)式Web設(shè)計(Responsive Web design)的理念是: 頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應(yīng)的響應(yīng)和調(diào)整。
從哪里下載 Foundation?
你可以通過以下兩種方式來獲取 Foundation:
1、從官網(wǎng)下載最新版本:http://foundation.zurb.com/。
2、使用菜鳥教程官網(wǎng)提供的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>
本站靜態(tài) CDN 基于阿里云服務(wù)。
Foundation 使用 CDN 的優(yōu)勢:
Foundation 使用 CDN 提高了企業(yè)站點(尤其含有大量圖片和靜態(tài)頁面站點)的訪問速度,并大大提高以上性質(zhì)站點的穩(wěn)定性
為什么使用 modernizr?
Some Foundation 的組件使用了比較前前沿的 HTML5 和 CSS3 特性,但不是所有瀏覽器都支持。 Modernizr 是一個用于檢測用戶瀏覽器HTML5和CSS3特性的JavaScript庫 - 讓組件能在所有瀏覽器上正常運行。
使用 Foundation 創(chuàng)建頁面 1. 添加 HTML5 doctype
Foundation 使用 HTML 元素和 CSS 屬性,所以需要添加 HTML5 doctype 文檔類型聲明。
同時我們可以設(shè)置文檔的語言屬性 lang 及字符編碼:
< !DOCTYPE html >
< html lang= "zh-cn" >
< head >
< meta charset= "utf-8" >
< /head >
< /html >
2. Foundation 5 移動優(yōu)先
Foundation 5 為移動設(shè)備的響應(yīng)式設(shè)計??蚣艿暮诵氖且苿觾?yōu)先。
為了確保頁面可自由縮放可以在 元素中添加以下 標(biāo)簽:
<meta name="viewport" content="width=device-width, initial-scale=1">
initial-scale:初始縮放比例,也即是當(dāng)頁面第一次 load 的時候縮放比例。
3. 初始化組件
一些 Foundation 組件是基于 jQuery 開發(fā)的,如:模態(tài)框、下拉菜單等。你可以使用以下 腳本來初始化組件:
$(document).ready(function() { $(document).foundation(); })
基本 Foundation 頁面
如何創(chuàng)建一個基本的 foundation 頁面:
Foundation 實例
<div class="row"> <div class="medium-12 columns"> <div class="panel"> <h2>Foundation 頁面</h2> <p>重置窗口大小,查看效果!</p> <button type="button" class="button small">我是按鈕!</button> </div> </div> </div> <div class="row"> <div class="medium-4 columns"> <h4>菜鳥教程</h4> <p>學(xué)的不僅是技術(shù),更是夢想!??!</p> </div> <div class="medium-4 columns"> <h4>菜鳥教程</h4> <p>學(xué)的不僅是技術(shù),更是夢想?。?!</p> </div> <div class="medium-4 columns"> <h4>菜鳥教程</h4> <p>學(xué)的不僅是技術(shù),更是夢想?。?!</p> </div> </div>
原文地址: https://www.linuxprobe.com/introduction-of-foundation.html
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。