Shulou(Shulou.com)06/03 Report--

This article mainly explains "the method tutorial of Bootstrap3.0 grid system". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the method tutorial of Bootstrap3.0 Grid system.

Grid option

Through the screenshot below, you can see more clearly how Bootstrap's grid system works on many different mobile devices.

As can be seen from the screenshot above, Bootstrap sets different style classes for different sizes of screens (including mobile phones, tablets, PC, etc.), giving developers more choices when developing. As I understand it: if you use more than one of the above style classes on an element, the element will choose the most appropriate (matching ideal) style class according to different sizes. A simple example: for example, we use two style classes on an element: .col-md- and .col-lg. You can compare it with the screenshot above.

In the first case, size "= 1200px; then .col-lg is selected.

The second case: size "= 992px and size" = 1200px; then .col-md is selected.

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

From stacking to horizontal arrangement

The use of the four style classes in the grid options is based on the .row class, which is usually done in .container.

The code is as follows:

Is to use the appropriate style class in the right container.

Using a single set of .col-md-* grid class, you can create a basic grid system that is initially stacked on phones and tablets (from ultra-small screens to small screens) and horizontally on desktop (medium) screen devices. Just place the column (col-*-*) in any .row.

The code is as follows:

Case: from stacking to horizontal arrangement

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

You can view the effect of stacking and horizontal arrangement by controlling the width of the browser

This is obviously the effect of stacking, when the width of the browser is adjusted to a smaller size.

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

Mobile devices and desktops

From the above example, we can find that when using .col-md-* when a small screen is used, it will be stacked, so developers must sometimes need small screen pages to be displayed horizontally. Then our .col-xs-* (a style class smaller than the 768px screen) comes in handy.

The code is as follows:

Case study: mobile devices and desktops

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6 .col-md-4

.col-xs-6

.col-xs-6

Through the code, we can find that for the div in the first two .row style classes, we set two style classes on top of each element.

This is the effect shown on a slightly larger screen, where the two styles for each element will be selected in different sizes, so in a slightly larger case, the selected style class will be .col-md-*.

So:

The first line: the ratio of 8 to 4.

The second line: the three four evenly divided into three parts.

The third line: although 6 and 6 are large sizes because this is the only style, they are equally divided into two parts.

Now is the time when the page screen is smaller than a certain degree, reselect the style class for each element. Now it's true that the first two .rows chose col-xs-*.

So:

The first line: the two elements are divided into 12 and 6, and one line is 12, so the second element wraps and occupies half of the six.

The second line: 3 copies of 6 copies. And one line is 12. So the third element wraps the line and then occupies the general position of 6 copies.

Responsive column resets

Through the analysis of the above two cases, we can design a more complex page layout more easily through the four grid class. However, there are still situations where one column in a row is higher than the other columns. Maybe you don't quite know what I mean right now, but it doesn't matter. Let's go straight to the case.

The code is as follows:

Case: Responsive column resets

.col-xs-6 .col-sm-3 (you can see the actual effect of these cases by adjusting the width of the browser or on the mobile phone.)

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

First of all, let's take a look at the display effect of the page under the big screen.

The height of the first element is really different. Then take a look at the small screen.

Look at the arrangement now, because all the styles selected under the small screen are .col-xs-* style classes, and they all take up 6 copies. I don't know if this effect is what you want. Do you want to see these four elements in two lines and then two elements in each row under the small screen?

Next, let's change the above code a little bit, that is, add a line of code.

The code is as follows:

Case: Responsive column resets

.col-xs-6 .col-sm-3 (you can see the actual effect of these cases by adjusting the width of the browser or on the mobile phone.)

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

This effect still achieves two rows and two columns. Of course, you can also use the responsive tool, which will be explained in more detail later. I won't show you an example here for the time being.

Column offset

This is simply through a style class that offsets the column to the right through .col-md-offset-*. These class add all columns to the left margin of the column by using the * selector. For example, .col-md-offset-4 moves .col-md-4 to the right by four column widths.

The code is as follows:

Case: column offset

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

You can probably imagine its typesetting layout by reading the code above.

Nested column

To nest content using a built-in grid, you can do this by adding a new .row and a series of .col-md-* columns to the existing .col-md-* columns. The number of columns contained in nested columns should add up to 12.

The code is as follows:

Case: column nesting

Level 1: .col-md-9

Level 2: .col-md-6

Level 2: .col-md-6

Level 3: .col-md-3

Level 3: .col-md-6

As you can see from the above code, a row is defined first, and then a column of .col-md-9 is added to the row, which means that the element has nine columns.

Then two different row are added to the nine-column element.

That is, the first row: divides the first row into two parts, each with 6 columns, these 12 columns, but its total width is the same as the width of the 9-column elements outside it.

The second row: divides the second row into two, the first one has three columns, the second has six columns, and then the remaining three columns are not populated.

Column sort

By using .col-md-push-* and .col-md-pull-*, you can easily change the order of columns.

Through the code to achieve, see the effect, for the understanding of this sentence I still do not understand.

The code is as follows:

Case: column nesting

.col-md-4

.col-md-4

.col-md-4

.col-md-2 .col-md-push-4

.col-md-5 .col-md-push-4

As you can see, I defined three lines.

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

In the second row, there is only one element and has two columns, and then a style class of .col-md-push-4 is added to this element. (let the element with two columns move four more columns to the right, so it now occupies the fifth and sixth columns. )

The third column is divided into two, the first has seven columns, but is empty, and the second has five columns, and a .col-md-pull-4 style class has been added to this element, which should have exactly the opposite effect as the additional class in the previous row. (let the elements with five columns move four more columns to the left, starting with the eighth column, so now it starts with the fourth column. )

Now let's take a look at the effect demonstration.

At this point, I believe you have a deeper understanding of the "method tutorial of Bootstrap3.0 Grid system". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.