《響應(yīng)式開(kāi)發(fā)》16個(gè)最佳響應(yīng)式HTML5框架分享

TML5框架可以快速構(gòu)建響應(yīng)式網(wǎng)站，它們幫助程序員減少編碼工作，減少冗余的代碼。如今有很多免費(fèi)的HTML5框架可供使用，由于它們有著響應(yīng)式設(shè)計(jì)、跨瀏覽器兼容、相對(duì)輕量級(jí)等特點(diǎn)，這些框架在開(kāi)發(fā)中都十分流行。如果你也對(duì)HTML5框架感興趣，你可以看看下面我列出的一些最佳的響應(yīng)式HTML5框架，幫助你快速開(kāi)發(fā)網(wǎng)站。

1. Twitter Bootstrap

twitter bootstrap - Responsive HTML5 frameworks

Bootstrap來(lái)自Twitter，是目前最受歡迎的前端框架，它簡(jiǎn)潔靈活，使得Web開(kāi)發(fā)更加方便快捷。它有著優(yōu)雅的HTMCSS規(guī)范，以及構(gòu)建響應(yīng)式網(wǎng)站的基本的組件，例如12列柵格布局、jQuery插件、Bootstrap控件等等。

2. HTML5 Boilerplate

HTML5 boilerplate - Responsive HTML5 Frameworks

HTML5 Boilerplate的核心是用于幫助開(kāi)發(fā)HTML5站點(diǎn)和應(yīng)用程序的組件，它有著出色的性能和獨(dú)立性，幫助你開(kāi)始一個(gè)新的項(xiàng)目。

3. Foundation

Foundation - Responsive HTML5 Frameworks

Foundation一款非常先進(jìn)的前端框架，易用、強(qiáng)大而且靈活，可用于構(gòu)建基于任何設(shè)備上的 Web應(yīng)用，提供多種Web上的UI組件，如表單、按鈕、Tabs 等等。

4. Ulkit

UIkit

Ulkit是一個(gè)輕量級(jí)、模塊化的前端框架，幫助開(kāi)發(fā)出快速、強(qiáng)大的Web接口，它有著全面的HTML、CSS和JS集合，易于使用和擴(kuò)展。

5. HTML5 KickStart

HTML5 KickStart - Responsive HTML5 Frameworks

HTML5 KickStart集合了HTML5、CSS和JS，幫助開(kāi)發(fā)人員快速開(kāi)發(fā)Web產(chǎn)品，它覆蓋了所有的UI組件，同時(shí)也包含一些有用的JS插件。

6. Gumby

Gumby

Gumby 2基于Sass開(kāi)發(fā)，是一款出色的響應(yīng)式CSS框架，它包括一個(gè)Web UI工具包，有好看按鈕，表格，導(dǎo)航、標(biāo)簽、JS插件等。

7. Skeleton

Skeleton - Responsive HTML5 Frameworks

Skeleton有著簡(jiǎn)單、界面友好的特點(diǎn)，有一系列CSS和JS文件的集合，它可以幫你快速地調(diào)整網(wǎng)頁(yè)在不同分辨率下的顯示效果，可以?xún)?yōu)雅地等比例縮放桌面、平板、手機(jī)上的瀏覽尺寸。

8. Groundwork

Groundwork

Groundwork是一個(gè)響應(yīng)式的HTML5，CSS和JavaScript框架，是基于Sass預(yù)處理器的開(kāi)源項(xiàng)目。Groundwork 提供多種UI組件，如導(dǎo)航、按鈕、圖標(biāo)、表單、Tabs、對(duì)話框、工具提示等等，可以創(chuàng)建適應(yīng)多種瀏覽設(shè)備的布局。

9. Base

Base

Base是一款系統(tǒng)化的、輕量級(jí)且易于擴(kuò)展的框架，幫助你創(chuàng)建更強(qiáng)大的響應(yīng)式網(wǎng)站。

10. Montage

Montage - Free Responsive HTML5 Frameworks

