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

1. Twitter Bootstrap

twitter bootstrap - Responsive HTML5 frameworks

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

2. HTML5 Boilerplate

HTML5 boilerplate - Responsive HTML5 Frameworks

HTML5 Boilerplate的核心是用于幫助開發(fā)HTML5站點和應(yī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是一個輕量級、模塊化的前端框架，幫助開發(fā)出快速、強(qiáng)大的Web接口，它有著全面的HTML、CSS和JS集合，易于使用和擴(kuò)展。

5. HTML5 KickStart

HTML5 KickStart - Responsive HTML5 Frameworks

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

6. Gumby

Gumby

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

7. Skeleton

Skeleton - Responsive HTML5 Frameworks

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

8. Groundwork

Groundwork

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

9. Base

Base

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

10. Montage

Montage - Free Responsive HTML5 Frameworks

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

11. Layers CSS

Layers CSS

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

12. 52Framework

52Framework - Free Responsive HTML5 Frameworks

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

13. CreateJS

CreateJS - Useful Responsive HTML5 Framework for web development

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

14. Kube

Kube - Best Free HTML5 Frameworks 2015

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

15. Less Framework

Less Framework - Popular HTML5 Frameworks

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

16. SkelJS

SkelJS - Best Free Responsive HTML5 Frameworks 2015

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

===========

公眾號：春樹鎮(zhèn)

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

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

RAD.js

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

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

Ionic

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

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

LungoJS

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

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

Mobile Angula UI

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

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

NativeScript

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

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

Sencha Touch

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

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

PhoneGap

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

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

RhoMobile

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

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

jQuery Mobile Framework

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

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

Onsen UI

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

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

Apache Flex

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

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

Agate Mobile Application Framework

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

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

eMobc

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

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

AppGyver Steroids

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

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

Application Craft

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

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

ChocolateChip-UI

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

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

DHTMLX Touch

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

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

Corona Labs

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

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

Framework7

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

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

Gideros

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

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

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

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

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

• 官網(wǎng)地址：

  http://ionicframework.com/

• 版本更新說明：

  https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

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

• HTML5

• CSS3

• TypeScript（JavaScript）

• Angular2+

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

動作表單-Action Sheets

時間選擇器-DateTime

浮動的按鈕-Floating Action Buttons

分割按鈕-Segment

Inputs-輸入框

表格布局-Grid

小芯片-Chip

彈窗對話框1-Alert

彈窗對話框2-Popover

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

• 組件在線演示地址：

  http://ionicframework.com/docs/api/

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

• 離子原生包裝插件：

  http://ionicframework.com/docs/native/

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