前端web框架

10⼤H5前端框架

作为⼀名做为在前端死缠烂打6年并且懒到不⾏的攻城⼠，这⼏年我还是阅过很多同门从知名到很知名的各种前端框架，本来想拿15-20个

框架来分享⼀下，但在跟⼏个前辈讨教写⽂章的技巧时果断被⽆情的打击了，所以这⾥我还是低调的只拿出10个框架来个⼤锅乱炖来简单

介绍，凑够字数也就全剧终了。

原本写这篇⽂章想围绕着CSS框架来的，但因为⽬前界内⽐较流⾏并遍地开花的主要还是JS+CSS模式的框架，并且⾃⼰靠着⼀点JS功

底，就想专门针对CSS，所以最后来个⼤锅乱炖都⼤致聊聊。下⾯的框架也没有什么先后顺序之分，我想到啥就写啥啦(作为前端，我⼀向

都这么的任性^_^)。

Bootstrap

⾸先说Bootstrap，估计你也猜到会先说或者⼀定会有这个(呵呵了)，这是说明它的强⼤之处，拥有框架⼀壁江⼭的势⽓。⾃⼰刚⼊道的

时候本着代码任何⼀个字母都得⾃⼰敲出来挡我者废的决⼼，来让⾃⼰成长。结果受到周围各种基友的开始了Bootstrap旅程。本⼈

虽然是个设计+前端的万⾥有⼀的⼈才，但是⽼天只让我会⽤PS和各种设计⼯具却不给我跟设计妹⼦⼀样的审美，所以这也是我最初选择

Bootstrap的原因之⼀，它让我做出来的东西好⽍能在妹⼦⾯前装个逼，不过时间长了难免觉得Bootstrap美的让⼈烦躁，但好在它的每

个版本都会有很⼤的改变，不会让⼈觉得⾃⼰做的⽹站会跟很多⽹站撞脸。Bootstrap的⽤法及其简单(这也可能就是Bootstrap作者阅

攻城⼠⽆数，了解他们痛的结果)，以⾄于是个⼩前端都可以快速上⼿，⼏乎没什么学习成本。

作者：MarkOtto和JacobThorntonStar：93,112

总结：Bootstrap最⼤的优势就是它⾮常流⾏，流⾏就代表你有问题就有很多⼈帮你解决问题，就代表装逼它就是利器，还有就是界⾯⽐较

和谐，容易上⼿，关注它的童鞋应该发现最新V4版也开始⽀持FlexBox布局，这是⾮常好的升级体验。劣势是class命名不够语义化，

并且各种缩写，以⾄于我离了⽂档就是个菜，最近开始整混合APP，选框架的时候⾸选就是它，但之前搞PC⼀直没注意，后来搞混合右

键属性看它的时候，瞬间⼀阵凉风袭来，Bootstrap好⼩，⼩到我只好选择别的框架。

AUI

第三个是最近刚起来的AUI，虽然作者声称是专为APICloud开发者设计的⼀套UI框架，但实际它还是解决了很多移动前端开发的普遍问

题，是主要⾯向混合开发的CSS框架。看起来作者⽐较猖狂，各种⾼级CSS3遍地使⽤，这让我也不得不去查查这些个CSS3的兼容

性。不负众望果然选的都是兼容不错的属性，哈哈了⼀顿激动从前辈⼿上⼤胆认识了⼏个好东西，并且框架还提供了聊天界⾯、计数列表等

组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿⾛就⽤。

作者：流浪男Star：92

总结：这个框架对我来说有个优点就是纯CSS框架，⾃⼰以前也就⽤过Pure，⾃⼰有点JS能⼒，如果不是复杂的效果，找个纯CSS框

架⾃⼰随便改改就可以，⽽现在CSS3也已经能够做到动画，效率、质量、⾼效全兼顾，所以还是选择了这种CSS框架。有⼀点觉得不满

的是这框架的⽂档真的好那什么，说好的⾼⼤上呢。

AmazeUI

第⼆个介绍的是妹⼦UI，最初使⽤它是因为本尊遇到了⼀个爱纠结细节设计⼠，有⼀次她跟我的字体较上真了，结果⼀句顶万句的BOOS