Montage用于創(chuàng)建現(xiàn)代的Web應(yīng)用，可以在客戶(hù)端建立豐富的用戶(hù)界面，并使用面向服務(wù)的后端處理數(shù)據(jù)。它有著出色的特性，例如復(fù)用組件和HTML模板，使用聲明式的組件模型和聲明式的數(shù)據(jù)綁定等等。

11. Layers CSS

Layers CSS

Layers CSS是一款輕量級(jí)的CSS框架，它集中處理了主要的樣式結(jié)構(gòu)，支持響應(yīng)式布局。

12. 52Framework

52Framework - Free Responsive HTML5 Frameworks

52Framework是一個(gè)Web開(kāi)發(fā)框架，它能實(shí)現(xiàn)HTML5和CSS3。它是一個(gè)跨瀏覽器的框架，可以在所有主流的瀏覽器上運(yùn)行。它集合了很多優(yōu)秀的組件，比如HTML5視頻播放器、HTML5 canvas、HTML5認(rèn)證表單等。

13. CreateJS

CreateJS - Useful Responsive HTML5 Framework for web development

CreateJS是一套模塊庫(kù)和工具，豐富了網(wǎng)站的交互性?xún)?nèi)容。它有著對(duì)象管理、tweening等特征。套件包括EaselJs, TweenJS, SoundJS, PreloadJS 和Zoe。

14. Kube

Kube - Best Free HTML5 Frameworks 2015

Kube足夠的簡(jiǎn)單，足夠小，具有很強(qiáng)的自適應(yīng)能力，是響應(yīng)式的 CSS 框架。它擁有最新最炫的網(wǎng)格和漂亮的字體排版，沒(méi)有任何樣式綁定，給用戶(hù)以絕對(duì)的自由。

15. Less Framework

Less Framework - Popular HTML5 Frameworks

Less Framework是一個(gè)現(xiàn)代的前端框架。它是一個(gè)CSS網(wǎng)格系統(tǒng)，用來(lái)設(shè)計(jì)自適應(yīng)網(wǎng)頁(yè)，包括4個(gè)布局和3套字體預(yù)設(shè)置，所有都是基于單個(gè)網(wǎng)格的。

16. SkelJS

SkelJS - Best Free Responsive HTML5 Frameworks 2015

Skel.js是一個(gè)用于創(chuàng)建響應(yīng)式站點(diǎn)和應(yīng)用的輕量級(jí)前端框架。

===========

公眾號(hào)：春樹(shù)鎮(zhèn)

研究討論：web設(shè)計(jì)，PHP開(kāi)發(fā)，網(wǎng)站建設(shè)，互聯(lián)網(wǎng)技術(shù)，寫(xiě)作，小說(shuō)，電影

如今移動(dòng)端開(kāi)發(fā)領(lǐng)域H5勢(shì)頭越來(lái)越猛，不管是H5小應(yīng)用、小游戲，還是hybrid混合開(kāi)發(fā)都有不少市場(chǎng)。原生端APP開(kāi)發(fā)越來(lái)越不能滿足快速迭代的訴求。而隨著手機(jī)硬件配置的不斷增強(qiáng)。以前抱怨的手機(jī)端web app性能低下聲音也越來(lái)越少了。下面隨小編一起來(lái)看下，這么多年來(lái)喬老爺子推崇的HTML5進(jìn)化到了哪種程度。炸裂推薦50+款流行框架，不論新舊，總有一款適合你。

RAD.js

rad.js是一個(gè)快速建立移動(dòng)應(yīng)用程序的框架。優(yōu)化iOS，Android和Windows Phone 8，以及支持所有主流的Web瀏覽器。

查看地址：http://rad-js.com/

Ionic

Ionic是一款接近原生體驗(yàn)的Html5移動(dòng)APP開(kāi)發(fā)框架。Ionic既是一個(gè)CSS框架也是一個(gè)JavaScript UI庫(kù)。通過(guò)SASS + AngularJS + Cordova 來(lái)構(gòu)建應(yīng)用程序，它提供了很多UI組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。能想到的基礎(chǔ)組件都能在這里找到。結(jié)合豐富的Cordova插件，提升與原生交互功能。在iOS和Android端用戶(hù)體驗(yàn)上有不錯(cuò)的表現(xiàn)。

