Bootsrap3与Foundation5的五个最大的区别

Top 5 Core Differences Between Bootstrap 3 and Foundation 5

Developers, use Bootstrap. Front-enders, use Foundation.The rest of this article just explains why.

• Felippe Nardi in Frontend and beyond

Updated to Foundation 5 and Bootstrap 3

There are significant core differences between Bootstrap andFoundation, but if I can give you just ONE thing to remember, that thing is:

ZURB and Twitter made their objectives and intentions very clear when naming each CSS Frameworks : Bootstrap tries to give you everything  you’ll ever need to bootstrap your project.   Foundation just gives you the foundation to build upon.

Keep this in mind while I list you some of the core differences between both CSS Framework:

1- UI Elements

Foundation has a very limited number of UI elements, Bootstrap have almost everything you can imagine.

ZURB’s intention with Foundation was NOT to make all the web look the same with pre-designed UI elements.

On the other hand, Bootstrap will give almost every UI element you can think of.

2- REMs VS Pixels

Foundation use REMs and Bootstraps use pixels.

Using pixels means you will have to explicit declare a height, width, padding, margin of a component (and its nested element) on EVERY target device and screen size you want to give it a different look using media queries.

Foundation 5 is now using REM instead of EM, to avoid the EM cascade issue.

Using REMs means you can just state font-size: 80%; and have the whole component (and its nested elements) shrink by 20%.

Its also worth mentioning that you can leave details you don’t want to change in pixels, so only REMs units will be bonded to the font-size property.

Foundation will give you a sass mixin to convert pixels to REMs, so you can still think in pixels and end up with scalable em.

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

3- Flexible Grid VS Pre-defined Grids

Foundation’s grid shrinks and stretches according to the current browser width. Bootstrap has a pre-defined set of grid sizes for main devices and screens.

Bootstrap will abruptly change its grid like a transformer while you resize the browser width.

Foundation will flexibly adapt its grid to the current browser width, that is what they call layout will morph like a Transformer while resizing the browser width.

Foundation has two main points where the grid will change: small, medium and large. Everything in between is shrunk and stretched to match the current browser width. No pre-defined screen sizes, and the main reason of existing two points for the grid to change, is to encourage you to display columns differently for small and larger screens.

With Bootstrap you get can get a fixed or a fluid grid, that means respectively setting or not a pre-defined width to the grid container.

Using Foundation with Sass, you can change the size of your largest grid (and the smaller ones are automatically calculated), the number of columns for large screens, the number of columns for small screens and the column gutter for each.

4- Mobile First VS Mobile Also

Foundation was designed for ANY four corners screen. Bootstrap was designed for mobile, tablet, desktop and large desktops.

Building sites for mobile first means it will ALWAYS be usable on bigger screens. Because of this, Foundation encourages you to start this way.

If you use Foundation’s sass media query mixins, you will notice that no media query means what it will look on mobile and, on top of that, you use media queries to define what will look like on larger screens.

Bootstrap responsiveness was added as a feature in later versions. You get some special media queries for different screen sizes, but the main target is the desktop.

Designing things for desktop first may make it difficult for you to arrange your content on smaller screens, while mobile first helps you focus on what is most important content for the user, and enhance the experience as there is space too.

5- Community

Bootstrap has the larger community. You’ll have to get your hands dirty when using Foundation.

Something very nice about Bootstrap is the community. It is huge, and everywhere you look around you’ll find a gem or component built for Bootstrap.

If you are going with Foundation, getting your hands dirty is something you’ll have to get used to. Almost all solutions are made for Bootstrap so you’ll mostly like have to build your own.

Conclusion

Ask your self those questions: Do you want something easy to use and ready to make your web app come to life? Or do you rather plan your CSS carefully and have the least you need to use as the base to your project?

The answer is: Bootstrap. Foundation. Respectively