Bootstrap 3.0 study notes grid system case

Preface

In the previous article, we mainly learned the basic principles of the grid system and put the principles into practice through simple cases.

The main content of this article will be divided into the following parts

1. Grid options

2. From stacking to horizontal arrangement

3. Mobile devices and desktop

4. Responsive column resets

5. Column offset

6. Nested columns

7. Column Sorting

8. Summary

Raster Options

The following screenshots show how Bootstrap's grid system works on a variety of mobile devices.

As can be seen from the screenshots above, Bootstrap sets different style classes for screens of different sizes (including mobile phones, tablets, PCs, etc.), giving developers more choices when developing. According to my understanding: If you use multiple different style classes above on an element, the element will choose the most appropriate (most ideal matching) style class based on different sizes. Let’s take a simple example to illustrate: for example, we use two style classes on an element: .col-md- and .col-lg. You can refer to the screenshot above.

In the first case: size>=1200px; then .col-lg will be selected.

Second case: size>=992px and size<=1200px; then .col-md will be selected.

In the third case, if the size is less than 992px, then neither of these two style classes will act on the element.

From stacking to horizontal arrangement

The four style classes in the grid options are all used based on the .row class, which is usually used in the .container.

It's all about using the right style class in the right container.

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on phones and tablets (the extra small to small screen range) and then moves horizontally on desktop (medium) screen devices. Simply place columns (col-*-*) inside any .row.

You can control the width of the browser to see the effects of stacking and horizontal arrangement.

Obviously this is the stacking effect, that is, when the browser width is adjusted to a smaller size.

Now it is arranged horizontally. After adjusting the browser width to a slightly wider size. You can also use the other three classes to test the effect.

Mobile and Desktop

From the above examples, we can see that when .col-md-* is used on a small screen, it will appear stacked. So developers must sometimes need the page display on a small screen to be arranged horizontally. Then our .col-xs-* (style class for screens smaller than 768px) comes in handy.

From the code, we can find that for the first two divs in the .row style class, we set two style classes on each element.

This is the effect displayed on a slightly larger screen size. The two styles for each element will be appropriately selected at different sizes. In the case of a slightly larger screen size, the selected style class will be .col-md-*.

so:

First row: ratio of 8 to 4.

Second row: Three 4s divided into three equal parts.

Third row: Although 6 and 6 are large sizes, since there is only one style, they are also divided into two equal parts.

Now, when the page screen is smaller than a certain size, reselect the style class for each element. Now the first two .row options are both col-xs-*.

so:

First row: The two elements are divided into 12 and 6, and one row is 12 parts, so the second element will wrap and occupy half of the 6 parts.

Second row: 3 pieces of 6. And one row is 12 copies. So the third element will wrap and take up 6 common positions.

Responsive column resets

Through the analysis of the above two cases, it is easy to design a more complex page layout using these four grid classes. However, there are still some cases where one column in a row is higher than other columns. Maybe you still don’t quite understand what I mean now, but it doesn’t matter, let’s get straight to the case.

First, let's take a look at the page display effect on the big screen

The height of the first element is indeed different. Then look at the small screen.

Look at how it is arranged now, because the .col-xs-* style class is selected for small screens, and each occupies 6 copies. I don't know if this is the effect you want. So, do you want to see these four elements in two rows with two elements in each row on a small screen?

Next, we will change the above code slightly, which is actually adding a line of code

This effect still achieves two rows and two columns. Of course, you can also use responsive tools, which will be explained in detail later, and no example demonstration is given here for the time being.

Column Offset

This is actually very simple. You can use a style class, .col-md-offset-*, to offset the column to the right. These classes increase the left margin of all columns using the * selector. For example, .col-md-offset-4 moves .col-md-4 to the right by 4 column widths.

By reading the code above, you can probably imagine its layout.

Nested columns

To nest content using the built-in grid, add a new .row and a series of .col-md-* columns to the existing .col-md-* columns. The columns contained in the nested column should add up to 12.

From the above code, we can find that first a row is defined, and then a .col-md-9 column is added to this row, indicating that this element occupies 9 columns.

Then two different rows are added to this 9-column element.

That is, the first row: the first row is divided into two parts, each occupying 6 columns, a total of 12 columns, but its total width is the same as the width of the elements outside it occupying 9 columns.

The second row: The second row is divided into two parts, the first part occupies 3 columns, the second part occupies 6 columns, and the remaining 3 columns are not filled.

Column sorting

The Chinese website explains that the order of columns can be easily changed by using .col-md-push-* and .col-md-pull-*.

I have implemented it through code and seen the effect, but I still don’t fully understand this sentence.

As you can see, I defined three rows.

The first row is divided into three equal parts, each with four columns. This line is mainly for comparison with the following two lines.

There is only one element in the second row and it occupies two columns, and the .col-md-push-4 style class is also added to this element. (The element that occupies two columns is moved 4 columns to the right, so it now occupies the fifth and sixth columns.)

The third column is divided into two parts. The first part occupies seven columns, but it is empty. The second part occupies five columns, and a .col-md-pull-4 style class is added to this element. Of course, this class should have the opposite effect of the class added in the previous row. (The element occupying 5 columns is moved four columns to the left. It originally started from the eighth column, but now it starts from the fourth column.)

Now let’s take a look at the effect display

Summarize

This article uses the simplest cases to analyze the layout points involved in the cases. After reading this article, I feel that I have learned quite a lot, and I feel like I need to read it again from the beginning. My understanding of some parts may not be very complete. I hope that senior experts who understand and have seen it can help me correct it. Thank you in advance. I feel very good after writing this article. I have learned a lot. Of course, I hope it can be of some help to you readers.