The grid system in the bootstrap framework divides the container into 12 pieces. When using it, you can recompile the LESS/SASS source code according to the actual situation to modify the value 12. How does the mesh system work in bootstrap framework:
1. Data rows (.rows) must be included in the container so that they can give appropriate alignment and padding
<div><div></div></div>
2. You can add columns (.column) in rows (.row), but the sum of the columns cannot exceed the total number of columns that are bisected (such as: 12)
<div><div><div></div><div></div></div>
3. The specific content should be placed in the column container (.column), and only the column (.column) can be used as a direct child element of the row container (.row).
4. Create the spacing between columns by setting the inner distance (padding), and then offset the influence of padding by setting negative values for the first column and the last stack.
There is a responsive effect in the bootstrap grid system, which has four types of browsers, (ultra-small screen, small screen, medium screen and large screen), and its breakpoint is 768px, 992px, 1220px
Container (.container), for different browser resolutions, has different widths: automatic, 760px, 970px, 1170px;
.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: 1200px) {.container {width: 1170px;}Row container (.row), divides the rows of the container into 12 equal parts, that is, columns. Each column has padding-left:15px and padding-right:15px; this also causes padding-left in the first column and padding-right in the last column to occupy 30px of the medium width.
.col-xs-1, .col-md-1, .col-lg-1, .col-xs-2, .col-md-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-md-3, .col-md-3, .col-lg-3, .col-xs-4, .col-md-4, .col-md-4, .col-lg-4, .col-xs-5, .col-md-5, .col-md-5, .col-lg-5, .col-xs-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-6, .col-xs-7, .col-md-7, .col-lg-7, .col-xs-8, .col-md-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-md-9, .col-lg-9, .col-xs-10, .col-md-10, .col-md-10, .col-md-10, .col-lg-10, .col-xs-11, .col-md-11, .col-md-11, .col-md-11, .col-lg-11, .col-xs-12, .col-md-12, .col-md-12, .col-lg-12 {position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;}The row container (.row) defines margin-left and margin-right values of -15px, which are used to offset the left inner distance of the first column and the right inner distance of the last column, so that there is no spacing between the first column and the last column and the container (.container).
.row {margin-right: -15px;margin-left: -15px;}Basic usage
Since the bootstrap framework uses different grid styles for different screen sizes, let’s take the mid-screen (970px) as an example.
1. Column combination
Column combination is to change the number to merge columns (the total number of columns cannot exceed 12), which is somewhat similar to the colspan attribute of a table; the column combination method involves only two characteristics: floating in width percentage
<div><div><div>col-md-4</div><div>col-md-8</div></div><div><div>col-md-4</div><div>col-md-4</div><div>col-md-4</div><div>col-md-4</div></div><div><div>col-md-4</div></div><div><div>col-md-3</div><div>col-md-6</div><div>col-md-3</div></div>
The effects are as follows:
Make sure all columns float left
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float: left;}Define the width of each column combination
.col-md-12 {width: 100%;}.col-md-11 {width: 91.666666667%;}.col-md-10 {width: 83.3333333333%;}.col-md-9 {width: 75%;}.col-md-8 {width: 66.66666667%;}.col-md-7 {width: 58.333333333%;}.col-md-6 {width: 50%;}.col-md-5 {width: 41.666666667%;}.col-md-4 {width: 33.333333333%;}.col-md-3 {width: 25%;}.col-md-2 {width: 16.666666667%;}.col-md-1 {width: 8.333333333%;}Column offset
Sometimes, we don’t want two adjacent columns to be close together, but we don’t want to use margin or other technical means. This can be achieved using column offset. Using column offset, just add the class name.col-md-offset-* on the column element (the asterisk represents the number of column combinations to be offset). The column with this class name will be offset, such as: add .col-md-offset-4 on the column element, indicating that the column is offset to the right by 4 columns in width.
<div><div><div>1111</div><div>1111</div><div>333</div></div><div><div>Column offset</div><div>col-md-2</div><div>col-md-2</div></div></div></div>
The effects are as follows:
Implementation principle:
Using one-twelve margin-left, as many margin-left as there are offsets, you can get as many margin-left as there are.
.col-md-offset-12 {margin-left: 100%;}.col-md-offset-11 {margin-left: 91.66666667%;}.col-md-offset-10 {margin-left: 83.333333333%;}.col-md-offset-9 {margin-left: 75%;}.col-md-offset-8 {margin-left: 66.66666667%;}.col-md-offset-7 {margin-left: 58.33333333%;}.col-md-offset-6 {margin-left: 50%;}.col-md-offset-5 {margin-left: 41.666666667%;}.col-md-offset-4 {margin-left: 33.333333333%;}.col-md-offset-3 {margin-left: 25%;}.col-md-offset-2 {margin-left: 16.66666667%;}.col-md-offset-1 {margin-left: 8.33333333%;}.col-md-offset-0 {margin-left: 0;}It should be noted that when using col-md-offset-* to right offset the column, it is necessary to ensure that the total number of columns and offset columns does not exceed 12, otherwise it will cause the column to be displayed off-row.
Column sorting
Column sorting is to change the direction of the column and set the floating distance. In the bootstrap grid system, it is by adding class names. col-md-push-* and col-md-pull-*
<div><div><div>col-md-4</div><div>col-md-8</div></div></div>
The effects are as follows:
col-md-4 is on the left and col-md-8 is on the right. If you want to swap positions, you need to move col-md-4 to the right by 8 columns, that is, add the class name.col-md-push-8; at the same time, you need to move col-md-8 to the left by 4 columns, that is, add the class name.col-md-pull-4.
bootstrap achieves positioning effects only by setting left and right.
.col-md-pull-12 {right: 100%;}.col-md-pull-11 {right: 91.66666667%;}.col-md-pull-10 {right: 83.333333333%;}.col-md-pull-9 {right: 75%;}.col-md-pull-8 {right: 66.66666667%;}.col-md-pull-7 {right: 58.33333333%;}.col-md-pull-6 {right: 50%;}.col-md-pull-5 {right: 41.666666667%;}.col-md-pull-4 {right: 33.333333333%;}.col-md-pull-3 {right: 25%;}.col-md-pull-2 {right: 16.666666667%;}.col-md-pull-1 {right: 8.333333333%;}.col-md-pull-0 {right: 0;}.col-md-push-12 {left: 100%;}.col-md-push-11 {left: 91.666666667%;}.col-md-push-10 {left: 83.3333333333%;}.col-md-push-9 {left: 75%;}.col-md-push-8 {left: 66.66666667%;}.col-md-push-7 {left: 58.333333333%;}.col-md-push-6 {left: 50%;}.col-md-push-5 {left: 41.666666667%;}.col-md-push-4 {left: 33.33333333%;}.col-md-push-3 {left: 25%;}.col-md-push-2 {left: 16.666666667%;}.col-md-push-1 {left: 8.333333333%;}.col-md-push-0 {left: 0;}Nesting
Column nesting can add one or make a row container in a column, and then insert a column in this row container. When the width of the row container (row) in the column container is 100%, it is the width of the current external column.
<div><div><div>
I've nested a grid inside
<div><div>col-md-6</div><div>col-md-6</div></div></div><div>col-md-4</div></div><div><div>col-md-4</div></div><div>col-md-4</div><div>
I've nested a grid inside
<div><div>col-md-4</div><div>col-md-4</div><div>col-md-4</div></div></div></div></div>
The above content is the Bootstrap grid system introduced to you by the editor. I hope it will be helpful to everyone!