查看地址：http://ionicframework.com/

LungoJS

一款向需要設(shè)計(jì)構(gòu)建跨終端應(yīng)用的開(kāi)發(fā)者提供的HTML5框架。

查看地址：http://lungo.tapquo.com/

Mobile Angula UI

一款基于Bootstrap3和Angular的手機(jī)端HTML5 UI框架。

查看地址：http://mobileangularui.com/

NativeScript

使用Angular,TypeScript或者原生JavaScript來(lái)構(gòu)建真正原生手機(jī)APP的開(kāi)源框架。

查看地址：https://www.nativescript.org/

Sencha Touch

如果你使用過(guò)Ext，easyUI這類(lèi)框架來(lái)構(gòu)建web2.0時(shí)代管理臺(tái)的話，那么你使用Sencha Touch時(shí)一定不會(huì)感到陌生。一款基于html5和JavaScript的跨平臺(tái)手機(jī)應(yīng)用框架。

查看地址：http://www.sencha.com/products/touch/#overview

PhoneGap

要想將制作好大web app放到手機(jī)里，逃不開(kāi)應(yīng)用打包的過(guò)程。大名鼎鼎PhoneGap就是加殼工程的鼻祖。現(xiàn)如今開(kāi)源部分改名為Cordova。強(qiáng)大的插件機(jī)制，讓web前端開(kāi)發(fā)者有機(jī)會(huì)體會(huì)原生組件的魅力。想要自己封裝hybrid應(yīng)用，學(xué)習(xí)Cordova源碼里的優(yōu)化設(shè)計(jì)代碼是一個(gè)非常重要的部分。

查看地址：http://phonegap.com/

RhoMobile

面向消費(fèi)者與企業(yè)開(kāi)發(fā)人員的移動(dòng)應(yīng)用程序平臺(tái)。

查看地址：http://rhomobile.com/

jQuery Mobile Framework

jQuery大名不用小編介紹了，jQuery mobile是一款早期推出的手機(jī)端跨終端UI組件庫(kù)。和jQuery UI風(fēng)格類(lèi)似。喜歡使用jQuery的朋友不要錯(cuò)過(guò)。

查看地址：https://jquerymobile.com/

Onsen UI

基于自定義元素構(gòu)建移動(dòng)前端的HTML5框架。

查看地址：http://onsen.io/

Apache Flex

一款構(gòu)建web與手機(jī)應(yīng)用的開(kāi)源項(xiàng)目框架。從早期adobe Flash中分離出來(lái)，出使用action script或者h(yuǎn)5的方式構(gòu)建富客戶(hù)端，以flash player，或者adobe air運(yùn)行時(shí)環(huán)境。

查看地址：https://flex.apache.org/

Agate Mobile Application Framework

一款跨平臺(tái)開(kāi)發(fā)ios、Android原生應(yīng)用，不能用于開(kāi)發(fā)web app。

查看地址：http://applusform.com/en/

eMobc

用XML來(lái)開(kāi)發(fā)生成web、手機(jī)和原生端應(yīng)用的開(kāi)源框架。

查看地址：http://www.emobc.com/

AppGyver Steroids

構(gòu)建混合應(yīng)用程序所需的工具集，提供iOS和Android的測(cè)試人員和開(kāi)發(fā)人員。

查看地址：http://www.appgyver.eu/

Application Craft

一整套的跨平臺(tái)應(yīng)用開(kāi)發(fā)解決方案，從設(shè)計(jì)到開(kāi)發(fā)，各種方便的IDE。不過(guò)是收費(fèi)的。

查看地址：https://www.applicationcraft.com/

ChocolateChip-UI

chocolatechip UI是一個(gè)開(kāi)發(fā)移動(dòng)Web應(yīng)用程序框架。你只需要了解三種東西：語(yǔ)義化的HTML5標(biāo)簽、CSS和JavaScript。

查看地址：http://chocolatechip-ui.com/

DHTMLX Touch

同樣老牌的組件庫(kù)框架，從桌面端轉(zhuǎn)到移動(dòng)端，提供同樣可靠及豐富的組件。