夸了她，我只好根据她的想法去解决，结果最后找到了AmazeUI框架(我不介意你叫我懒淫)，按照官⽅的话说就是"基于社区开源项⽬构

建的⼀个跨屏前端框架，以移动优先，从⼩屏到⼤屏，最终实现所有屏幕适配，适应移动互联潮流"。但其实我就是看中它能解决国内浏览

器存在的跨屏适配和兼容性问题。

所属公司：云适配Star：6710

总结：AmazeUI总的来说就是加⼊更多符合中国市场特性的元素，框架对跨屏、适配都做了的⽐较好的处理并且准备⼀了⼀系列的常⽤的

⽹页组件，为减少搞兼容、适配各种敲键盘的加班狗们的⼯作时间做了不⼩的贡献。，框架还对中⽂排版优化，兼容中国本⼟主流浏览器、

轻量化，不仅适⽤于桌⾯端，还更更适合移动端、包含⼀些封装好的Widgets。不过⾃也就我感觉AmazeUI⽂档是否有点太那什么了，⽐

如“⼈们不会在乎jQuery的那点流量。”，说实的在这真没啥，不过我从来不会说出来(哈哈)，代码和设计上感觉没太多突出的点。

FrozenUI

有段时间看到QQ瞬间⾼⼤上了，后来四处打听，原来QQ客服端也⽤了混合开发，其中QQ会员前端⽤的是FrozenUI，并且这套框架

开源，欣喜若狂耐不住⼼⾥的寂寞直接上⼿试了⼀遍，初体验感觉基础样式效果简单⾊调清爽，有个⽐较活跃的社区所以组件什么的也⽐较

丰富。

作者：QQVIPFDTeamStar：1,067

总结：如果拿FrozenUI配合⼀些如APICloud⽤来做混合APP感觉就太酷了，或者原⽣的⽕鸡们拿去嵌套在应⽤中做前端开发，这个框

架对android2.3+、ios4.0+做了兼容，或者拿来做WebApp也是极好的选择，劣势的话从UI层⾯就可以看到了，谁让它是出⽣在

QQ会员前端的呢。

FrozenUI

第三个是FrozenUI，有段时间看到QQ瞬间⾼⼤上了，后来四处打听，原来QQ客服端也⽤了HTML混合开发，其中QQ会员前端就是

⽤的FrozenUI，并且这套框架开源，欣喜若狂耐不住⼼⾥的寂寞直接上⼿三下五除⼆试了⼀遍就开始试⽤，初体验的就是基础样式效果简

单⾊调清爽，有个⽐较活跃的社区所以组件什么的也⽐较丰富。

作者：QQVIPFDTeamStar：1,067

总结：如果拿FrozenUI配合⼀些如APICloud⽤来做混合APP感觉就太酷了，或者原⽣的⽕鸡们拿去嵌套在应⽤中做前端开发，并且这

个框架对android2.3+、ios4.0+做了兼容，或者拿来做Webapp也是极好的选择，不过要是放在微信⾥⽐这更合适的WeUI框架更

是⾸选了，劣势的话从UI层⾯就可以看到了，谁让它是出⽣在QQ会员前端的呢。

WeUIi

第四个是WeUI和同FrozenUI都属于差不多的WeUi了，也是⼀个⽐较专⼀的框架，WeUI应该说⽐FrozenUI前者更专⼀，话说连个官⽹

都不搞，所有答疑都在gitHubIssues解决了，这个框架极其简单，体积当然就不⽤说了，模块也就7个左右，不过体量虽然⼩做的却不

错，⼝碑看star就够了，框架从16/1/23发版⾄今githubstar超过7K,不过也不排除⽤户没地⽅发泄所以都跑到git上来，哈哈。

Star：7,129

总结：看完微信设计团队设计的这套DEMO，⼆话不说如果要做微信公众，这个⼆话不说必然是⾸选了。框架不好的地⽅简⽽⾔之就是框

架本⾝应该就没考虑过让⽤户⽤到⾮微信的场景之下。

SUI

“SUI是⼀套基于bootstrap开发的前端组件库，同时它她也是⼀套设计规范。通过SUI，可以⾮常⽅便的设计和实现精美的页⾯”。果然

