Development Engineer, Usebootstrap.Front-end developer, Usefoundation. Let's talk about why.

There are many key differences between bootstrap and foundation. However, I think you only need to remember one thing:

The two design concepts of zurb and twitter are very clear. It can be seen from their naming of their own framework: In other words, it tries to handle everything you need in your project. Foundation has the meaning of creation, In other words, it just gives you powerful creativity in your project.

Keep this view, Now let me list more key differences between the two:

Ui element

The foundation arranges only a few elements, bootstrap gives you everything you can imagine.

The design goals of zurb for foundation are, Even if you use predefined UI elements, you should not look too much like your website.

And on the other side,bootstrap tries to provide you with all the defined ui elements.

2. rems vs pixels

foundation uses rems, andbootstrap uses pixels.

Using pixels means that you have to define exactly the height of a component, Wide, padding, padding, and on every device and screen size, Because different devices often have very different display effects.

Foundation 5 now uses rems instead of em. In this way, em cascade problems are avoided.

Using rems means that you can directly use font-size:80%;you can make the entire component and its sub-components shrink by 20%.

It is worth explaining that With rems, you can get rid of the details of pixels, So, it is well worth using rems for processing.

The foundation also provides sass's mixin method to convert pixels to rems.In this way, you can continue to use pixels to define the page:

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

3. Flexible grids vs predefined grids

The foundation's grid can automatically adapt to the width of the current browser. Boostrap pre-defines several grid sizes to fit mainstream devices and screens.

bootstrap will suddenly change its grid when you change the browser width.

foundation will flexibly adapt to the current browser width, This is a new technical means, While automatically adapting, It can perform the same effect as a transformer.

The foundation has two main points when the grid changes:small, medium, and large. All operations are only reduced and enlarged, And adapt to the width of the current browser. No need for a predefined screen size, And the main reason is, You are encouraged to define different styles according to the size of the screen.

Using bootstrap, you get a fixed or manifold mesh, This means that you need to set or say that the grid container is not a predefined width.

With foundation and sass, you can freely adjust the size of the largest grid (medium and small are automatically calculated), the number of columns on the large screen, Number of columns for small screens.

4. Mobile device priority vs mobile device support

Foundation was designed with any four-corner screen in mind. WhileBoottrap is pre-designed into:mobile phones, tablets, desktops and desktops with large screens.

Building a website that supports mobile devices preferentially means that it is definitely available on a larger screen. So, foundation encourages you to do this:mobile first.

If you use foundation's sass media query mixin, you will find that No specific media query to query what a mobile device is, Instead, you use media queries to define how they should be displayed on a larger screen.

When designing a desktop first, you are likely to encounter great problems when supporting smaller screens. And if you think about mobile phones first, Will let you focus on what is most important to the user, Let your sense of space increase.

5. The community

bootstrap has a bigger community. With foundation you have to be self-reliant.

The great thing about bootstrap is the community. It's a very huge, All inclusive, You can find almost everything.

If you choose foundation, self-reliance may be what you have to master. Almost all solutions are for bootstrap, you can only build your own.

in conclusion

Ask yourself a few questions:

Do i want to make something easier to use or make it more lifelike?

You want to organize your own css, just make it your basic component?

The answers are:bootstrap. foundation.

If i want to learn more,Can clickHereTo learn,Attached 3 exciting topics for everyone:

  • Previous thinkPHP32 simple method for file upload
  • Next 53 of Manipulating Data in ASPNET 20: Displaying Binary Data in the Data Web Control