(1) The outermost layer must use a container
div.container或 div.container-fluid
(2) The container can place any content. If you want to use the grid system, you must use div.row
div.container > div.row
(3) No other content can be placed in a .row, only .col can be placed in the column, and any content can be placed in the column.
div.container > div.row > div.col
(4) The default equal division of rows in Bootstrap is 12 equal divisions, and each column must be specified in the proportion of the row.
12=[6-6]=[4-4-4]
(5) The grid system provides different columns for different screens
.col-lg-1/2/3...12
.col-md-1/2/3..12
.col-sm-1/2/3..12
.col-xs-1/2/3..12
(6) You can use "Column Offset" to achieve the effect of shifting the specified column and subsequent columns to the right
.col-lg-offset-1/2/3/...12
.col-md-offset-1/2/3/...12
.col-sm-offset-1/2/3/...12
.col-xs-offset-1/2/3/...12
(7) Need to pay attention to the applicability of the following different screens
.col-xs-* for xs/sm/md/lg screens
.col-sm-* for sm/md/lg screens
.col-md-* for md/lg screens
.col-lg-* for lg screens
The column width is valid for both the current screen and the larger screen, and the column offset is the same
(8) A column can specify the width ratio under different screens
div.col-xs-12/col-sm-9/col-md-6
div.col-xs-12/col-md-6
Pit: div.col-xs-6 conflict div.col-sm-6 is wrong, cannot write the same station column
(9) A column can be specified to be hidden under a specific screen
.hidden-xs hides only under xs screen
.hidden-sm hides only under sm screen
.hidden-md hides only under md screen
.hidden-lg hides only under lg screen
(10) The grid system can be nested, rules: embed rows in columns, and columns in rows
.container >
.row >
.col-*-* >
.row >
.col-*-*>