Layout containers and raster grid system

1. The .container class is used for containers that are fixed-width and support responsive layout.

? 2. The .container-fluid class is used for containers that are 100% wide and occupy the entire viewport.

? Bootstrap provides a responsive, mobile-first fluid grid system that is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases. The grid system is used to create page layouts by combining a series of rows and columns, and your content fits into these created layouts.

? The implementation of the grid system is very simple, just by defining the size of the container, divided into 12 equal parts (also divided into 24 or 32 equal parts, but 12 is the most common), and then adjust the inner and outer margins, and finally combined with the media query, you can create a powerful responsive grid system. the grid system in the Bootstrap framework is to divide the container into 12 equal parts.

? Note: The grid system must use css

? container, row, xs (xsmall phones), sm (small tablets), md (middle desktops), lg (larger desktops) i.e.: ultra small (auto), small (750px), medium (970px) and large (1170px)

? p> ? Data rows (.row) must be contained in containers (.container) in order to give them proper alignment and internal spacing (padding).

? Columns can be added to rows, and only columns can be direct children of row containers, but the sum of the columns cannot exceed the total number of columns in a tie, such as 12. If it is greater than 12, it automatically switches to the next row.

? The specifics should be placed in the column container

#### #### Column combinations

? Column combination is simply understood to change the number to merge columns (the principle: the total number of columns can not be more than 12, greater than 12, will automatically change to the next line.), somewhat similar to the table colums. This is somewhat similar to the colspan attribute of a table.

? If we do not want two neighboring columns close together, but do not want to use margin or other technical means to. This can be accomplished by using the column offset function. The use of column offset is also very simple, just add the class name "col-md-offset-*" on the column element (where the asterisk represents the number of column combinations to be offset), then the column with this class name will be offset to the right. For example, if you add "col-md-offset-8" to a column element, it means that the column will be shifted 8 columns to the right (make sure that the total number of columns and offset columns is not more than 12, otherwise the columns will be broken | line feed).

? Column sorting is actually changing the direction of the columns, that is, changing the left and right floats, and setting the distance of the floats. In the Bootstrap Framework grid system this is done by adding the class names col-md-push-* and col-md-pull-* (where the asterisk represents the number of combinations of columns moved). Pull forward and push backward.

? The Bootstrap Framework's grid system also supports column nesting. You can add one or more row containers to a column, and then insert columns into that row container.