twitter-bootstrap 将 Zurb Foundation 4 / Twitter Bootstrap 3 用于非移动优先项目

Use Zurb Foundation 4 / Twitter Bootstrap 3 For Non Mobile First Projects

提问by Henson

Has anyone used Foundation 4 or Bootstrap 3 beta? As you know, both are re-written to make it mobile first.

有没有人使用过 Foundation 4 或 Bootstrap 3 测试版？如您所知，两者都经过重新编写以使其首先具有移动性。

I'm very excited with the mobile first approach, but in real life, sometimes circumstances don't let us do what we believe is the right way.

我对移动优先的方法感到非常兴奋，但在现实生活中，有时情况不允许我们做我们认为正确的事情。

So I just want to ask, has anyone used F4 or BS3 for non mobile first (or even non responsive) projects? I haven't really dived into the codes and the documentation is quite lacking.

所以我想问一下，有没有人将 F4 或 BS3 用于非移动优先（甚至非响应）项目？我还没有真正深入研究代码，而且文档非常缺乏。

What I mean is, is there some hidden caveats in F4/BS3 that if I use one of them for non mobile first/responsive projects, somehow it's not gonna work as smoothly as both frameworks are meant to be mobile first frameworks? Or do you recommend using Foundation 3.5 or Bootstrap 2.3 for non mobile first projects?

我的意思是，在 F4/BS3 中是否有一些隐藏的警告，如果我将其中一个用于非移动优先/响应式项目，不知何故它不会像两个框架都应该成为移动优先框架那样顺利工作？或者您是否建议将 Foundation 3.5 或 Bootstrap 2.3 用于非移动优先项目？

Thanks, hope I'm being clear enough.

谢谢，希望我说得够清楚了。

回答by Joe

My company has just recently switched to exclusive F4 use. We are not at all against Bootstrap, but here are the reasons we made our decision:

我的公司最近才改用 F4 专用。我们完全不反对 Bootstrap，但以下是我们做出决定的原因：

• More semantic classes: this is of course a matter of opinion, but for us this can shave time off of a build.

• A golden standard: You can hand F4 to just about anyone with html and css knowledge and you will see VERY similar markup for the same site from nearly all. This means it becomes much easier to contract out help if need be, and ensure quality design.

• The UI: Yes Bootstrap wins this if you judge on it alone, but if you look at it as a whole really the UI of foundation is very close. Plus lets keep in mind that you can customize any of it with app.css

• Zepto: I am a fan. What can I say. SEO is part of our world, and fast loads mean something, and even leaving SEO out....fast loads = less bounce.

• SEO: Google has already come out and recommended responsive design for mobile SEO.

• Why not?: What site can I not recreate with the framework. It is still CSS. It does force us to rethink how we code, but isn't that why we love to code in the first place? Figuring out solutions to simplify design?

  Sorry for the novel. Just my take on it, and I know its not really 100% subject matter. In reality F4 vs Bootstrap 3 is really a moo point. If you are on-board with responsive you are making yourself marketable. If you are not then you are completely ignoring the direction that technology is heading and you should get out of the game.

• 更多语义类：这当然是一个意见问题，但对我们来说，这可以节省构建时间。

• 黄金标准：您可以将 F4 交给几乎任何具有 html 和 css 知识的人，并且您会从几乎所有人中看到相同站点的非常相似的标记。这意味着在需要时外包帮助变得更加容易，并确保设计质量。

• 用户界面：是的，如果你单独判断，Bootstrap 会赢得这个，但如果你从整体上看，基础的用户界面非常接近。另外请记住，您可以使用 app.css 自定义任何内容

• Zepto：我是粉丝。我能说什么。搜索引擎优化是我们世界的一部分，快速加载意味着一些东西，甚至不考虑搜索引擎优化......快速加载=更少的反弹。

• 搜索引擎优化：谷歌已经出来并推荐了移动搜索引擎优化的响应式设计。

• 为什么不？：我不能使用框架重新创建哪些站点。它仍然是CSS。它确实迫使我们重新思考我们如何编码，但这不正是我们喜欢编码的原因吗？找出简化设计的解决方案？

  对不起小说。只是我对它的看法，我知道它不是真正的 100% 主题。实际上，F4 与 Bootstrap 3 确实是一个moo 点。如果您在船上响应迅速，那么您就是在使自己有市场。如果你不是，那么你就完全忽视了技术的发展方向，你应该退出游戏。

回答by Ben Snyder

I just finished putting together 3,200 words on which framework is better. The simple answer is: Foundation 4, and it's not all that close.

我刚刚整理了 3,200 字关于哪个框架更好。简单的答案是：Foundation 4，它并不是那么接近。

