Bootstrap VS Semantic VS Foundation

相信多数科技公司都没有自己动手设计UI的能力！

看到这个开头，预计非常多程序员非常不服气，我们那个美工可NB了，各种切图，各种特效！

假设你跟我讲这些，就说明你还没有明确UI详细指什么。通常我们所讲的UI包括例如以下几个方面

1. 页面的总体布局设计，比如左側的菜单设计。顶部的用户信息区域

2. 通用的配色方案

3. 公用的组件。比如button，Tab，Dropdown

4. 交互式设计，比如点击button首先显示动画等

如上仅仅是UI包括的大课题。UI设计还须要考虑很多细节化方面的方面，比如：业务场景，产品的战略性考虑等等。

正由于如此复杂。UI设计就须要诸如【产品经理】【美工】【网页设计】【交互设计】等等职位的參与。

聊到这里，你心中肯定是一万仅仅烈马奔腾，原来设计一个UI是如此困难。

正由于如此困难，眼下市面上出现了设计UI最多的两种方式，第一种就是使用通用的CSS框架。比如Bootstrap！

相对于第一种，我更推荐另外一种方案，它简单优雅。零成本。在短时间就能够设计出赶超乔布斯逼格的UI。关键是还没有不论什么风险！

想必你肯定动心了。

让我大声的告诉你吧！ 那就是：參考！ 你没有看错，就是“參考”。做手机就參考Apple手机，做社交软件就參考微信，做购物站点就參考京东。是不是百试不爽？

wx_fmt=png" alt="" style="margin:0px; padding:0px; max-width:100%; height:auto!important">

一般性的软件，使用第二招足以应付。假设略微复杂，比如做一个大型系统。这时候不得不结合第一种方案使用。

言归正传，市面上的CSS框架是如此之多，怎样在抄之余选择一款契合自己的，是一件很重要的事情。(讲错，是參考之余)

今天我们就来对各种CSS框架进行一个全面的评測，彻底解放你们的选择恐惧症。

首先，我们来讲讲Foundation

wx_fmt=png" alt="" style="margin:0px; padding:0px; max-width:100%; height:auto!important">

Foundation是严格的“移动优先”。这跟其它框架的“移动适配”是截然不同的！

在使用Foundation时，是须要在不同的宽度下设计不同的布局。

即800px一套，120px一套。1400ox一套，这样的设计方式，针对移动端确实实用，但也无故添加开发的复杂度。

Foundation是面向Mobile端的，考虑到Mobile端的性能问题，在功能组件上无限弱化，仅包括几个通用的组件。眼下移动端开发，HTML5仅仅是占领非常小的一部分。网页开发又因其功能不足。多数都不会选择。冷冷清清应该是形容Foundation最好的词语。

临幸的人不多，社区必定也是......你懂得！

当中文站点。多数链接还是直接链接到英文原版网页，让人不禁心凉。

Semantic

Semantic是近期非常火的一个CSS框架，非常多人会在Bootstrap和Semantic之间徘徊。

Semantic和Bootstrap都是“移动适配”，即全部设备上代码是一套，仅仅是保证“适配”而已，这和Foundation的理念截然不同。

Semantic在非常多方面是集美貌与才华于一身的框架。

它设计精细。比如Header,Title。切割线，动画。这些细节样样俱全！能够说，开发中要用到的组件，样式，动画等，Semantic基本都能满足！

当中文的站点也做的非常好。社区也相对较为成熟。在非常多方面，Semantic绝对是首选！

可是！。！这讨厌的可是！

Semantic有两个我不能忍受的缺点：

• API的方式是组合式开发，即通过非常多CSS组合成想要的效果，记得第一次尝试使用Dropdown，苦苦追寻了 几个小时才搞定！过程真是痛苦不堪，它真的就如瑞士军刀，我知道它能帮我搞定非常多事情，但是我却看着它一筹莫展。

• 不支持自己主动绑定。自己主动绑定的意思是：你仅仅管写HTML代码。不用写JS就可以实现效果（Bootstrap的方式）。Semantic每个组件都须要手动调用JS代码。你想象一下，界面那么多的组件。我须要一个一个写代码！哎！

  怎么能忍受。

非常多读者肯定会说：怎么可能，是你自己不会用吧？ 我遍查国外各种站点，非常多人反映存在该问题，我也想过自己实现其自己主动绑定，终于由于其精力就放弃了。

Bootstrap

Bootstrap是眼下最为流行的一款CSS框架了吧。

她就如一个大脚美女，从不在意自己的形象，可是性格温柔，深得群众喜爱。

使用Bootstrap多年，对其有深深的吐槽！不够精细，比如切割线，标题，动画这些统统没有。不得不再寻找其它组件结合使用。

没有主题。使用Bootstrap的系统。基本都是一个死样子。

非常多组件特别粗糙，比如Dropdown，但凡加个箭头，来个slideDown动画立刻高大上好不好！ 想起如今那个死样子，我就烦躁的难以入睡！

正是由于它有如此多缺点。 如今市面上到处都是基于Bootstrap做的Template，在二级市场是相当火爆。我还偷偷买过一套呢！

wx_fmt=png" alt="" style="margin:0px; padding:0px; max-width:100%; height:auto!important">

尽管它有如此多缺点，但是非常多程序员还是爱到无法自拔（主要是没有更好的）！

它API简洁优雅，社区火爆到不行，你须要不论什么东西。随便Google。分分钟找几十个插件。

全部组件全自己主动化绑定。根本不用关心JS，让你省心到爆。

你说作为我等图方便的程序员，怎能不爱？

最后聊一聊近期国产的AmazeUI，俗称妹子UI。近期一段时间，我很讨厌Bootstrap，因为它太粗糙，在调整系统风格时，怎么调都感觉力不从心。

思来想去，想要换一套框架，综合考虑，就选中了AmazeUI，随后在真实环境中尝试替换Bootstrap。

试用之后，感觉其并没有想象的那么好。主要表如今几点：

• API定义冗余。所以的CSS类都在Bootstrap的基础上加一个am前缀。比如am-tab-pabel，感觉不伦不类。“參考”的太过分了吧。

• 慢! 是真的有点卡。其官方站点就是使用AmazeUI开发，用户能够直接去尝试。打开时会有几秒钟的卡顿。Bootstrap 的JS文件69K，而AmazeUI的JS文件458K, 为什么这么大？搞不懂。

• 没有社区。 遇到问题，仅仅能看源码。当你忙到焦头烂额时，就会失去使用的信心了。

总体感觉，AmazeUI“參考”Bootstrap太过明显和深入，让人感觉非常Low，萌生我为什么不直接使用Bootstrap
Template呢。 可能非常多国内用户。不知道有Bootstrap Template吧。

非常多人到这里，肯定要问，为什么不讲jQueryUI，YUI这些？ 事实上这些还称不上CSS框架。他们只叫做“组件库”。他们并没有给你统一的布局，统一的界面风格，不过给了你各种组件而已。

当然。市场上还有非常多其它的UI框架，比方FlatUI。MetroUI。可是它们要么太过小众，要么太过简单，我们就不单独讨论了。

​