Bootstrap basic learning note (3) grid introduction, bootstrap note

Bootstrap basic learning note (3) grid introduction, bootstrap note

Grid System:The implementation principle of the grid system is very simple. It only defines the container size and splits 12 parts equally (24 or 32 parts equally, but 12 parts are the most common ), then adjust the internal and external margins, and finally combine the media query to create a powerful responsive grid system. In the Bootstrap framework, the grid system splits containers into 12 parts.

<! Doctype html> Page effect:

Adaptive DIV blocks after screen narrowing:

 

Working principle:The mesh system of the Bootstrap framework works as follows:

1. The data row (. row) must be included in the container (. container) so as to assign it an appropriate alignment and padding (padding ). For example:

<Div class = "container">

<Div class = "row"> </div>

</Div>

 

2. You can add a column (. column) in a row (. row), but the sum of the columns cannot exceed the total number of columns that are evenly divided, such as 12. For example:

<Div class = "container">

<Div class = "row">

<Div class = "col-md-4"> </div>

<Div class = "col-md-8"> </div>

</Div>

</Div>

 

3. The specific content should be placed within the column container (column), and only the column can be used as a direct sub-element of the row container (. row ).

 

4. You can set the padding between columns and columns by setting the padding. Then, we set a negative margin (margin) for the first and last columns to offset the influence of the inner margin (padding ).

 

To better understand the working principle of the Bootstrap Framework's grid system, let's look at a sketch:

Briefly explain the figure:

1. the outermost border, with a large white area, is equivalent to the visible area of the browser. The mesh system of the Bootstrap framework has a responsive effect. It has four types of browsers (ultra-small screen, small screen, medium screen, and large screen), and its breakpoint (pixel demarcation point) is 768px, 992px, and 1220px.

2. The second border (1) is equivalent to the container (. container ). Different browser resolutions have different widths: automatic, 750px, 970px, and 1170px. In the 736th rows of bootstrap.css ~ Set row 756th:

. Container {padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} @ media (min-width: 768px ){. container {width: 750px ;}@ media (min-width: 992px ){. container {width: 970px; }}@ media (min-width: pixel px ){. container {width: 1170px ;}}View Code

The horizontal bars 3 and 2 indicate that the rows (. row) of the container are evenly divided into 12 equal portions, that is, columns. Each column has a "padding-left: 15px" (pink in the figure) and a "padding-right: 15px" (purple in the figure ). This also leads to the padding-left of the first column and the padding-right of the last column occupying 30 PX of the total width, which leads to the page not beautiful, of course, if you need to leave a certain margin, this is a good practice. For example, the 767th rows in bootstrap.css ~ As shown in row 772nd:

. Col-xs-1 ,. col-sm-1 ,. col-md-1 ,. col-lg-1 ,. col-xs-2 ,. col-sm-2 ,. col-md-2 ,. col-lg-2 ,. col-xs-3 ,. col-sm-3 ,. col-md-3 ,. col-lg-3 ,. col-xs-4 ,. col-sm-4 ,. col-md-4 ,. col-lg-4 ,. col-xs-5 ,. col-sm-5 ,. col-md-5 ,. col-lg-5 ,. col-xs-6 ,. col-sm-6 ,. col-md-6 ,. col-lg-6 ,. col-xs-7 ,. col-sm-7 ,. col-md-7 ,. col-lg-7 ,. col-xs-8 ,. col-sm-8 ,. col-md-8 ,. col-lg-8 ,. col-xs-9 ,. col-sm-9 ,. col-md-9 ,. col-lg-9 ,. col-xs-10 ,. col-sm-10 ,. col-md-10 ,. col-lg-10 ,. col-xs-11 ,. col-sm-11 ,. col-md-11 ,. col-lg-11 ,. col-xs-12 ,. col-sm-12 ,. col-md-12 ,. the col-lg-12 {position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px ;}. Col

4. the horizontal bar 3 is the row container (. row), which defines the "margin-left" and "margin-right" values as "-15px ", used to offset the left inner distance of the first column and the right inner distance of the last column. In the 763rd rows of bootstrap.css ~ You can see in row 767th:

. Row {

Margin-right:-15px;

Margin-left:-15px ;}

5. You can combine rows and columns to see the effect of Row 4. That is, the expected effect is that there is no spacing between the first column and the last column and the container (. container. Horizontal Bar 5 is just to show you that you can combine any columns and columns as needed, but the sum of their combinations should not exceed the total number of columns.

 

Specific use:

<! Doctype html> Page effect: