Home>

bootstrap and foundation are my two favorite front-end frameworks,Especially on prototypes for rapid website development.They all provide ready-to-use components,Speeded up my workflow.Apart from some minor differences,In my opinion most of their basic characteristics are similar.

In this article,I will introduce the basic construction of their grid.First, I will show you how they are structured,Describe their main components,And how they differ for different screen sizes.Then, I will help you to increase your knowledge through the practice of a real example.

Let's start together!

Compare one:Comparison of media queries

Before analyzing the grid structure of bootstrap and foundation,Let's first look at the breakpoints they provide for responsive layouts.This is the number of available grids that each framework can use to set.

bootstrap specifies 4 px-based media query breakpoints.Shown as follows:

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

To give you a way to understand how media queries work,I suggest you check out the bootstrap demo and the related foundation demo. But if you still have some confusion,The next section will explain everything.

note:foundation of large screens and grids for large screens is disabled by default.If i want to use them,You must "cancel" and set the two variables $include-xl-html-grid-classes and $include-xl-html-block-grid-classes to true. You can find these variables in the _settings.scss section.

Comparison two:Grid structure

Both bootstrap and foundation provide a moving first 12-column grid consisting of rows and columns. Columns are nested in rows.The total number of columns in each row is 12 columns. Rows can also be nested within columns.

These two frameworks contain many predefined classes that you can use to set the size of the columns.As mentioned above,bootstrap contains 4 media query breakpoints and foundation contains 5. For each grid,They all have different class prefixes that can be used to set the size of the columns (see the previous two tables).

The bootstrap grid's rows also need encapsulated elements.This should have a container or container-fluid class. The container class in an element has a fixed value,Its value depends on the window (see the first table above), while the container-fluid class in the element extends to the full width of the browser window.

Comparison three:Column!=12?

It is possible that the number of columns in a grid system is not equal to 12.under these circumstances,bootstrap will float the last column to the left,Foundation will float it to the right.If i want to override the default behavior of foundation,Just added in the last column.end class.

Comparison four:Function class

Both frameworks provide additional classes that allow you to define their grids very flexibly.

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

Comparison five:Grid block

In addition to the default grid,foundation also supports another raster feature,That is the grid block.It allows you to create columns of equal size using the smallest markup.To use it,The rows are defined as ul elements, and the columns in the rows are defined as li elements. Then specify the column size by applying the relevant class to the ul element (see the second table above for details).

At this time you might think,What is the difference between a regular grid and a grid block?Let's take a brief look at two differences:

Unlike the default grid,(Grid block) maximum width applied to each row,So it always fills the entire browser window.

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

Use grid

Now that we have a good understanding of the grids of these two frameworks,Let's see how we can use them to build a bootstrap page and corresponding foundation page.

The screenshot below shows the first layout we will build:

Starting with bootstrap, we define an element with a container class.As discussed earlier,This class will set a fixed width for this element according to the size of the screen (see the bootstrap table for details). Then, we add an element with the row class to it.

Now we are ready to set up our columns.For the big screen,We want 4 columns of the same size.So we defined 4 div elements each with col-lg-3 class. However, for small and medium-sized devices we prefer to have two columns in each row.Due to this reason,We use the class col-sm-6. Finally, for ultra-small screens we want the columns to stack up.This is the default behavior of the mobile first framework,Therefore, it is not necessary to define the class col-xs-12.

Its html looks like this:

<div>
 <div>
 <div>
  <!-Content->
 </div>
 <div>
  <!-Content->
 </div>
 <div>
  <!-Content->
 </div>
 <div>
  <!-Content->
 </div>
 </div>
</div>

Let's move on to foundation.

The foundation grid is very similar to the bootstrap grid.But it's a bit simpler.First, we have to define an element with a row class,This element will contain our columns.This class sets the element's max-width to 62.5rem (1000px). Next, we add columns.to make this purpose,We specify that each div element has a column or columns class, and then use the corresponding grid class (see the foundation table above for details) to set their width.Similarly, for small devices we don't need to define the small-12 class.

This isHtml based foundation:

<div>
 <div>
 <!-Content->
 </div>
 <div>
 <!-Content->
 </div>
 <div>
 <!-Content->
 </div>
 <div>
 <!-Content->
 </div>
</div>

At this point I think you have started to become more familiar with the grid systems of these two frameworks.But maybe another example can help you understand more clearly.

In the next example,We will build the footer. The following illustration shows the style we want:

Here, we will choose a different layout to compare with the previous example.For a screen with a medium screen and above (or a screen with a small screen and above in the bootstrap grid), we want to display three columns.However, we noticed thatThere is a nested row in the last column.This consists of two columns.We will set their width to half the line width on all devices.Finally, we adjust the visibility of the pictures that appear in the nested lines.

This is the code in bootstrap:

<div>
 <div>
 <div>
 <!-Content->
 </div>
 <div>
 <!-Content->
 </div>
 <div>
 <div>
 <div>
  <a href="#">
  <p>let "s meet and discuss</p>
  <i></i>
  </a>
 </div><!-.Col-xs-6->
 <div>
  <!-Content->
 </div>
 </div><!-.Row->
 </div><!-.Col-sm-4->
 </div><!-.Row->
</div><!-.Container->

This is the code for foundation:

<div>
 <div>
 <!-Content->
 </div>
 <div>
 <!-Content->
 </div>
 <div>
 <ul>
  <li>
  <a href="#">
  <p>let "s meet and discuss</p>
  <i></i>
  </a>
  </li>
  <li>
  <!-Content->
  </li>
 </ul>
 </div><!-.Medium-4 .columns->
</div><!-.Row->

note:If i want to replace the grid block,We can use the foundation default grid to create nested rows.

in conclusion

If i want more information about the bootstrap grid system,You can go check out this article:"The grid system (layout) that bootstrap must learn every day"

Finally, in this article,I introduced the grid structure of bootstrap and foundation.Then we saw how to use their grid in a real project.as you saw,All the grids are similar,You can define it further.

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

  • Previous Detailed examples of form controls supported by Bootstrap
  • Next Bootstrap4 a major update involving almost every line of code