分享 [前端框架] Bootstrap 3 与 Foundation 5 的五大区别 (译)

lyfi2003 · 2014年02月10日 · 最后由 darkbaby123 回复于 2014年02月11日 · 34241 次阅读

本篇译自: https://medium.com/frontend-and-beyond/8b3812c7007c

开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么.

Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一件事:

ZURB 和 Twitter 的两种设计理念是很清楚的, 从他们对自己的框架的命名就可以看出来: Bootstrap 有引导, 开机自举的意思, 换言之, 它尝试处理你项目中一切所需要的. 而 Foundation 有创建, 创造的意思, 换言之, 它仅仅给你项目中强有力的创造力.

保持这种看法, 现在我来列出两者之间更多的关键区别:

1. UI 元素

Foundation 只安排了有限的几种元素, Bootstrap 则给你了所有你可以想像到的一切元素.

ZURB 对于 Foundation 的设计目标是, 纵然你使用预定义的 UI 元素, 也不应该与大家的网站长的太像.

而另一边, Bootstrap 则试图给你提供所有定义好的 UI 元素.

2. REMs VS Pixels

Foundation 使用 REMs, 而 Bootstrap 使用 Pixels.

使用 Pixels 意味着你不得不准确定义一个组件的高, 宽, 内边距, 外边距, 而且在每一种设备与屏幕尺寸上, 因为不同的设备往往显示效果区别很大.

现在 Foundation 5 使用 REMs, 而不是 EM. 这样, 避免了 EM cascade 问题: http://css-tricks.com/font-sizing-with-rem/

使用 REMs 意味着你可以直接用 font-size: 80%; 就可以让整个组件和它的子组件缩小 20%.

值得说明的是, 通过 REMs, 你可以脱离 Pixels 的细节了, 所以, 使用 REMs 来处理是非常值得的.

Foundation 还提供了 sass 的 mixin 方法来将 Pixels 转换为 REMs, 这样, 你还可以继续使用 Pixels 的思考方式来定义页面:

.element {
  width: rem-calc(10px); // will be converted to REMs
} 

3. 灵活的网格 VS 预定义的网格

Foundation 的网格可以自动适配当前浏览器的宽度. Boostrap 则是预定义了几种网格尺寸来适配主流的设备和屏幕.

Bootstrap 会在你改变浏览器宽度的时候突然改变它的网格.

Foundation 则会灵活适配当前的浏览器宽度, 这是一种新的技术手段, 自动适配的同时, 可以表现的与 Transformer 一样的效果.

Foundation 当网格改变时有两个要点: 小, 中和大. 所有的操作都只有缩小和放大, 并适应于当前浏览器的宽度. 不需要预定义的屏幕大小, 并且更主要的原因是, 鼓励你去根据屏幕的大小来定义不同的样式.

使用 Bootstrap, 你得到一个固定的或者说流形的网格, 这意味着你需要分别设定或者说对于网格容器不是一个预定义好的宽度.

使用 Foundation 和 Sass, 你可以自由调整最大的网格的大小 ( 中型的和小型的自动被计算 ), 大屏幕的列数, 小屏幕的列数.

4. 移动设备优先 VS 也支持移动设备

Foundation 设计时已经考虑了任何四角屏幕. 而 Bootstrap 设计时则预先分为: 手机, 平板, 台式机和超大屏幕的台式机.

构建一个优先支持移动设备的网站意味着它肯定在更大的屏幕上是可用的. 所以, Foundation 鼓励你这样去做: 移动优先.

如果你使用 Foundation 的 Sass Media Query Mixin, 你就会发现, 没有特定的 Media Query 来查询什么是移动设备, 而是你使用 Media Query 来定义在更大的屏幕下应该怎么显示.

设计东西时先考虑台式机的话很可能在支持更小屏幕时遇到很大问题, 和先考虑手机的话, 将会让你专注于什么是对用户最重要的, 让你空间提用感上升.

5. 社区

