Bootstrap 3 与 Foundation 5

开发工程师, 使用 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 的, 你只能自己再去构建自己的.

结论

问你自己几个问题:

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

时间: 2024-11-09 04:00:15

Bootstrap 3 与 Foundation 5的相关文章

推荐15款最好的 Twitter Bootstrap 开发工具

Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定义风格的组件,插件和加载项. 在这篇文章中,我们想向大家介绍15款最好的 Twitter Bootstrap 开发工具以更好地满足要求以及帮助提高他们的 Web 开发的生产力. 您可能感兴趣的相关文章 10大流行 Metro UI 风格 Bootstrap 主题和模板 推荐12款优秀的 Twitte

分享最新15个加速 Web 开发的框架和工具(梦想天空)

我们为开发人员挑选了15个最新的  Web 开发框架,你肯定尝试一下这些新鲜的框架,有的可能略微复杂,有的提供了很多的配置选项,也有一些窗口小部件和界面交互的选择.他们将帮助你创建更优秀的网站,提供给用户更好的体验. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读精华文章推荐 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 8个前沿 HTML5 & CSS3 效果[附源码下载] 1.

前端基础(一)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang SC"; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Helvetica; color: #000000;

【转】从框架看PHP的五种境界及各自的薪资待遇

无意中看到这篇文章,有些触动,作为博客开篇,用来激励自己. 原文地址:点击打开 在撰写此文前首先必须申明的是本人不鄙视任何一种框架,也无意于挑起PHP框架间的战争,更没有贬低某个框架使用者的用意,本文纯粹个人的看法.你可以认为我无知也好,或者装逼也好,请不要试着在任何情况下,随便发起言语的攻击,这只是我个人的一些经验而已,你可以选择赞成或不赞成,也可以选择看与不看. 还有本人基本对这些框架中的大部分都用的时间比较长,绝对不是随便出个Hello World!就在这里评论,曾任某某底层本土公司的技术

分享最新15个加速 Web 开发的框架和工具

我们为开发人员挑选了15个最新的  Web 开发框架,你肯定尝试一下这些新鲜的框架,有的可能略微复杂,有的提供了很多的配置选项,也有一些窗口小部件和界面交互的选择.他们将帮助你创建更优秀的网站,提供给用户更好的体验. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读精华文章推荐 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 8个前沿 HTML5 & CSS3 效果[附源码下载] 1.

KendoUi 学习笔记一

本系列主要是记录KendoUI的学习过程. KendoUi的特点有以下特点: 1. 70+UI控件 控件有DataGrids,DropDowns,Menus和Buttons,还有一些商业的控件,比如Charts,电子表格,甘特图,线图,日程图,PivotGrid和地图. 2.漂亮主题 有较多的样式可以选择,可以不用写任何样式,可以使你的APP很优雅.通过一个简单样式创建工具就可以自定义样式. 3.任意屏幕 构建跨平台的网页应用,给任意尺寸的桌面程序和手机.所有内容完全无缝兼容grid布局框架,比

10 个非常有用的 AngularJS 框架

AngularJS是最流行的开源web app框架.AngularJS被用于解决阻碍单页应用程序开发的各种挑战. 你作为一个AngularJS用户,却不知道一些可以帮助你美化编码的资源?那么一定不能错过这篇文章,下面我们就会给大家介绍10个最佳的AngularJS框架,帮助你美化编码,让你可以快速方便地创建创新的网站应用程序. 1.Angular UI Bootstrap 从名字你就可以知道,Angular UI Bootstrap使用顶级框架——Bootstrap构建.你可以使用此框架来重写现

【转载】Web前端开发技术栈

前端领域的发展非常迅猛,大前端的时代到来了,据说每隔12-24个月,前端的难度将增加一倍,从下面的技术栈就可以看出前端领域的丰富度和复杂度 核心概念 HTML|-- DOM|-- Element|-- Attribute JavaScript|-- 原型 Prototype|-- 作用域 Scope|-- 闭包 Closure|-- JSON|-- AJAX CSS|-- 选择器 Selector|-- 优先级|-- 特性 Specificity|-- 盒子模型 渲染引擎 |-- Trident

为什么我不想成为Web前端程序员

职位名称并不代表技能集 作为一个前端开发人员,你是不是认为自己不需要懂很多技能?然而事实可能并非如此. 我在一个热门的工作论坛就前端开发工作做了一个快速搜索,发现有一个主题经常反复出现,那就是成为中级/高级前端开发者需要什么技能: (X)HTML(5).CSS.SASS / SCSS,LESS. Backbone.Angular.Knockout. 响应式网页设计(例如Bootstrap知识.Foundation等). Adobe Photoshop.Magento. 源控制和某种形式的客户端单