For the full article: http://abetteruserexperience.com/2013/08/twitter-bootstrap-3-vs-foundation-4-which-one-should-you-use/

全文：http: //abetteruserexperience.com/2013/08/twitter-bootstrap-3-vs-foundation-4-which-one-should-you-use/

The two frameworks have a lot in common, but there are some differences. The major benefits of Foundation 4 over Twitter Bootstrap 3 are:

这两个框架有很多共同点，但也有一些区别。Foundation 4 相对于 Twitter Bootstrap 3 的主要优点是：

• easy to remember class naming conventions
• images that are responsive by default
• containers that will go to the edge of the screen
• Block Grid
• adaptive images (Interchange)
• walk-throughs (Joyride)
• form validation (Abide)
• pricing tables
• flex video
• inline lists
• No Conflict mode that just works
• access to ZURB if you run across problems

• 容易记住的类命名约定
• 默认响应的图像
• 将到达屏幕边缘的容器
• 块网格
• 自适应图像（交换）
• 演练（Joyride）
• 表单验证（Abide）
• 定价表
• 弹性视频
• 内联列表
• 没有冲突模式，只是有效
• 如果遇到问题，可以访问 ZURB

To put it simply: Bootstrap feels like it's somebody's hobby, Foundation 4 feels like it's somebody's job.

简单地说：Bootstrap 感觉像是某人的爱好，Foundation 4 感觉像是某人的工作。

回答by Jigar Jain

My below opinion is based on my extensive usage of Foundation in my projects & limited use of Bootstrap. When i saw the word 'Non-Mobile First' in your question, the immediate framework that came to my mind was Bootstrap. The major difference i have found in both these frameworks are

我的以下意见基于我在项目中广泛使用 Foundation 和有限使用 Bootstrap。当我在您的问题中看到“非移动优先”这个词时，我想到的直接框架是 Bootstrap。我在这两个框架中发现的主要区别是

Foundation is a great framework for implementing Responsive grid systems..It gives great control on how you wish to show your page on Mobiles as well as Desktop. But at the same time i don't find the UI Elements in Foundation to be very sleek enough as compared to Bootstrap.

Foundation 是一个很好的框架，用于实现响应式网格系统。它可以很好地控制您希望如何在移动设备和桌面上显示您的页面。但与此同时，与 Bootstrap 相比，我发现 Foundation 中的 UI Elements 不够时尚。

Bootstrap has some awesome looking UI Elements, great Looks and do provide responsiveness grid but not that powerful as that of Foundation. But it has some great resources & additional plugins which can be very useful

Bootstrap 有一些很棒的 UI 元素，很棒的外观并且确实提供了响应网格，但没有 Foundation 那样强大。但它有一些很棒的资源和额外的插件，非常有用

So as per my opinion, if your project is not Mobile First then go with Bootstrap else Foundation is the best choice :)

所以在我看来，如果你的项目不是 Mobile First，那么使用 Bootstrap 否则 Foundation 是最好的选择:)

P.S - The new Bootstrap 3 is mobile-first. So the line "When i saw the word 'Non-Mobile First' in your question, the immediate framework that came to my mind was Bootstrap" in my answer is no more valid. But the deduction is still same. If you want great level of control with grids you should go with Foundation. For UI/Plugins, Bootstrap is good choice :)

PS - 新的 Bootstrap 3 是移动优先的。因此，“当我在您的问题中看到‘非移动优先’这个词时，我想到的直接框架是 Bootstrap”在我的回答中不再有效。但是扣分还是一样的。如果你想对网格进行高水平的控制，你应该选择 Foundation。对于 UI/插件，Bootstrap 是不错的选择 :)

回答by soulglider

F4 and Bootstrap are both powerful responsive frameworks that do the job very well. Foundation has more responsive hooks than Bootstrap which can be particularly useful in responsive projects. The fact that F4 doesn't support IE8 (by design) will deter some from using it now. Bootstrap 3 continues support for IE8 as far I know with a mobile first approach like F4.

F4 和 Bootstrap 都是功能强大的响应式框架，可以很好地完成这项工作。Foundation 具有比 Bootstrap 更多的响应式钩子，这在响应式项目中特别有用。F4 不支持 IE8（按设计）的事实将阻止一些人现在使用它。据我所知，Bootstrap 3 继续支持 IE8，使用像 F4 这样的移动优先方法。

回答by saileron

You could always setup your template (in either framework) to use fixed widths. Then later if you need support for other devices, like tablets, it's easy to add some CSS to handle those sizes and orientations.

您始终可以将模板（在任一框架中）设置为使用固定宽度。然后，如果您需要支持其他设备，例如平板电脑，可以轻松添加一些 CSS 来处理这些尺寸和方向。