Bootstrap grid system details _ javascript skills

In the bootstrap framework, the grid system splits the containers into 12 parts. during use, you can recompile the LESSSASS source code to modify the value 12 based on the actual situation. Next, we will introduce the Bootstrap grid system through this article. If you are interested, learning the grid system in the bootstrap framework will divide the containers into 12 parts, you can re-compile the LESS/SASS source code to modify the value 12 based on the actual situation. How the mesh system of the bootstrap framework works:

1. Data rows (. row) must be included in the container (. container) so that it can assign proper alignment and padding (padding)

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

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

4. Create the spacing between the column and the column by setting the inner distance (padding), and set the negative margin (margin) for the first and last stacks) to offset the influence of the inner distance (padding ).

The bootstrap mesh system has a responsive effect. It has four types of browsers (ultra-small screen, small screen, medium screen, and large screen). The breakpoint is 768px, 992px, and 1220px.

The container (. container) has different widths for different browser resolutions: automatic, 760px, 970px, and 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;} 

The row container (. row) splits the rows of the container into 12 equal portions, that is, columns. Each column has a padding-left: 15px and padding-right: 15px. This also causes the padding-left of the first column and the paading-right of the last column to occupy 30px of the middle width.

.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, .col-lg-12 {position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;} 

Row container (. row) defines the margin-left and margin-right values as-15px to offset the left inner margin of the first column and the right inner margin of the last column, in this way, the first and last columns and the container (. there is no spacing between containers.

.row {margin-right: -15px;margin-left: -15px;}

Basic usage

Since the bootstrap framework uses different grid styles in different screen sizes, the following uses the 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 the table. The column combination method only involves two features: floating on the width percentage

col-md-4
col-md-8
col-md-4
col-md-4
col-md-4
col-md-3
col-md-6
col-md-3
 

The effect is as follows:

Make sure all columns are left floating

.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;}

Defines the width of each column combination

.col-md-12 {width: 100%;}.col-md-11 {width: 91.66666667%;}.col-md-10 {width: 83.33333333%;}.col-md-9 {width: 75%;}.col-md-8 {width: 66.66666667%;}.col-md-7 {width: 58.33333333%;}.col-md-6 {width: 50%;}.col-md-5 {width: 41.66666667%;}.col-md-4 {width: 33.33333333%;}.col-md-3 {width: 25%;}.col-md-2 {width: 16.66666667%;}.col-md-1 {width: 8.33333333%;}

Column offset

Sometimes, we do not want two adjacent columns to be together, but we do not want to use margin or other technical means. This can be achieved through column offset. To use column offset, you only need to add a class name to the column element. col-md-offset-* (asterisks represent the number of column combinations to be offset). Columns with this class name will be offset, for example, adding column elements. col-md-offset-4, indicating the width of four columns offset from the right of the column

1111
111
333
Column offset
Col-md-2
Col-md-2
 

The effect is as follows:

Implementation principle:

Using the margin-left value of 1/12, the number of offset values is equal to the number of margin-left values.

.col-md-offset-12 {margin-left: 100%;}.col-md-offset-11 {margin-left: 91.66666667%;}.col-md-offset-10 {margin-left: 83.33333333%;}.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.66666667%;}.col-md-offset-4 {margin-left: 33.33333333%;}.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;}

Note that when you use col-md-offset-* to offset the right of a column, make sure that the total number of columns and offset columns does not exceed 12. Otherwise, the column is displayed disconnected.

Column sorting

Column sorting is to change the column direction and set the floating distance. In the bootstrap grid system, the class name is added. Col-md-push-* and col-md-pull -*

col-md-4
col-md-8
 

The effect is as follows:

Col-md-4 to the left, col-md-8 to the right, if you want to swap location, You Need To col-md-4 to the right to move the distance of 8 columns, that is, add class name. col-md-push-8; you also need to move the col-md-8 to the left the distance of the four columns, that is, add class name. col-md-pull-4

Bootstrap only sets left and right to achieve the positioning effect.

.col-md-pull-12 {right: 100%;}.col-md-pull-11 {right: 91.66666667%;}.col-md-pull-10 {right: 83.33333333%;}.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.66666667%;}.col-md-pull-4 {right: 33.33333333%;}.col-md-pull-3 {right: 25%;}.col-md-pull-2 {right: 16.66666667%;}.col-md-pull-1 {right: 8.33333333%;}.col-md-pull-0 {right: 0;}.col-md-push-12 {left: 100%;}.col-md-push-11 {left: 91.66666667%;}.col-md-push-10 {left: 83.33333333%;}.col-md-push-9 {left: 75%;}.col-md-push-8 {left: 66.66666667%;}.col-md-push-7 {left: 58.33333333%;}.col-md-push-6 {left: 50%;}.col-md-push-5 {left: 41.66666667%;}.col-md-push-4 {left: 33.33333333%;}.col-md-push-3 {left: 25%;}.col-md-push-2 {left: 16.66666667%;}.col-md-push-1 {left: 8.33333333%;}.col-md-push-0 {left: 0;} 

Column nesting

You can add one or more row containers in a column, insert columns in the row containers, and insert rows in the column containers ), when the width is 100%, It is the width of the current external column.

I nested a grid in it.

col-md-6
col-md-6
col-md-4
col-md-4

I nested a grid in it.

col-md-4
col-md-4
col-md-4

The above content is the Bootstrap grid system introduced by xiaobian. I hope it will help you!