Bootstrap tutorial: [4] Grid system detailed

Http://jingyan.baidu.com/article/6f2f55a1852aa1b5b83e6c5a.html

We all know that bootstrap3.0 uses four raster options to form a grid system, these four options on the official website, such as many people do not understand, here with you to explain the difference between the four grid options, in fact, only one is suitable for different sizes of screen equipment. We look at the class prefix this, we would like to name these four kinds of raster options, they are col-xs, COL-SM,COL-MD,COL-LG, we know English, LG is large abbreviation, MD is the abbreviation of Mid, SM is the abbreviation of small, XS is the abbreviation of * * *. This designation reflects the different screen widths that these classes adapt to. Here we introduce the characteristics of these classes respectively.

1. Col-xs class, usage is <div class= "col-xs-*" >. It asterisks represent the numbers of the 1--12. We know that there are 12 columns in the grid system, and we use numbers here to represent the width of the div that occupies a few columns. If we are developing an interface for a super small screen, then we use this class, which has no behavior, no matter how small the screen, does not change the layout of the Div.

2. Col-sm class, usage is <div class= "col-sm-*" >. The meaning of the numbers is the same, but the class is suitable for devices with a screen width of 750, which is stacked horizontally if the screen width is less than 750. This is the style on more than 750 screens: this is the style on the screen below 750:

3. COL-MD class: This class is suitable for screens above 970 pixels. By the same token, if you use a device with a screen size of less than 970 pixels to view the page, the DIV will be stacked vertically. This is a device larger than 970 pixels: This is a device that is less than 970 pixels:

4. COL-LG's behavior is the same, here does not demonstrate

5. Here's how to use these classes together. We use <div class= "col-sm-10 col-md-8" > In such a way that the div occupies a width of 8 columns on a medium-screen device, and the div occupies a width of 10 columns on a small screen.

Bootstrap tutorial: [4] Grid system detailed