《響應式開發》16個最佳響應式HTML5框架分享

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

1. Twitter Bootstrap

twitter bootstrap - Responsive HTML5 frameworks

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

2. HTML5 Boilerplate

HTML5 boilerplate - Responsive HTML5 Frameworks

HTML5 Boilerplate的核心是用于幫助開發HTML5站點和應用程序的組件，它有著出色的性能和獨立性，幫助你開始一個新的項目。

3. Foundation

Foundation - Responsive HTML5 Frameworks

Foundation一款非常先進的前端框架，易用、強大而且靈活，可用于構建基于任何設備上的 Web應用，提供多種Web上的UI組件，如表單、按鈕、Tabs 等等。

4. Ulkit

UIkit

Ulkit是一個輕量級、模塊化的前端框架，幫助開發出快速、強大的Web接口，它有著全面的HTML、CSS和JS集合，易于使用和擴展。

5. HTML5 KickStart

HTML5 KickStart - Responsive HTML5 Frameworks

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

6. Gumby

Gumby

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

7. Skeleton

Skeleton - Responsive HTML5 Frameworks

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

8. Groundwork

Groundwork

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

9. Base

Base

Base是一款系統化的、輕量級且易于擴展的框架，幫助你創建更強大的響應式網站。

10. Montage

Montage - Free Responsive HTML5 Frameworks

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

11. Layers CSS

Layers CSS

Layers CSS是一款輕量級的CSS框架，它集中處理了主要的樣式結構，支持響應式布局。

12. 52Framework

52Framework - Free Responsive HTML5 Frameworks

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

13. CreateJS

CreateJS - Useful Responsive HTML5 Framework for web development

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

14. Kube

Kube - Best Free HTML5 Frameworks 2015

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

15. Less Framework

Less Framework - Popular HTML5 Frameworks

Less Framework是一個現代的前端框架。它是一個CSS網格系統，用來設計自適應網頁，包括4個布局和3套字體預設置，所有都是基于單個網格的。

16. SkelJS

SkelJS - Best Free Responsive HTML5 Frameworks 2015

Skel.js是一個用于創建響應式站點和應用的輕量級前端框架。

===========

公眾號：春樹鎮

研究討論：web設計，PHP開發，網站建設，互聯網技術，寫作，小說，電影

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

RAD.js

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

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

Ionic

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

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

LungoJS

一款向需要設計構建跨終端應用的開發者提供的HTML5框架。

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

Mobile Angula UI

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

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

NativeScript

使用Angular,TypeScript或者原生JavaScript來構建真正原生手機APP的開源框架。

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

Sencha Touch

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

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

PhoneGap

要想將制作好大web app放到手機里，逃不開應用打包的過程。大名鼎鼎PhoneGap就是加殼工程的鼻祖。現如今開源部分改名為Cordova。強大的插件機制，讓web前端開發者有機會體會原生組件的魅力。想要自己封裝hybrid應用，學習Cordova源碼里的優化設計代碼是一個非常重要的部分。

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

RhoMobile

面向消費者與企業開發人員的移動應用程序平臺。

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

jQuery Mobile Framework

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

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

Onsen UI

基于自定義元素構建移動前端的HTML5框架。

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

Apache Flex

一款構建web與手機應用的開源項目框架。從早期adobe Flash中分離出來，出使用action script或者h5的方式構建富客戶端，以flash player，或者adobe air運行時環境。

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

Agate Mobile Application Framework

一款跨平臺開發ios、Android原生應用，不能用于開發web app。

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

eMobc

用XML來開發生成web、手機和原生端應用的開源框架。

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

AppGyver Steroids

構建混合應用程序所需的工具集，提供iOS和Android的測試人員和開發人員。

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

Application Craft

一整套的跨平臺應用開發解決方案，從設計到開發，各種方便的IDE。不過是收費的。

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

ChocolateChip-UI

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

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

DHTMLX Touch

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

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

Corona Labs

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

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

Framework7

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

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

Gideros

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

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

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

onic是開源的移動應用開發框架，便于構建高質量的本地和網絡技術先進的web應用程序。Ionic是基于Angular，有許多顯著的性能提升，可用性和功能都在不斷的進行改進。只需要會一點前端知識就能玩轉Ionic。

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

官網地址：
http://ionicframework.com/
版本更新說明：
https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

學習ionic需要了解的知識：

HTML5
CSS3
TypeScript（JavaScript）
Angular2+

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

動作表單-Action Sheets

時間選擇器-DateTime

浮動的按鈕-Floating Action Buttons

分割按鈕-Segment

Inputs-輸入框

表格布局-Grid

小芯片-Chip

彈窗對話框1-Alert

彈窗對話框2-Popover

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

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

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

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

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

在線咨詢

上一篇：手把手教你原生js實現‘雷霆戰機’
下一篇：JavaScript系統學習DOM系列文章之理解DOM節點關系

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

《響應式開發》16個最佳響應式HTML5框架分享

您的項目需求