Bootstrap3.0 learning round 3 (raster system case)

In the previous article. Through the further understanding of the Chinese network http://www.bootcss.com/today, decided to change the original "Bootstrap3.0 learning the third round (layout)" into "Bootstrap3.0 learning the third round (grid system principle)", I also hope to follow the terminology introduced on the Bootstrap website.

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

1. grid options

2. From stack to horizontal arrangement

3. mobile devices and desktops

4. Responsive column resets

5. Column offset

6. nested Columns

7. column sorting

8. Summary

The following shows how the Bootstrap raster system works on a variety of mobile devices.

As shown in the preceding figure, Bootstrap sets different styles for screens of different sizes (including mobile phones, tablets, and PCs, in this way, developers can have more choices during development. According to my understanding: if multiple style classes are used on an element, the element selects the most appropriate (matching the most ideal) style class based on different sizes. For example, two style classes are used for an element:. col-md-And. col-lg. As shown above

The first case: size "= pixel PX; select. col-lg.

In the second case, the "size" = 992px and the "size" = "pixel PX" are selected. col-md.

In the third case, if the size is 992px, neither of these two style classes will apply to the element.

The use of the four style classes in the raster option is based on the. row class, And the. row class is usually carried out in. container.

 <div =>     <div =>        <div =></div>    </div> </div>

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

Use a single group.col-md-*Raster class, you can create a basic raster system, which is stacked together on mobile phones and tablet devices (ultra-small screen to small screen), on the desktop (medium) the devices on the screen are arranged horizontally. Place a column (col-*) on any.row.

Case: From stack 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 stack and horizontal arrangement by controlling the browser width.

Obviously, this is the stack effect, that is, when the browser width is relatively small.

Now it is horizontal arrangement. Adjust the width of the browser to a slight width. You can also use the other three classes to test the effect.

From the above case, we can find that it is used when the screen is small. when col-md-* is displayed in the stacked state, developers must sometimes want to horizontally display small screen pages. Then, our. col-xs-* (Style Class smaller than 768px screen) will come in handy.

Case: 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.

The Code shows that for the div in the first two. row style classes, we have set two style classes on each element.

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

Therefore:

The first line: Ratio of 8 to 4.

Row 2: divide the three four equal parts into three equal parts.

The third line: 6 and 6 are large. Because only this style is available, they are equally divided into two parts.

Now, when the page screen is smaller than a certain degree, you can re-select the style class for each element. Currently, col-xs-* is selected for the first two. rows -*.

Therefore:

The first line: the two elements are divided into 12 and 6, while the first line is 12, so the second element will wrap and occupy half of the six parts.

Row 2: 3 in 6 portions. A row contains 12 copies. Therefore, the third element will wrap the line, and then occupy 6 general positions.

Through the analysis of the above two cases, we can use these four raster classes to design a relatively complex page layout. However, in some cases, a column in a row is higher than other columns. Maybe you are still not quite clear about what I mean, but it doesn't matter. Let's discuss the case directly.

Case: Responsive column resets. col-xs-6. col-sm-3 (by adjusting the browser width or on your phone you can see the actual effects of these cases .) Col-xs-6. col-sm-3. col-xs-6. col-sm-3. col-xs-6. col-sm-3.

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

The height of the first element is indeed not the same. Then let's take a look at the small screen.

The arrangement is as follows, because the style classes of. col-xs-* are selected on the small screen, and they all occupy 6 copies. I don't know if this effect is what you want. Do you want to see these four elements in two rows and then two elements in each row on a small screen?

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

Case: Responsive column resets. col-xs-6. col-sm-3 (by adjusting the browser width or on your phone you can see the actual effects of these cases .) Col-xs-6. col-sm-3. col-xs-6. col-sm-3. col-xs-6. col-sm-3.

This effect is still achieved in two rows and two columns. Of course, you can also use a responsive tool, which will be described in detail later. Examples are not provided here.

In fact, it is very simple to use a style class, through.col-md-offset-*You can offset the column to the right. These classes use*The selector adds the left-side margin of all columns. For example,.col-md-offset-4Set.col-md-4The width of the four columns is shifted to the right.

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 ..

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

To use a built-in grid for content nesting, add a new one. row and a series. col-md-* columns to existing. col-md-* can be implemented in the column. The total number of columns in a nested column is 12.

Case: column nesting

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

Then, two different rows are added to the element with nine columns.

That is, the first row: the first row is divided into two parts, each of which occupies 6 columns, these 12 columns, however, its total width is the same as that of the nine columns outside it.

Second row: divide the second row into two parts. The first part occupies three columns, the second part occupies six columns, and the remaining three columns are not filled.

The explanation of chinam.com is as follows:.col-md-push-*And.col-md-pull-*You can easily change the column order.

Through code implementation, we can see the effect. I still haven't fully understood this sentence.

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.

We can see that I have defined three rows.

The first row is evenly divided into three parts, each of which occupies four columns. This line is mainly used to compare with the following two lines.

There is only one element in the second row that occupies two columns, and a style class of. col-md-push-4 is added to this element. (If the element that occupies two columns moves four columns to the right, it 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 an element is added. the Style Class of the col-md-pull-4, of course, this class should have the opposite effect as the class appended to the previous line. (The five columns of elements are moved to the left by four columns, which were originally from the eighth column, so now it starts from the fourth column .)

Now let's take a look at the results

This article uses the simplest case to analyze the layout points involved in the case. In this article, I feel that I have learned a lot and I need to read it again from the beginning. Some of them may not be well understood. I hope I can help the younger brother to correct them, and the younger brother will thank you first. After writing this article, I feel very good and have learned a lot. Of course, I hope it will be helpful to you.

The link to this Article has been updated to the http://www.cnblogs.com/aehyok/p/3404867.html in the Series