查看地址：http://dhtmlx.com/docs/products/dhtmlxTouch/

Corona Labs

強(qiáng)大的跨平臺(tái)手機(jī)端框架之一，使用Lua腳本語(yǔ)言作為開(kāi)發(fā)語(yǔ)言，有自己的2D的游戲引擎。主要適用于開(kāi)發(fā)游戲。

查看地址：https://coronalabs.com/

Framework7

完美還原原生端組件的H5框架。

查看地址：http://www.idangero.us/framework7/

Gideros

Gideros是一個(gè)免費(fèi)的并且開(kāi)源的框架，提供了跨平臺(tái)開(kāi)發(fā)優(yōu)質(zhì)游戲的方式。你只需要幾個(gè)小時(shí)就可以構(gòu)建出你的偉大游戲。開(kāi)發(fā)語(yǔ)言是Lua。

查看地址：http://giderosmobile.com/

未完待續(xù)。。。更多精彩實(shí)用的框架請(qǐng)看下集~

onic是開(kāi)源的移動(dòng)應(yīng)用開(kāi)發(fā)框架，便于構(gòu)建高質(zhì)量的本地和網(wǎng)絡(luò)技術(shù)先進(jìn)的web應(yīng)用程序。Ionic是基于Angular，有許多顯著的性能提升，可用性和功能都在不斷的進(jìn)行改進(jìn)。只需要會(huì)一點(diǎn)前端知識(shí)就能玩轉(zhuǎn)Ionic。

Ionic的應(yīng)用程序創(chuàng)建開(kāi)發(fā)主要通過(guò)Ionic命令行實(shí)用工具(“CLI—命令行界面”)，并使用cordova構(gòu)建和部署本地應(yīng)用。建立Ionic項(xiàng)目，您需要安裝最新版本的CLI和cordova。在你這樣做之前，你需要一個(gè)node.js的最新版本。這些在我之前的文章有安裝教程。

官網(wǎng)地址：
http://ionicframework.com/
版本更新說(shuō)明：
https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

學(xué)習(xí)ionic需要了解的知識(shí)：

HTML5
CSS3
TypeScript（JavaScript）
Angular2+

下面是一些組件的示例，不同系統(tǒng)有不同的樣式，下面展示iOS上的。

動(dòng)作表單-Action Sheets

時(shí)間選擇器-DateTime

浮動(dòng)的按鈕-Floating Action Buttons

分割按鈕-Segment

Inputs-輸入框

表格布局-Grid

小芯片-Chip

彈窗對(duì)話框1-Alert

彈窗對(duì)話框2-Popover

想要查看更多的ionic組件示例，可以在App Store和Google Play下載Ionic2Components應(yīng)用，該APP即為官方所有組件的展示。

組件在線演示地址：
http://ionicframework.com/docs/api/

組件只能作用在用戶(hù)與界面交互上，想要調(diào)用原生設(shè)備功能就需要cordova，他提供了一組設(shè)備相關(guān)的API，通過(guò)這組API，移動(dòng)應(yīng)用能夠以JavaScript訪問(wèn)原生的設(shè)備功能，如攝像頭、麥克風(fēng)、GPS等。在應(yīng)用商店下載Ionic Native即可體驗(yàn)部分插件。

離子原生包裝插件：
http://ionicframework.com/docs/native/

通過(guò)以上組件配合使用，即使只懂css3一點(diǎn)皮毛也能做出一個(gè)漂亮簡(jiǎn)單的HTML5 APP，想要了解更多ionic，可以關(guān)注我或者在官網(wǎng)查看最新消息。

在線咨詢(xún)

上一篇：手把手教你原生js實(shí)現(xiàn)‘雷霆戰(zhàn)機(jī)’
下一篇：JavaScript系統(tǒng)學(xué)習(xí)DOM系列文章之理解DOM節(jié)點(diǎn)關(guān)系

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

《響應(yīng)式開(kāi)發(fā)》16個(gè)最佳響應(yīng)式HTML5框架分享

您的項(xiàng)目需求