Bootstrap和Foundation以及Semantic UI对比和使用

Semantic UI—完全语义化的前端界面开发框架,跟Bootstrap和Foundation比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。文章里详细介绍了Semantic UI自身的功能特性和优缺点。

在这篇文章当中作者讲述了Semantic UI具备哪些功能特性,以及和其它前端界面开发框架的不同之处。可能Semantic UI只是HTML/CSS框架领域上的一个新成员,但是它来势汹汹,势不可挡。引用Semantic UI团队的话说:“Semantic赋予设计师和开发者为UI创建一个共享词汇库的能力。”

Semantic-UI.jpg (700×295)

我通常情况下不喜欢更改开发框架,即使是HTML/CSS框架。但是有的时候为了最终的产品质量,还是值得一试去改变框架的。

有那么一段时间,我是Zurb’s Foundation Framework的超级粉丝,它有许多其它框架没有的功能特性,同时它还有很多预制模板。所以使用Zurb’s Foundation Framework来设计的话相对是比较舒适快捷的。但唯一的一点是有些功能得等到Foundation新版本发布出来才能使用。

进入到Semantic UI开 发框架,就会看到数量庞大的功能特性,这些功能都很有特点。Semantic UI拥有支持情态动词、手风琴元素、元素调光器、3D转换,甚至是评级等多种功能。更不用说其它的运行程序,因为它们看上去都像是涂抹了黄油一样——运行 起来特别流利顺畅。当然所列举的这些只是冰山一角,不过这能让你基本上了解大致情况。可能Semantic UI只是HTML/CSS框架领域上的一个新成员,但是它来势汹汹,势不可挡。

另外,这些功能使用的类别名称比一些随意的字符串更加的接近英语;所以使用Semantic UI设计会让你感觉更自然。因此,学习如何使用Semantic UI,并用Semantic UI进行设计也就方便的多了。

然而,现在的问题是Semantic UI忽略了一些基本功能,例如基本的图片滑块,或者是缩略图类等等。不过后来发现,这些所谓的功能缺失,实际上是和其它功能整合了,在其它方面是完全可以实现的。

Semantic UI

Semantic UI的优点:

  • MIT许可协议下出版。(MIT许可发布,意味着可以为Semantic UI贡献代码)
  • 有很好的证明文档记录。
  • 看上去更容易学习/使用。
  • 配备网格布局。
  • 使用LESS动态样式语言。
  • 有一些非常实用的附加配置,例如inverted类。
  • 对于社区贡献来说是比较开放的。
  • 有一个非常好的按钮实现,情态动词,和进度条。
  • 在许多功能上使用图标字体。

Semantic UI的缺点:

  • 没有图片滑块。
  • 没有缩略图类。
  • 缺少可见性类。
  • 没有SASS。([sæs],是CSS预处理器
  • 没有发布1.0以上的版本。


BootStrap

我们再来看看BootStrap有哪些优缺点:

如今的Bootstrap已包括了几十个组件,每个组件都自然地结合了设计与开发,具有完整的实例文档,定义了真正的组件和模板。无论处在何种技术水平的开发者,也无论处在哪个工作流程中,都可以使用Bootstrap快速、方便地构建开发者喜欢的应用。

难能可贵的是,Bootstrap依旧本着“并行开发”、“作为产品的风格指南”和“迎合所有的技能水平”的原则帮助开发者解决实际问题,不断完善自己,吸引更多人选择Bootstrap应用于自己的项目中。

然 而古人云“万物相生相克”,有好就有坏,Bootstrap也是一样。对于在国内的开发者来说,最可怕的就是IE兼容问题。目前Bootstrap对 IE6到IE8的支持都不友好。另一个缺点是,采用Bootstrap的模板,网站结构时常会显得臃肿。此外,覆盖一些样式时会造成代码冗余。

Foundation

再来看看Foundation有哪些优缺点:

Foundation是一个易用、强大而且灵活的框架,用于构建基于任何设备上的Web应用。提供多种 Web上的UI组件,如表单、按钮、Tabs等等。

从 兼容性方面来说,Foundation已经放弃了对IE 8的支持,而Bootstrap 2仍能较完美的支持IE 8,甚至通过类似bs-ie的方式来达到大部分component支持IE 6的要求,在国内是选择Foundation还是选择Bootstrap的时候可能还是需要考虑这一重要因素吧。

从JavaScript库角度来说,Bootstrap 2/3采用的都是更为常见的jQuery,而Foundation采用的是Zepto,Zepto.js是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。

从 社区支持度来说,Bootstrap在Github上的人气毋庸置疑,国内也有中文版的文档,各种教程案例以及衍生而来的插件、主题也是层出不穷,一片欣 欣向荣之景。而Foundation的社区支持度则相对来说较为薄弱。因为Foundation的开发理念是mobile first,所以Foundation在国内则相对较为小众。

最后总结

实话实说,很多人还是比较喜欢Semantic UI框架的,不管是在生产站点还是在个人项目中使用Semantic UI,都会让人觉得特别激动。如果Semantic UI框架能发挥它的所有潜力,很有可能会比Bootstrap和Foundation都深受开发者的喜爱。



 
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值