Bootstrap 有一个更大的社区. 而使用 Foundation 你就不得不自力更生一些.

Bootstrap 非常大的亮点就是社区. 这是一个非常巨大, 包罗万象, 几乎找啥都可以找到.

如果你选择了 Foundation, 自力更生可能就是你不得不掌握的了. 几乎所有的解决方法都是为 Bootstrap 的, 你只能自己再去构建自己的.

结论

问你自己几个问题:

  1. 你想让某个东西更加易用或者让它更具生活气息?
  2. 你想组织自己的 CSS, 只是让它成为你的基础组件?

答案分别是: Bootstrap. Foundation.

本文由 WinDy 发布, 欢迎关注.

REM 不支持 IE 8.

http://caniuse.com/#search=rem

不考虑兼容性的话, REM 确实是非常好的开发实践.

Foundation 社区还好吧,还是挺多人用的。我感觉射击狮们偏爱 foundation,程序猿还是用 bs 的多

Foundation 没用过,之前用了另一个基于 rem 的框架 semantic-ui,rem 实用度并不如想象中高,我觉得 px 的显示效果应该交给设备自行优化。

Bootstrap 如果一点不改就会产生大量雷同设计,非常无趣,不过真正掌握了的人是可以做出很优秀的设计的,看这个列表 http://expo.getbootstrap.com/

Bootstrap 适合快速搭建原型,之后再根据实际情况设计第二版,我下一个项目在用 Bootstrap。

#3 楼 @Rei 下一个项目是指 campo 3 吧。

也用过一下 semantic-ui,虽然比 bootstrap 好看,但是没 bootstrap 好用。

#1 楼 @Saito REMs 是非常值得推荐的.

#2 楼 @Yujing_Z 跟一开始的结论一致:) 但满大街的 Bootstrap 肯定是 Foundation 无法比的.

#3 楼 @Rei 同意对 Bootstrap 的看法~ Foundation 的 small, medium, large 网格系统目前看上去还是非常 NICE 的.

#1 楼 @Saito 坚决干掉 IE 8 及以下浏览器. XD

短暂用过一个月 Foundation 4,后来换到 Bootstrap 3 了。主要是因为源码太复杂和 em 继承性比较折腾。不过如果再让我选择一次,也许会使用 Foundation 5。

@Saito @Rei rem 最大的作用是在 mobile 浏览器上。因为不同的设备有不同的分辨率,但不管是高 dpi 屏幕还是低 dpi 屏幕,UI 比例都维持不变。

这种情况下在 body 中使用 px 设置基础字体大小,下层标签使用 rem 去设置字体,宽高等。然后对不同分辨率的屏幕使用 media query 改变 body 里的 font-size。基本可以做到一套 css 适配 iPhone 和 Android 的主流机型。

@lyfi2003 谢谢分享,前几天还在看这文章,然后飞哥就出译文了👍 只用过 Bootstrap,没用过 Foundation,但听说后者布局时会灵活一些。 Bootstrap 2 到 3 还是有一些代码修改量的。

Foundation 我认为最大的优势是在定制化上,可以通过配置文件直接修改变量,选择需要的组件。

#7 楼 @darkbaby123 我觉得更好的方法是每个设备自己优化 px 的最佳显示比例,如果要开发者针对每个设备写 media query 那又是一个调试地狱了。

@lyfi2003 飞哥给力, Bootstrap 3 与 Foundation 5 都没用过,看了之后,选择明确多了.

@Rei 这也是无奈之举。但现实就是如此。制定标准是个耗时又头痛的事情,Google 貌似没出什么标准,设备生产商更不会去干这事。最终结果就是交给开发者去头痛了。

要做到这一点,除非厂商走软硬件结合的路线,为自家的平台打造好的生态环境,而且最好限制不同屏幕尺寸的数量。Apple 就是这么干的。retina 和非 retina 在 css 中的分辨率都是一样的,使用同一套代码完全没有任何障碍。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号