亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

watak

Foundation 安裝

什么是 Foundation？

  • Foundation 是一個(gè)免費(fèi)的前端框架，用于快速開(kāi)發(fā)。
  • Foundation 包含了 HTML 和 CSS 的設(shè)計(jì)模板，提供多種 Web 上的 UI 組件，如表單、按鈕、Tabs 等等。同時(shí)也提供了多種 JavaScript 插件。
  • Foundation 移動(dòng)優(yōu)先，可創(chuàng)建響應(yīng)式網(wǎng)頁(yè)。
  • Foundation 適用于初學(xué)者和專業(yè)人士。
  • Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。


什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)？

響應(yīng)式Web設(shè)計(jì)(Responsive Web design)的理念是： 頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。

從哪里下載 Foundation?

你可以通過(guò)以下兩種方式來(lái)獲取 Foundation：

1、頁(yè)面下方下載最新版本。

2、使用手冊(cè)網(wǎng)教程官網(wǎng)提供的CDN（推薦）：

<!--?css?文件?-->
<link?rel="stylesheet"?>
<!--?jQuery?庫(kù)?-->
<script?src="http://ku.shouce.ren/libs/jquery/2/jquery2.0.3.min.js"></script>
<!--?JavaScript?文件?-->
<script?src="http://ku.shouce.ren/libs/foundation/5.5.3/foundation.min.js"></script>
<!--?modernizr?文件?-->
<script?src="http://ku.shouce.ren/libs/foundation/5.5.3/modernizr.js"></script>

本站靜態(tài) CDN 基于阿里云服務(wù)。

Foundation 使用 CDN 的優(yōu)勢(shì):
Foundation 使用 CDN 提高了企業(yè)站點(diǎn)(尤其含有大量圖片和靜態(tài)頁(yè)面站點(diǎn))的訪問(wèn)速度，并大大提高以上性質(zhì)站點(diǎn)的穩(wěn)定性

為什么使用 modernizr?
Some ?Foundation 的組件使用了比較前前沿的 HTML5 和 CSS3 特性，但不是所有瀏覽器都支持。 Modernizr 是一個(gè)用于檢測(cè)用戶瀏覽器HTML5和CSS3特性的JavaScript庫(kù) - 讓組件能在所有瀏覽器上正常運(yùn)行。

使用 Foundation 創(chuàng)建頁(yè)面

1. 添加 HTML5 doctype

Foundation 使用 HTML 元素和 CSS 屬性，所以需要添加 HTML5 doctype 文檔類型聲明。

同時(shí)我們可以設(shè)置文檔的語(yǔ)言屬性 lang 及字符編碼：

<!DOCTYPE?html>
<html?lang="zh-cn">
??<head>
???????<meta?charset="utf-8">?
??</head>
</html>

?

2. Foundation 5 移動(dòng)優(yōu)先

Foundation 5 為移動(dòng)設(shè)備的響應(yīng)式設(shè)計(jì)。框架的核心是移動(dòng)優(yōu)先。

為了確保頁(yè)面可自由縮放可以在 <head> 元素中添加以下 <meta> 標(biāo)簽:

<meta?name="viewport"?content="width=device-width,?initial-scale=1">
  • width：控制 viewport 的大小，可以指定的一個(gè)值，如果 600，或者特殊的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時(shí)的 CSS 的像素）。
  • initial-scale：初始縮放比例，也即是當(dāng)頁(yè)面第一次 load 的時(shí)候縮放比例。

3. 初始化組件

一些 Foundation 組件是基于 jQuery 開(kāi)放的，如：模態(tài)框、下拉菜單等。你可以使用以下腳本來(lái)初始化組件：

<script>
$(document).ready(function()?{
???????$(document).foundation();
})
</script>

?

基本 Foundation 頁(yè)面

如何創(chuàng)建一個(gè)基本的 foundation 頁(yè)面:

<!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"?>

??<!--?jQuery?庫(kù)?-->
??<script?src="http://ku.shouce.ren/libs/jquery/2/jquery2.0.3.min.js"></script>

??<!--?JavaScript?文件?-->
??<script?src="http://ku.shouce.ren/libs/foundation/5.5.3/foundation.min.js"></script>

??<!--?modernizr?文件?-->
??<script?src="http://ku.shouce.ren/libs/foundation/5.5.3/modernizr.js"></script>
</head>
<body>
?
<div?class="row">
??<div?class="medium-12?columns">
????<div?class="panel">
??????<h1>Foundation?頁(yè)面</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>

實(shí)例預(yù)覽 ?


下載

關(guān)于我們 聯(lián)系我們 留言板

手冊(cè)網(wǎng)

Artikel sebelumnya： Artikel seterusnya：