On the similarities and differences _javascript techniques of BOOTSTRAP3 and Foundation5 grid systems

Bootstrap and foundation are my favorite two front-end frameworks, especially on the prototype of the Fast development Web site. They all provide ready-to-use components that speed up my workflow. Except for a few small differences, most of them are similar in my opinion.

In this article, I'll introduce the basic constructs of their grids. First, I'll show you how they are built, describe their main components, and how they differ in size from one screen to another. Then, I will help you add knowledge through a real-life example of practice.

Let's start together!

Compare One: Comparison of media queries

Before analyzing the grid structures of Bootstrap and foundation, let's look at the breakpoints they provide for the response layout. This is the amount that each frame provides that can be used to set the available grids.

Bootstrap specified 4 PX-based media query breakpoints. The display is as follows:

The foundation contains 5 media queries based on EM. They are shown in the following table:

To give you a way to understand how media inquiries work, I suggest you go to the bootstrap demo and the related Foundation demo. But if you still have some confusion, the next part will explain everything.

Note: Foundation large screen and super large screen grids are disabled by default. If you want to use them, you must "Cancel" and set $include-xl-html-grid-classes and $include-xl-html-block-grid-classes the values of these two variables to be true. You can find these variables in the _settings.scss section.

Compare two: grid Structure

Both Bootstrap and foundation provide a 12-column grid consisting of rows and columns that move first. Columns are nested in rows. The sum of the number of columns per row is 12 columns. Rows can also be nested in column.

These two frameworks contain a number of predefined classes that you can use to set the size of a column. As mentioned above, Bootstrap contains 4 media query breakpoints and Foundation contains 5. For each grid, they have different class prefixes that can be used to set the size of the column (see the previous two tables).

The rows of the bootstrap grid also require encapsulated elements. This should have a container or container-fluid class. The container class in an element has a fixed value whose numeric value depends on the window (see the first table above), while the Container-fluid class in the element expands to the entire width of the browser window.

Compare three: column!=12?

It is possible that the number of columns in a grid system is not equal to 12. In this case, Bootstrap will float the last column to the left, and foundation will float it to the right. If you want to rewrite the default behavior of foundation, add the. End class in the last column.

Compare four: Functional Class

Both of these frameworks provide additional classes that give you the flexibility to define their grids.

A visible class lets you choose to display or hide content on a specific size screen. The offset class allows you to center incomplete columns or to adjust the spacing between them. Of course, there are other classes that can specify the order of the columns according to different devices.

Compare five: grid Block

In addition to the default grid, foundation also supports another raster feature, the grid block. It allows you to create columns of equal size using the smallest markup. To use it, define the line as a UL element, and the columns within the row are defined as Li elements. Then you specify the size of the column by applying the relevant class to the UL element (see the second table above).

At this point you might think, what is the difference between a rule grid and a grid block? Let's take a brief look at their two different points:

Unlike the default grid, the maximum width is applied to each row (grid blocks), so the entire browser window is always covered.

Grid blocks can only be used in items of equal size.

Using grids

Now that we have a good understanding of the grid of these two frameworks, let's see how we can use them to create a bootstrap page and corresponding Foundation page.

The screenshot below shows the first layout we're going to build:

Starting with the bootstrap, we've defined an element with a container class. As discussed earlier, this class sets a fixed width for the element based on the size of the screen (see Bootstrap's Table). Then we add an element with a row for this class.

Now, we are ready to set up our columns. For a big screen, we want 4 columns of the same size. So we've defined 4 div elements that each have a col-lg-3 class. However, for small and medium sized devices we tend to have two columns in each row. For this reason, we use the Col-sm-6 class. Finally, for the Super small screen we want the columns to stack up. This is the default behavior for moving the first frame, so there is no need to define the Col-xs-12 class.

Its HTML is like this:

<div class= "Container" >
 <div class= "Row" >
 <div class= "col-sm-6 col-lg-3" >
  <!-- Content-->
 </div>
 <div class= "col-sm-6 col-lg-3" >
  <!--content-->
 </div >
 <div class= "col-sm-6 col-lg-3" >
  <!--content-->
 </div>
 <div class= " Col-sm-6 col-lg-3 ">
  <!--content-->
 </div>
 </div>
</div>

Let's continue to look at foundation.

The foundation grid is much like the bootstrap grid, but it has to be simpler. First, we have to define an element with a row class that will contain our columns. This class sets the element's max-width to 62.5rem (1000px). Next, we add the columns. To do this, we specify that each DIV element has a column or columns class, and then use the corresponding grid class (see the table above Foundation) to set their width. Similarly, for small devices, we don't have to define the Small-12 class.

This is the HTML based on the foundation grid:

<div class= "Row" >
 <div class= "medium-6 large-3 columns" >
 <!--content-->
 </div>
 <div class= "medium-6 large-3 columns" >
 <!--content-->
 </div>
 <div class= " medium-6 large-3 Columns ">
 <!--content-->
 </div>
 <div class=" Medium-6 large-3 Columns ">
 <!--content-->
 </div>
</div>

At this point I think you have begun to become more familiar with the grid systems of these two frameworks. But maybe another example will help you get a clearer picture.

In the next example, we'll build the footer. The following diagram shows the style we want:

Here, we will choose a different layout to compare with the previous example. For screens above and below the screen (or in the bootstrap grid with small screens and screens above), we want to display three columns. We note, however, that there is a nested row in the last column. This is made up of two columns. We'll set them to half the width of the line in all the devices. Finally, we'll adjust the visibility of the pictures that appear in the nested rows.

This is the code in bootstrap:

<div class= "Container" >
 <div class= "Row" >
 <div class= "col-sm-4" >
 <!--content >
 </div>
 <div class= "col-sm-4" >
 <!--content-->
 </div>
 <div class= "Col-sm-4" >
 <div class= "Row" >
 <div class= "col-xs-6" >
  <a href= "#" >
  <p>let ' s meet and discuss</p>
  <i class= "fa fa-map-marker fa-2x visible-lg" ></i>
  </a>
 </div><!--. col-xs-6-->
 <div class= "col-xs-6" >
  <!--content-->
 </div>
 </div><!--. Row-->
 </div><!--. col-sm-4-->
 </div ><!--. Row-->
</div><!--. Container-->

This is the Code for Foundation:

<div class= "Row" >
 <div class= "medium-4 columns" >
 <!--content-->
 </div>
 <div class= "medium-4 columns" >
 <!--content-->
 </div>
 <div class= "medium-4 columns ">
 <ul class=" small-block-grid-2 ">
  <li>
  <a href=" # ">
  <p>let ' s meet and discuss</p>
  <i class= "fa fa-map-marker fa-2x show-for-large-up" ></i>
  </a>
  </li>
  <li>
  <!--content-->
  </li>
 </ul>
 </div ><!--. medium-4 columns-->
</div><!--. Row-->

Note: If you want to replace the grid block, we can use the foundation default grid to create nested rows.

Conclusion

If you want more information about the bootstrap grid system, you can check out this article: "Bootstrap grid system (layout) that must be learned every day"

Finally, in this article, I introduce the grid structure of Bootstrap and foundation. Then we saw in a real project how to use their grids. As you can see, all grids are similar, and they are further defined.

I hope you can enjoy this article, perhaps you can take what you have learned in this application to your project, more bootstrap content attention: "Bootstrap learning course", thank you for your reading.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.