新聞中心
Foundation 用于開發(fā)響應(yīng)式的 HTML, CSS and JavaScript 框架。 Foundation 是一個(gè)易用、強(qiáng)大而且靈活的框架,用于構(gòu)建基于任何設(shè)備上的 Web 應(yīng)用。 Foundation 是一個(gè)以移動(dòng)優(yōu)先的流行框架。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),洮南企業(yè)網(wǎng)站建設(shè),洮南品牌網(wǎng)站建設(shè),網(wǎng)站定制,洮南網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,洮南網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)?
響應(yīng)式Web設(shè)計(jì)(Responsive Web design)的理念是: 頁(yè)面的設(shè)計(jì)與開發(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、從官網(wǎng)下載最新版本:http://foundation.zurb.com/。
2、使用菜鳥教程官網(wǎng)提供的CDN(推薦):
"stylesheet" >
本站靜態(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 及字符編碼:
nbsp;html>
"utf-8">
2. Foundation 5 移動(dòng)優(yōu)先
Foundation 5 為移動(dòng)設(shè)備的響應(yīng)式設(shè)計(jì)??蚣艿暮诵氖且苿?dòng)優(yōu)先。
為了確保頁(yè)面可自由縮放可以在 元素中添加以下 標(biāo)簽:
"viewport" content="width=device-width, initial-scale=1">
3. 初始化組件
一些 Foundation 組件是基于 jQuery 開發(fā)的,如:模態(tài)框、下拉菜單等。你可以使用以下腳本來(lái)初始化組件:
基本 Foundation 頁(yè)面
如何創(chuàng)建一個(gè)基本的 foundation 頁(yè)面:
Foundation 實(shí)例
"medium-12 columns">
Foundation 頁(yè)面
重置窗口大小,查看效果!
type="button" class="button small">我是按鈕!
"medium-4 columns">
菜鳥教程
學(xué)的不僅是技術(shù),更是夢(mèng)想?。?!
"medium-4 columns">
菜鳥教程
學(xué)的不僅是技術(shù),更是夢(mèng)想?。?!
"medium-4 columns">
菜鳥教程
學(xué)的不僅是技術(shù),更是夢(mèng)想?。?!
當(dāng)前標(biāo)題:快速上手Foundation框架
標(biāo)題鏈接:http://www.fisionsoft.com.cn/article/cccceji.html


咨詢
建站咨詢
