Bootstrap grid system detailed _javascript skills

Bootstrap frame grid system is the container flat divided into 12, in the use of the actual situation can recompile Less/sass source code to modify the value of 12. Bootstrap Framework grid system working principle:

1. The data row (. Row) must be contained in the container (. Container) so that it is given the appropriate alignment and spacing (padding)

<div class= "Container" >
<div class= "Row" ></div>

2. Columns can be added (. column) in rows (. row), but the sum of the columns cannot exceed the total number of columns (e.g. 12) that are equally divided.

<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 columns (. column) can be the direct child element of a row container (. Row)

4. To create the spacing between columns and columns by setting the inner margin (padding), and then offset the effect of the inner margin (padding) by setting a negative outer margin (margin) for the first column and the last stack

In the bootstrap grid system with a responsive effect, with four types of browsers, (super small screen, small screen, medium screen and large screen), the breakpoint is 768px,992px,1220px

Container (. Container), for different browser resolution, its width is not the same: 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), which halves the container's row by 12 equal portions, which is the column. Each column has a padding-left:15px and padding-right:15px, which also results in the padding-left of the first column and the Paading-right of the last column occupying a medium-width 30px

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-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-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-sm-9, Col-md-9,. col-lg-9, Col-sm-10, col-md-10,. col-lg-10,. col-xs-11,. col-sm-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;

The row container (. Row) defines the Margin-left and margin-right values as -15px to offset the left and right margins of the first 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

Because the bootstrap frame uses different grid styles in different screen sizes, take the middle screen (970px) for example.

1, column combination

A combination of columns is the change of numbers to merge columns (the total number of columns cannot exceed 12), somewhat similar to the colspan property of a table; column combinations involve only two attributes: floating in width percent

<div class= "Container" >
<div class= "Row" >
<div class= "col-md-4" >col-md-4</div>
<div class= "col-md-8" >col-md-8</div>
</div>
<div class= "Row" >
<div class= "col-md-4" >col-md-4</div>
<div class= "col-md-4" >col-md-4</div>
<div class= "Col-md-4" >col-md-4</div>
</div>
<div class= "Row" >
<div class= "Col-md-3" >col-md-3</div>
<div class= "col-md-6" >col-md-6</div>
<div class= "col-md-3" > Col-md-3</div>
</div>

The effect is as follows:

Make sure all columns are left floating

Col-md-1, Col-md-2,. col-md-3, Col-md-5, col-md-6,. col-md-7,. Col-md-8,. col-md-9,. 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.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 don't want the next two columns to be close together, but we don't want to use margin or other technical means, which can be achieved by column offset (offset). Using column offsets simply add the class name to the column element. col-md-offset-* (The asterisk represents the number of column combinations to offset), and the column with that class name is offset, such as: adding. col-md-offset-4 on a column element, indicating that the column is offset to the right by the width of 4 columns

<div class= "Container" >
<div class= "Row" >
<div class= "col-md-4" >1111</div>
<div class= "col-md-4 col-md-offset-2" >111</div>
<div class= "col-md-2" >333</div>
</div>
<div class= "Row" >
<div class= "col-md-4 col-md-offset-4" > column offset </div>
< Div class= "col-md-2" >col-md-2</div>
<div class= "col-md-2" >col-md-2</div>
</div >

The effect is as follows:

Implementation principle:

Using One-twelveth of the margin-left, how many offset, how many margin-left

. 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 make a right offset to a column, you want to ensure that the total number of columns and offset columns is not more than 12, or it will cause column breaks to appear

Column sorting

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

<div class= "Container" >
<div class= "Row" >
<div class= "col-md-4" >col-md-4</div>
<div class= "col-md-8" >col-md-8</div>
</div>

The effect is as follows:

Col-md-4 left, col-md-8 right, if you want to swap position, you need to move the col-md-4 to the right 8 column distance, that is, add the class name. col-md-push-8; You also need to move the Col-md-8 4 columns to the left. Which is to add the class name. col-md-pull-4

Bootstrap the positioning effect 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.33333333%;} . col-md-pull-9 {right:75%}. col-md-pull-8 {right:66.66666667%}. col-md-pull-7 {right:58.33333333%;}. Col-md-pul l-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.
66,666,667%; 
}. col-md-push-1 {left:8.33333333%}. col-md-push-0 {left:0;} 

Column nesting

Column nesting you can add one or row (row) containers to a column, and then insert a column in the row container, in the column container (row), when the width is 100%, the width of the current outer column

<div class= "Container" >
<div class= "Row" >
<div class= "Col-md-8" >

I nested a grid inside.

<div class= "Row" >
<div class= "col-md-6" >col-md-6</div>
<div class= "Col-md-6" > col-md-6</div>
</div>
</div>
<div class= "col-md-4" >col-md-4</div>
</div>
<div class= "Row" >
<div class= "col-md-4" >col-md-4</div>
< Div class= "Col-md-8" >

I nested a grid inside.

<div class= "Row" >
<div class= "col-md-4" >col-md-4</div>
<div class= "Col-md-4" > col-md-4</div>
<div class= "col-md-4" >col-md-4</div>
</div>
</div>
</div>
</div>

The above content is small series to introduce the bootstrap grid system, I hope to help you!