整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5(H5)常用的十大前端框架(一)

Foundation框架

Foundation是一个响应式前端框架系列,可以轻松设计漂亮的响应式网站,应用程序和电子邮件,在任何设备上看起来都很棒。Foundation是语义,可读,灵活且完全可定制的。我们不断添加新的资源和代码片段,包括这些方便的HTML模板,以帮助您入门!

特点:世界上最先进的响应式前端框架。快速为适用于任何类型设备的站点创建原型和生产代码。

总结:Foundation 算是框架界的元老啦,都说框架去的早,而这个框架一直到现在依然这么的热门,如果你比较介意 Bootstrap 开发撞脸的尴尬事情,那么你可以考虑使用 Foundation 。即使你使用预定义的 UI 元素, 也不会与其他网站太像,就像官方说的给开发者更灵活的框架体验。

Bootstrap框架

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

包含内容:

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。

组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。

定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

总结:Bootstrap 最大的优势就是它非常流行,流行就代表你有问题就有很多人帮你解决问题,就代表装逼它就是利器,还有就是界面比较和谐,容易上手,关注它的小伙伴应该发现最新 V4 版也开始支持 FlexBox 布局,这是非常好的升级体验。 劣势是 class 命名不够语义化,并且各种缩写,以至于我离了文档就是个菜,最近开始整混合 APP,选框架的时候首选就是它,但之前搞 PC 一直没注意,后来搞混合右键属性看它的时候,瞬间一阵凉风袭来,Bootstrap 好小,小到我只好选择别的框架。

AUI框架

AUI为一款轻量级前端UI框架,更偏重于CSS布局及样式的构造,通俗易懂的写法及模块式的拼装方便用户自由扩展。轻小的体积、灵活的扩展性,大大提高移动端项目的体验度和开发效率。

在目前市场上的UI框架中,大多数的框架以JS来实现过多的功能和布局。当然并不是否定JS在一个移动前端框架中的作用性,既然是前端框架侧重点要更多的考虑框架本身在一个项目中的资源消耗问题及如何提高用户的体验度。鉴于APICloud多窗口结构及原生模块的拼装,所以在移动端项目中AUI强调更多的是快速布局、灵活布局的实现,结合APICloud本身特性,提高开发效率及用户体验。

最近刚起来的AUI,虽然作者声称是专为APICloud开发者设计的一套UI框架,但实际它还是解决了很多移动前端开发的普遍问题,是主要面向混合开发的 CSS 框架。看起来作者比较猖狂,各种高级 CSS3 遍地使用,这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性,哈哈了一顿激动从前辈手上大胆认识了几个好东西,并且框架还提供了聊天界面、计数列表等组件,解决了很多复杂的让我骂娘的布局,现在可以直接拿走就用。

总结:这个框架对我来说有个优点就是纯 CSS 框架,自己以前也就用过 Pure,自己有点 JS 能力,如果不是复杂的效果,找个纯 CSS 框架自己随便改改就可以,而现在 CSS3 也已经能够做到动画,效率、质量、高效全兼顾,所以还是选择了这种 CSS 框架。有一点觉得不满的是这框架的文档真的好那什么,说好的高大上呢。

Amaze UI 框架

第二个介绍的是AmazeUI,据官方说是咱们中国首个HTML5跨屏前端框架。

最初使用它是因为本尊遇到了一个爱纠结细节设计,有一次她跟我的字体较上真了,结果一句顶万句的 BOOS 夸了她,我只好根据她的想法去解决,结果最后找到了Amaze UI 框架,按照官方的话说就是 "基于社区开源项目构建的一个跨屏前端框架,以移动优先从小屏到大屏,最终实现所有屏幕适配适应移动互联潮流" 。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。

