Bootstrap Grid System Learning

Bootstrap the description of the grid system in the official documentation:

The

Bootstrap includes a responsive, mobile-first, non-fixed grid system that scales appropriately to 12 columns as the device or viewport size increases. It contains pre-defined classes for simple layout options, as well as powerful hybrid classes for generating more semantic layouts.

Let's take a look at the above statement. Bootstrap 3 is mobile-first, in this sense, the Bootstrap code starts with small-screen devices such as mobile devices, tablets, and then expands to components and grids on large-screen devices such as laptops and desktops.

From the above description, you can know:

1, the grid system is to define the screen as 12 columns, dynamically sizing according to the percentage of the screen.

2, the screen definition is divided into 4 types:

/* Ultra small device (mobile, less than 768px) *//* No media query by default in Bootstrap *//* small device (tablet, 768px) */@media (Min-Width: @screen-Sm-Min) { ... }/* Medium-sized device (desktop PC, 992px) */@media (Min-Width: @screen -md-min)  {  ...  }/* large equipment (large desktop computer, 1200px) */  @media   (min -width:  @screen -lg-min) {  ...  } 
 
 3, all network layouts must be defined in      

Inside the container class and the row class.


Look at the following network system structure:

<Divclass= "Container">   <Divclass= "Row">      <Divclass= "col-*-*"></Div>      <Divclass= "col-*-*"></Div>         </Div>   <Divclass= "Row">...</Div></Div>

Attention:
The sum of the number of columns in the 1,row class must be less than or equal to 12, less than 12 o'clock, arranged from left to right. When there are less than 12 columns, the fill is empty. The first row is 3 columns and 5 columns. Empty 4 columns on the right.
The second line is full screen display.


2, when more than 12 columns, start with the next column to be exceeded, and the line breaks down.

    <Divclass= "Row">        <Divclass= "Col-md-6"style= "Background-color: #dedef8; box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;">            <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt UT labore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo c             Onsequat. </P>        </Div>        <Divclass= "Col-md-7"style= "Background-color: #dedef8; box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;">            <P>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Doloremque Laud            Antium. </P>        </Div>    </Div>    <Divclass= "Row">        <Divclass= "Col-md-6"style= "Background-color: #dedef8; box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;">            <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt UT labore et dolore magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo c             Onsequat. </P>        </Div>        <Divclass= "Col-md-6"style= "Background-color: #dedef8; box-shadow:inset 1px-1px 1px #444, inset-1px 1px 1px #444;">            <P>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium Doloremque Laud            Antium. </P>        </Div>    </Div>

3, column nesting please use the row class in the column. Then, when the nested joins satisfies 12 columns, it is the same as the network system.

4, column offset, column offset is the number of columns configured to increase the left margin margin.

Offset is a useful feature for a more professional layout. They can be used to make more room for the column. For example, the. col-xs=* class does not support offsets, but they can be implemented simply by using an empty cell.

In order to use offsets on large-screen displays, use the . col-md-offset-* class. These classes increase the left margin (margin) of a column by the column, where the * range is from 1 to one.

In the following example, we have <div class= "col-md-6"; </div> We will use the . col-md-offset-3 class to center the Div.

Bootstrap Grid System Learning