还是直接引⽤官⽅给的枯燥⽆味⼴告要节省⾃⼰的脑细胞(囧…)，当然了就像⼴告说的，如果你之前⽤过Bootstrap，那么可以轻松转

向SUI，这可能就是淘宝给前端屌丝们的福利了。。

Star：120

AUI

第六个是最近刚起来的最近刚起来的AUI，虽然作者声称是专为APICloud开发者设计的⼀套UI框架，但实际它还是解决了很多移动前端开

发的普遍问题，是它主要⾯向混合开发的CSS框架。，所以看起来作者⽐较猖狂，各种⾼级CSS3遍地使⽤，这也使得我不得不去查查这

些个CSS3的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了⼀顿激动从前辈⼿上⼤胆认识了⼏个好东西，并且框架还提供了聊

天界⾯、计数列表等组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿⾛就⽤。

作者：流浪男Star：92

总结：这个框架对我来说有个优点就是纯CSS框架，⾃⼰以前也就⽤过Pure，⾃⼰有点js能⼒，如果不是复杂的效果⾃⼰找个

纯CSS框架⾃⼰随便改改就能达到效果，⽽现在CSS3也已经能够做到各种动画，效率、质量、⾼效各种⼀顿考虑所以还是选择了这

种CSS框架。⽽⼀直觉得不满的是这框架的⽂档真的好那什么，说好的⾼⼤上呢。

MUI

曾经⼀直使⽤Android系统的我，后来见到IOS，果断移情别恋了，不知道为什么苹果每次调整系统我都特别喜欢，后来⼀段时间因为缺

设计我专门模仿IOS系统做UI，但始终不能够做到很好，⽆意间就发现了MUI这个框架，这个框架给我的吸引之处就是它的UI是

以IOS为主体设计的，当然它也补充了android特有UI样式。并且MUI官⽅声称⽤来开发深⼊以后发现拿它做APP还能够提⾼⽤户使⽤流

畅度，然后便试着更深⼊的了解和使⽤⼀段时间。

Star：2,450

总结：就像之前说的这个框架是以两⼤系统为参照来封装UI组件，框架⾃⾝还有⼀个较为活跃的社区，不太好的地⽅这也是我特别关注的⼀

点，关于开发应⽤的流畅度，我当然知道这是H5⽬前的劣势，但是看到官⽹给的描述，还是抱着期待的⼼理试试看能否提升，然⽽它其实

还是需要是借助Webview来提升，⽽不是框架本⾝。

SemanticUI

倒数第三个是SemanticUI，接触这个框架还是因为Bootstrap，SemanticUI刚上线github就受到⼤量开发者的关注，以⾄于很多⼈

拿它俩对⽐各种挑刺各种夸，是好是坏不能单凭别⼈三句四句就抬起⼿指开始赞，⽤了以后感觉UI上跟Bootstrap没太多的区别，不过代

码命名规范上却相差甚⼤，本⼈认为SemanticUI是不是就想做的不⼀样，它的命名全是采⽤复合的⽅式，类名特别的离散，⽤的时候你

得很⼩⼼⾃⼰扩展或者新增的class命名与它的类名冲突。

Foundation

Foundation算是框架界的元⽼啦，都说框架去的早，⽽这个框架⼀直到现在依然这么的热门，如果你⽐较介意Bootstrap开发撞脸的尴

尬事情，那么你可以考虑使⽤Foundation。即使你使⽤预定义的UI元素,也不会与其他⽹站太像，就像官⽅说的给开发者更灵活的框架

体验。

Star：22,736

UiKit

Pure

终于最后⼀个了，我和你⼀样好开森(～￣▽￣)～)，这个框架是我在做管理系统时接触的，选择使⽤也是因为框架⼩巧，并且是纯CSS，

没有太多的牵扯，好⽤来与其他框架快速结合使⽤。

Star：13,592

介绍完毕，估计你应该看出来了，我使⽤框架真的也就是遇到了需求，才选择了某个框架，所以框架之间并没有什么好与特好之分，只能说

你的需求是什么，这个框架合适不合适你去⽤，各种框架⽤起来也都⼤致差不多，会⽤⼀个其他的上⼿也就都变得简单容易上⼿，我觉得能

写框架的⼈都是室外⾼仁