总结:Amaze UI 总的来说就是加入更多符合中国市场特性的元素,框架对跨屏、适配都做了的比较好的处理并且准备一了一系列的常用的网页组件,为减少搞兼容、适配各种敲键盘的加班狗们的工作时间做了不小的贡献。框架还对中文排版优化,兼容中国本土主流浏览器、轻量化,不仅适用于桌面端,还更更适合移动端、包含一些封装好的Widgets。不过自也就我感觉 Amaze UI 文档是否有点太那什么了,比如 “人们不会在乎jQuery的那点流量。”,说实的在这真没啥,不过我从来不会说出来( 哈哈 ),代码和设计上感觉没太多突出的点。

Pure框架

一组小的,响应迅速的CSS模块,您可以在每个Web项目中使用它们。

特点:

CSS占用空间极小。

纯净是微不足道的。整套模块的时钟频率为3.8KB *缩小和压缩。在考虑移动设备的情况下,对我们来说保持文件大小很小很重要,并且仔细考虑了每一行CSS。如果您决定仅使用这些模块的子集,则可以节省更多字节。

你的CSS基础

Pure构建于Normalize.css之上,为原生HTML元素以及最常见的UI组件提供布局和样式。这就是你所需要的,没有任何瑕疵。

以移动为主题

Pure是开箱即用的响应,因此所有屏幕尺寸的元素都很棒。

坚持你的方式

Pure具有最小的样式,并鼓励您在其上编写应用程序样式。它旨在让您不受约束,并轻松覆盖样式。

创建响应式布局

通过使用Grids,Menus等,可以轻松地为所有屏幕尺寸创建漂亮的响应式布局。我们让您轻松上手。看看几个不同的布局,并用坚如磐石的基础开始您的下一个Web项目。

这个框架是我在做管理系统时接触的,选择使用也是因为框架小巧,并且是纯 CSS,没有太多的牵扯,好用来与其他框架快速结合使用。

着互联网行业的快速发展,越来越多的年轻人选择互联网行业就业。HTML5是一个简单易上手非常实用的技能,专攻于HTML的开发人员的薪资也非常的不错。想要学习HTML的朋友,推吧推吧在这里分享7个常用的框架给大家。


1、Ionic,这个框架功能十分的强大,可以作为网站前端的开源系统,可以使用先进的网站的技能,例如:HTML、css配合JS可以制作出功能十分强大的产品。

2、Foundation,它是一个非常好用的前端响应式框架,Foundation不仅仅功能强大而且适应性能特别好,可以兼容所有的网络设备跟浏览器,跟移动端也有着良好的接口,它的特性也十分的关键。

3、Siimpler,这是一个建议的前端开发框架,根艺根据自己的需求选择不同的部分,快速的帮助你搭建HTML5的框架。当需要开发一个新的项目的时候可以利用Siimpler的文件或者文件夹立即开启这个项目,不需要做太多的修改。


4、Enyo,这是一个开元的jaa框架,使用这个框架可以帮助你快速的创建一个高级html5应用,这个应用不但可以在网页、笔记本电脑、上应用还可以在电视、手机上应用。

5、Bootstrap,这个框架可以让新手快速的进行开发,在不同的设备上都可以使用、不同的项目也可以使用,而且Bootstrap的官网非常贴心的提供了使用教程。

6、juery UI,这个框架拥有3大工能:交互、微件、效果库,偏重于开源打代码,在操作方面跟juery很相似,非常简单,作品可以兼容热门的浏览器。

7、LimeJS,这个框架支持所有的新触屏设备、桌面的浏览器,并且LimeJS用来开发有事的框架,但是对于使用者的技术要求比较高。

不管是手机,还是电脑网页,都离不开对于HTML5的使用,从事这一块的就业前景非常好。

maze UI采用国际最前沿的“组件式开发”以及“移动优先”的设计理念,基于其丰富的组件,开发者可通过简单拼装即可快速构建出HTML5网页应用,上线仅半年,Amaze UI就成为了国内最流行的前端框架,目前在Github上收获Star数近万,服务于全球50W开发者。

功能简介

  • 移动优先:以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。
  • 组件丰富,模块化:Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件,更有 17 款包含近 60 个主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。
  • 本地化支持:相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。
  • 轻量级,高性能:Amaze UI 面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让 Web 应用更快速载入。

项目地址

https://github.com/allmobilize/amazeui