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，可以关注我或者在官网查看最新消息。