像Bootstrap一样比较热门的前端框架有哪些
像Bootstrap一样比较热门的前端框架有哪些
一、总结
一句话总结:框架大同小异,可以多去各自官网看看效果(比较一下各自的不同点(也就是提供的不同的功能)),然后根据需求选择用哪个。我觉得bootstrap还是可以做首选。
二、类似Bootstrap热门前端框架大集合
Bootstrap
首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心,来让自己成长。结果受到周围各种基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才,但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美,所以这也是我最初选择 Bootstrap 的原因之一,它让我做出来的东西好歹能在妹子面前装个逼,不过时间长了难免觉得 Bootstrap 美的让人烦躁, 但好在它的每个版本都会有很大的改变,不会让人觉得自己做的网站会跟很多网站撞脸。Bootstrap 的用法及其简单( 这也可能就是 Bootstrap 作者阅攻城士无数,了解他们痛的结果 ),以至于是个小前端都可以快速上手,几乎没什么学习成本。
总结:Bootstrap 最大的优势就是它非常流行,流行就代表你有问题就有很多人帮你解决问题,就代表装逼它就是利器,还有就是界面比较和谐,容易上手,关注它的童鞋应该发现最新 V4 版也开始支持 FlexBox 布局,这是非常好的升级体验。 劣势是 class 命名不够语义化,并且各种缩写,以至于我离了文档就是个菜,最近开始整混合 APP,选框架的时候首选就是它,但之前搞 PC 一直没注意,后来搞混合右键属性看它的时候,瞬间一阵凉风袭来,Bootstrap 好小,小到我只好选择别的框架。
AUI
第三个是最近刚起来的AUI,虽然作者声称是专为APICloud开发者设计的一套UI框架,但实际它还是解决了很多移动前端开发的普遍问题,是主要面向混合开发的 CSS 框架。看起来作者比较猖狂,各种高级 CSS3 遍地使用,这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性,哈哈了一顿激动从前辈手上大胆认识了几个好东西,并且框架还提供了聊天界面、计数列表等组件,解决了很多复杂的让我骂娘的布局,现在可以直接拿走就用。
总结:这个框架对我来说有个优点就是纯 CSS 框架,自己以前也就用过 Pure,自己有点 JS 能力,如果不是复杂的效果,找个纯 CSS 框架自己随便改改就可以,而现在 CSS3 也已经能够做到动画,效率、质量、高效全兼顾,所以还是选择了这种 CSS 框架。有一点觉得不满的是这框架的文档真的好那什么,说好的高大上呢。
Frozen UI
有段时间看到 QQ 瞬间高大上了,后来四处打听,原来 QQ 客服端也用了 混合开发,其中QQ会员前端用的是 Frozen UI,并且这套框架开源,欣喜若狂耐不住心里的寂寞直接上手试了一遍,初体验感觉基础样式效果简单色调清爽,有个比较活跃的社区所以组件什么的也比较丰富。
总结:如果拿 Frozen UI 配合一些如 APICloud 用来做混合 APP 感觉就太酷了,或者原生的火鸡们拿去嵌套在应用中做前端开发,这个框架对 android 2.3 +、ios 4.0 + 做了兼容,或者拿来做 Web App 也是极好的选择,劣势的话从 UI 层面就可以看到了,谁让它是出生在QQ会员前端的呢。
WeUI
WeUI和 FrozenUI都属于比较专一的框架,WeUI比FrozenUI更专一,话说连个官网都不搞,所有答疑都在 gitHub Issues 解决了,这个框架极其简单,体积当然就不用说了,模块也就 7 个左右,不过体量小做的却不错,口碑看 star 就够了,框架从 16/1/23 发版至今github star 超过 7K,不过也不排除用户没地方发泄所以都跑到 git 上来,哈哈。
总结:看完微信设计团队设计的这套 DEMO,如果要做微信公众,这个二话不说必然是首选了。框架不好的地方简而言之就是框架本身应该就没考虑过让用户用到非微信的场景之下。
SUI
“SUI 是一套基于bootstrap开发的前端组件库,同时它也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面”。 果然还是直接引用官方给的枯燥无味广告要节省自己的脑细胞( 囧… ),当然了就像广告说的,如果你之前用过 Bootstrap, 那么可以轻松转向 SUI,这可能就是淘宝给前端屌丝们的福利了。
Semantic UI
倒数第三个是 Semantic UI,接触这个框架还是因为 Bootstrap,Semantic UI 刚上线 github 就受到大量开发者的关注,以至于很多人拿它俩对比各种挑刺各种夸,是好是坏不能单凭别人三句四句就抬起手指开始赞,用了以后感觉 UI 上跟 Bootstrap 没太多的区别,不过代码命名规范上却相差甚大,本人认为 Semantic UI 是不是就想做的不一样,它的命名全是采用复合的方式,类名特别的离散,用的时候你得很小心自己扩展或者新增的 class 命名与它的类名冲突。
Foundation
Foundation 算是框架界的元老啦,都说框架去的早,而这个框架一直到现在依然这么的热门,如果你比较介意 Bootstrap 开发撞脸的尴尬事情,那么你可以考虑使用 Foundation 。即使你使用预定义的 UI 元素, 也不会与其他网站太像,就像官方说的给开发者更灵活的框架体验。
UiKit
UIkit是YOOtheme团队开发的,在许多WordPress主题中都有应用(也就是如果你是个 WordPress 爱好者,那么这个框架应该比较适合深究),并且框架能够通过GUI编辑器和手动编辑,所以它提供了一个灵活、强大的自定义机制。框架借助LESS、jQuery、normalize.css及FontAwesome开源项目的独有特点,整合成了这么一款轻量级、模块化的前端框架。
Pure
终于最后一个了,我和你一样好开森 (~ ̄▽ ̄)~),这个框架是我在做管理系统时接触的,选择使用也是因为框架小巧,并且是纯 CSS,没有太多的牵扯,好用来与其他框架快速结合使用。
介绍完毕,估计你应该看出来了,我使用框架真的也就是遇到了需求,才选择了某个框架,所以框架之间并没有什么好与特好之分,只能说你的需求是什么,这个框架合适不合适你去用,各种框架用起来也都大致差不多,会用一个其他的上手也就都变得简单容易上手,我觉得能写框架的人都是室外高仁。
像Bootstrap一样比较热门的前端框架有哪些的更多相关文章
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- 简洁灵活的前端框架------BootStrap
前 言 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.[1] ...
- CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:
19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...
- 为SpringMvc项目安装BootStrap和AngularJs前端框架
在我们"用SpringMVC写一个注册的小Demo"之前,我们学习一下如何给该项目安装Bootstrap和AngularJs的前端框架,这样我们就能轻松排版出漂亮的登录界面.我们采 ...
- 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI
Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...
- 前端框架Bootstrap
前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...
随机推荐
- [转]Massive Model Rendering Techniques
Massive Model Rendering Techniques Andreas Dietrich Enrico Gobbetti Sung-Eui Yoon Abstract We presen ...
- 智课雅思词汇---三、aud和auto和bene是什么意思
智课雅思词汇---三.aud和auto和bene是什么意思 一.总结 一句话总结:aud:听 auto:自己,self bene:good,well 1.anthropo是什么意思? anthropo ...
- jsp&servlet报红线javax.servlet.jsp.XXXX cannot be resolved to a type类似错误解决办法
javax.servlet.jsp.JspException cannot be resolved to a type javax.servlet.jsp.PageContext cannot be ...
- ssh-keygen && ssh-copy-id 生成管理传输秘钥
- 今日SGU 5.2
SGU123 题意:求和 收获:无 #include<bits/stdc++.h> #define de(x) cout<<#x<<"="< ...
- 中小型WEB系统权限日志数据表设计
中小型WEB系统权限日志数据表设计 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjc1MDU3OA==/font/5a6L5L2T/fontsi ...
- 停止使用域名 boypay.net
停止使用域名 boypay.net boypay.net 这个域名当时注册的时候打算开发网店--" 情侣商城",表面意思是 "男生支付",情侣和婚姻是人生中必须 ...
- Ubuntu 14 中给 APACHE2安装 SSL 模块 Enable SSL site on Ubuntu 14 LTS, Apache 2.4.7:
Ubuntu 14 中给 APACHE2安装 SSL 模块 Enable SSL site on Ubuntu 14 LTS, Apache 2.4.7: 参考 http://blog.csdn.ne ...
- js14--原型2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- HDU 多校联合 6033 6043
http://acm.hdu.edu.cn/showproblem.php?pid=6033 Add More Zero Time Limit: 2000/1000 MS (Java/Others) ...