服务热线:400-816-8767

建站前端技术:10大H5前端框架

分享到:
点击次数:2470 更新时间:2017年09月15日08:36:00 打印此页 关闭

作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一 下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖来简单介绍,凑够字数也就全剧终了。

Bootstrap

官网:http://getbootstrap.com/

作者:Mark Otto 和Jacob Thornton Star:93,112

AUI

Github:https://github.com/liulangnan/aui

作者:流浪男 Star:92

Amaze UI

官网:http://amazeui.org/

所属公司:云适配 Star:6710

Frozen UI

Github:https://github.com/frozenui/frozenui

作者: QQVIP FD Team Star:1,067

Frozen UI

Github:https://github.com/frozenui/frozenui

作者: QQVIP FD Team Star:1,067

WeUIi

Github:https://github.com/weui/weui

Star:7,129

SUI

Github:https://github.com/sdc-alibaba/sui

Star:120

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

官网:http://www.auicss.com/

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

曾经一直使用 Android 系统的我,后来见到 IOS,果断移情别恋了,不知道为什么苹果每次调整系统我都特别喜欢,后来一段时间因为缺设计 我专门模仿 IOS 系统做 UI,但始终不能够做到很好,无意间就发现了 MUI 这个框架,这个框架给我的吸引之处就是它的 UI 是以 IOS 为 主体设计的,当然它也补充了android UI样式。并且MUI官方声称用来开发深入以后发现拿它做 APP 还能够提高用户使用流畅度,然后便试着 更深入的了解和使用一段时间。

Github:https://github.com/dcloudio/mui

总结:就像之前说的这个框架是以两大系统为参照来封装UI组件,框架自身还有一个较为活跃的社区,不太好的地方这也是我特别关注的一点,关于开发应 用的流畅度,我当然知道这是 H5 目前的劣势,但是看到官网给的描述,还是抱着期待的心理试试看能否提升,然而它其实还是需要是借助 Webview来 提升,而不是框架本身。

倒数第三个是 Semantic UI,接触这个框架还是因为 Bootstrap,Semantic UI 刚上线 github 就受到大量开发者的关注,以至于很多人拿它俩对比各种挑刺各种夸,是好是坏不能单凭别人三句四句就抬起手指开始赞,用了以后感觉 UI 上跟 Bootstrap 没太多的区别,不过代码命名规范上却相差甚大,本人认为 Semantic UI 是不是就想做的不一样,它的命名全是采用复合的方式,类名特别的离散,用的时候你得很小心自己扩展或者新增的 class 命名与它的类名冲突。

Github:https://github.com/semantic-org/semantic-ui/

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

Github:https://github.com/zurb/foundation-sites

UiKit

Pure

官网:http://purecss.io/

Star:13,592

<p style="box-sizing:border-box;-webkit-tap-highlight-color:rgba(255, 0, 0, 0);margin-top:0px;margin-bottom:16px;color:#444444;font-family:" font-size:15px;white-space:normal;background-color:#ffffff;"=""> 介绍完毕,估计你应该看出来了,我使用框架真的也就是遇到了需求,才选择了某个框架,所以框架之间并没有什么好与特好之分,只能说你的需求是什么, 这个框架合适不合适你去用,各种框架用起来也都大致差不多,会用一个其他的上手也就都变得简单容易上手,我觉得能写框架的人都是室外高仁。
上一条:纯粹为seo优化文章的几种方式 下一条:2017网页背景设计的五大趋势