Bootstrap

首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心,来让自己成长。结果受到周围各种基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才,但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美,所以这也是我最初选择 Bootstrap 的原因之一,它让我做出来的东西好歹能在妹子面前装个逼,不过时间长了难免觉得 Bootstrap 美的让人烦躁, 但好在它的每个版本都会有很大的改变,不会让人觉得自己做的网站会跟很多网站撞脸。Bootstrap 的用法及其简单( 这也可能就是 Bootstrap 作者阅攻城士无数,了解他们痛的结果 ),以至于是个小前端都可以快速上手,几乎没什么学习成本。

官网:http://getbootstrap.com/

Github:https://github.com/twbs/bootstrap/

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

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

AUI

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

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

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

作者:流浪男 Star:92

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

Amaze UI

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

官网:http://amazeui.org/

Github:https://github.com/amazeui/amazeui

所属公司:云适配 Star:6710

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

Frozen UI

有段时间看到 QQ 瞬间高大上了,后来四处打听,原来 QQ 客服端也用了 混合开发,其中QQ会员前端用的是 Frozen UI,并且这套框架开源,欣喜若狂耐不住心里的寂寞直接上手试了一遍,初体验感觉基础样式效果简单色调清爽,有个比较活跃的社区所以组件什么的也比较丰富。

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

官网:http://frozenui.github.io/

作者: QQVIP FD Team Star:1,067

总结:如果拿 Frozen UI 配合一些如 APICloud 用来做混合 APP 感觉就太酷了,或者原生的火鸡们拿去嵌套在应用中做前端开发,这个框架对 android 2.3 +、ios 4.0 + 做了兼容,或者拿来做 Web App 也是极好的选择,劣势的话从 UI 层面就可以看到了,谁让它是出生在QQ会员前端的呢。

Frozen UI

第三个是Frozen UI,有段时间看到 QQ 瞬间高大上了,后来四处打听,原来 QQ 客服端也用了 HTML 混合开发,其中QQ会员前端就是用的 Frozen UI,并且这套框架开源,欣喜若狂耐不住心里的寂寞直接上手三下五除二试了一遍就开始试用,初体验的就是基础样式效果简单色调清爽,有个比较活跃的社区所以组件什么的也比较丰富。

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

官网:http://frozenui.github.io/

作者: QQVIP FD Team Star:1,067

总结:如果拿 Frozen UI 配合一些如 APICloud 用来做混合 APP 感觉就太酷了,或者原生的火鸡们拿去嵌套在应用中做前端开发,并且这个框架对 android 2.3 +、ios 4.0 + 做了兼容,或者拿来做 Web app 也是极好的选择,不过要是放在微信里比这更合适的 WeUI 框架更是首选了,劣势的话从 UI 层面就可以看到了,谁让它是出生在QQ会员前端的呢。

WeUIi

第四个是WeUI和同 FrozenUI都属于 差不多的 WeUi了,也是一个比较专一的框架,WeUI应该说比FrozenUI前者更专一,话说连个官网都不搞,所有答疑都在 gitHub Issues 解决了,这个框架极其简单,体积当然就不用说了,模块也就 7 个左右,不过体量虽然小做的却不错,口碑看 star 就够了,框架从 16/1/23 发版至今 github star 超过 7K,不过也不排除用户没地方发泄所以都跑到 git 上来,哈哈。

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

DEMO:http://weui.github.io/weui/

Star:7,129

总结:看完微信设计团队设计的这套 DEMO,二话不说如果要做微信公众,这个二话不说必然是首选了。框架不好的地方简而言之就是框架本身应该就没考虑过让用户用到非微信的场景之下。

SUI

“SUI 是一套基于bootstrap开发的前端组件库,同时它她也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面”。 果然还是直接引用官方给的枯燥无味广告要节省自己的脑细胞( 囧… ),当然了就像广告说的,如果你之前用过 Bootstrap, 那么可以轻松转向 SUI,这可能就是淘宝给前端屌丝们的福利了。。

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

官网:http://sui.taobao.org/sui/docs/index.html

Star:120

AUI

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

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

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

作者:流浪男 Star:92

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

MUI

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

官网:http://dev.dcloud.net.cn/mui/

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

Star:2,450

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

Semantic UI

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

官网:http://www.semantic-ui.cn/

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

 Foundation

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

官网:http://foundation.zurb.com/

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

Star:22,736

UiKit

