BOOTSTRAP3.0 learning the third round: Grid system case

In the previous article "Bootstrap3.0 learning the second round: the grid system principle " mainly studied the grid system's basic principle, as well as through the simple case carries on the principle practice.

Then the main content of this article will be divided into the following parts: 1. grid options; 2. from stack to horizontal; 3. mobile devices and desktops; 4.Responsive column resets;5. column offset; 6. nested columns; 7. column sorting; 8. Summary.

　　Grid options

The screenshot below lets you see how Bootstrap's grid system works on a variety of mobile devices.

As you can see from the screenshot above, Bootstrap has different style classes for different sizes of screens, including mobile phones, tablets, PCs, and so on, so developers can have more choices when they develop. As I understand it: if you use more than one style class on an element, the element will choose the style class that is most appropriate (matching the ideal) in different sizes. Simple examples: For example, on an element we use two style classes:. col-md-and. Col-lg. You can see from the screenshot above

The first case: size =1200px; then you will choose. Col-lg.

The second case: size =992px and Size "=1200px; then you choose. Col-md.

In the third case, if the size is 992px, then neither of the style classes will be used on the element.

　　Arrange from stack to horizontal

The use of four style classes in grid options is based on the. Row class, and the. Row class is usually performed in the. Container.

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

Using a single set of. col-md-* Grid class, you can create a basic grid system, which is stacked on the phone and on the tablet at first (in the range of a small screen to a small screen) and becomes horizontal on the desktop (medium) screen device. Place the column (col-*-*) in any. Row.

You can view the effects of stacking and horizontal permutations by controlling the width of the browser

Obviously this is the effect of stacking, that is, the width of the browser to a relatively small time.

Now is the horizontal arrangement. After the width of the browser is slightly wider. You can also use the other three classes to test the effect.

　　Mobile Devices and Desktops

From the case above we can see that when the small size of the screen is used, it will render the stack state, then the developer must sometimes need a small screen page display is also arranged horizontally. So our. col-xs-* (style class less than the 768px screen) comes in handy.

The div in the top two. Row style class is found by code, and we have two style classes on top of each element.

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

So:

First line: ratio of 8 and 4.

The second line: three 4 flat on average divided into three.

The third line: 6 and 6, although large size because only this one style, is also divided into two parts.

Now is the time when the page screen is smaller than a certain level, select the style class for each element. Now it's true for the top two. Row is a choice of col-xs-*.

So:

The first line: Two elements are divided into 12 and 6, and the row is 12, so the second element will wrap and then occupy 6 half of the position.

Second line: 3 6 copies. And one line is 12 copies. So the third element will wrap and then occupy 6 general positions.

　　Responsive column Resets

Through the analysis of the above two cases, it is possible to design a more complex page layout with these four grid classes. However, there are situations where a column in one row is higher than the other. Maybe now you don't know what I mean, but it's okay, we'll go straight to the case.

First take a look at the big screen page display effect

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

See now this is the arrangement, because the small screen is the choice of the col-xs-* style class, and are 6 copies. 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 per line in a small screen?

Next we'll change the code a little bit, in fact, add a line of code

This is the result of two rows of two columns. Of course, you can also use the response tool, this will be detailed in the future, here for the time being no example demo.

　　Column offset

This is actually very simple, through a style class, through. col-md-offset-* you can offset the column to the right. These classes add all columns to the left side of the column by using the * selector (margin). For example,. col-md-offset-4 shifts the width of the. Col-md-4 to the right by 4 columns.

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