UIkit是YOOtheme团队开发的,在许多WordPress主题中都有应用(也就是如果你是个 WordPress 爱好者,那么这个框架应该比较适合深究),并且框架能够通过GUI编辑器和手动编辑,所以它提供了一个灵活、强大的自定义机制。框架借助LESS、jQuery、normalize.css及FontAwesome开源项目的独有特点,整合成了这么一款轻量级、模块化的前端框架。

官网:http://www.getuikit.com/
Github:https://github.com/uikit/uikit
作者:YOOtheme Star:6,372

Pure

终于最后一个了,我和你一样好开森 (~ ̄▽ ̄)~),这个框架是我在做管理系统时接触的,选择使用也是因为框架小巧,并且是纯 CSS,没有太多的牵扯,好用来与其他框架快速结合使用。

官网:http://purecss.io/

Github:https://github.com/yahoo/pure/

Star:13,592

注:摘自 http://www.cnblogs.com/kingboy2008/

常见的前端UI框架的更多相关文章

  1. 常见前端UI框架

    祈澈姑娘 程序员一枚 本文作者祈澈姑娘,转载请声明 前端的技术日渐更新,最近得空,将前端常见的框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多. 1.L ...

  2. 如何选择适合的前端UI框架

    根据近几年前端框架的热门,在前端开发框架不断更新与交换的时代,每一年都有黑马出现,是否适合自己开发的项目就不得而知了,只有认真的了解之后才能知道,这里主要给大家说一下如何选择适合旅游的前端UI框架?相 ...

  3. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  4. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  5. facebook开源前端UI框架React初探

    最近最火的前端UI框架非React莫属了.赶紧找时间了解一下. 项目地址:http://facebook.github.io/react/ 官方的介绍:A JavaScript library for ...

  6. 前端UI框架《Angulr》入门

    Angulr 项目的名称为 Angulr,对!没错!就是少个 a,少个 a 就是它正确的拼写. 是一个以 Bootstrap 和 AngularJS 为基础,并使用了大量前端开源组件合成的一个前端UI ...

  7. 前端UI框架小汇总

    前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...

  8. web前端UI框架

    分类:WEB前端 时间:2016年1月13日 目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WE ...

  9. 前端UI框架选择区别对比推荐

    UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...

随机推荐

  1. ARM ® and Thumb ®-2 指令系统

    指令表关键词        Rm {, <opsh>} 寄存器移位方式,将寄存器的移位结果作为操作数而Rm值保持不变       <Operand2> 灵活的使用第二个操作数. ...

  2. 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

    □ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width&q ...

  3. 使用Html.EditorFor()为文本框加上maxlength,placeholder等属性

    当想通过Html.EditorFor()给文本框加上maxlength,placeholder等属性的时候,发现Html.EditorFor()没有提供可直接加上这些属性的重载方法,如何做到呢? □ ...

  4. 解决小米手机不能运行Android Studio程序的问题

    转载自:解决小米手机不能运行Android Studio程序的问题 问题描述 Android Studio升级到2.3版本之后,小米手机MIUI8不能运行Android Studio程序,报如下错误: ...

  5. 算法:图(Graph)的遍历、最小生成树和拓扑排序

    背景 不同的数据结构有不同的用途,像:数组.链表.队列.栈多数是用来做为基本的工具使用,二叉树多用来作为已排序元素列表的存储,B 树用在存储中,本文介绍的 Graph 多数是为了解决现实问题(说到底, ...

  6. 让QT/Embedded支持国际化

    让QT/Embedded支持国际化 环境配置: Qt/Embedded ,在主机和目标板上存放路径都为:/root/qt-embedded-free- Qt/X11 3.3 (主要用到其中的lupda ...

  7. 环境变量篇getenv putenv setenv

    getenv(取得环境变量内容) 相关函数 putenv,setenv,unsetenv 表头文件 #include<stdlib.h> 定义函数 char * getenv(const ...

  8. OTL翻译(4) -- otl_stream类

    otl_stream Otl_stream是具体实现otl_stream_concept的类.任何的SQL语句.SQL语句块和存储过程都能通过otl_stream进行处理. 传统的数据库API处理SQ ...

  9. 容器list使用之erase(其他容器也通用)

    今天无论如何要写点东西,算是搞清楚了一点东西吧.有点小小的成就感. 之前在程序里面使用了list容器,其中用到了erase()函数,之前一直没出现问题,这两天突然莫名奇妙.花了点时间,搞清楚了eras ...

  10. TCP的TIME_WAIT快速回收与重用

    声明一点: Linux中是无法修改tcp的TIME_WAIT值的,除非重新编译,起码我是没有找到怎么改.值得注意的是,net.ipv4.tcp_fin_timeout这个参数是FIN_WAIT_2的值 ...