Analysis of Bootstrap grid

Alleys (Container)

1. Alleys: A container with a class name of. Container, whose alleys width is not the same value under each screen device, alleys both sides is white.
   The alleys widths under each dimension are as follows:

   Screen Devices	Alleys Width
   max-width:768px	XS Inherits parent element width (i.e. width:100%)
   min-width:768px	SM 750px
   min-width:992px	MD 970px
   min-width:1200px	LG 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;  }}. Container-fluid {  padding-right:15px;  padding-left:15px;  Margin-right:auto;  Margin-left:auto;}

1. No matter what the width of the screen, alleys the container. Container always have around 15px of padding, is to let the content does not directly adhere to the browser edge. Never nest a container in a container.

2. . Container-fluid's alleys container, like alleys less than 768px, does not set a fixed-width value, inheriting the width of its parent element.

3. The. Container container is used to provide width constraints on the response width. The change in response size actually changes the container, rows and columns (column) are based on percentages, so they don't need to be changed.

Rows (Row)

1. Line: A container with a class name of. Row; it has space for columns (COL) and is divided into 12 columns altogether.

2. The row ends with a margin value of two negative 15px, in order to counteract the padding value on both sides of the container. Row is not valid when used outside of container.

. Row {    margin-right: -15px;    Margin-left: -15px;}

Columns (column)

1. Each column has a padding value of 15px on both sides. Never use col outside of the. Row container, otherwise col is invalid.

2. The padding value for each column of Col provides a blank space for its contents so that the content does not cling to the edge of the browser and the columns do not fit together.

3. The = = column is allocated as a percentage (relative to the alleys width, so the wider the alleys, the greater the width of each column) = =.

The width of the five column. col-xs-5 {  width:41.66666667%;} The width of the four column. col-xs-4 {  width:33.33333333%;} The width of the three columns. col-xs-3 {  width:25%;} The width of the two columns. col-xs-2 {  width:16.66666667%;} The width of each column is alleys width of 8.33333333%.col-xs-1 {  width:8.33333333%;} ...//If it is a medium screen class named. col-md-1//       Small screen class named   :. col-sm-1//       big screen class   named:. Col-lg-1@media (min-width:768px) {    . col-sm-1 {        width:8.33333333%;    }    . col-sm-2 {        width:16.66666667%;    }    ...} @media (min-width:992px) {    . col-md-1 {        width:8.33333333%;    }    . col-md-2 {        width:16.66666667%;    }    ...} @media (min-width:1200px) {    . col-lg-1 {        width:8.33333333%;    }    . col-lg-2 {        width:16.66666667%;    }    ...}

Grid nesting

1. After setting the Container/row/column, you can create a new grid system in column and add the row directly in the column, no need to set container, because the padding value on both sides of the column It is possible to offset the negative margin values on both sides of row, which is equivalent to container.

Offset (offsets)

1. Offset offsets are primarily determined by the Margin-left value of the column. The offset column is margin-left:8.3333333% (1/12), and the offset two columns are margin-left:16.66666667% (i.e. 2/12);

. col-xs-offset-0 {    margin-left:0;}. col-xs-offset-1 {    margin-left:8.33333333%;} ... @median (min-width:768px) {    . col-sm-offset-0 {        margin-left:0;    }    . col-sm-offset-1 {        margin-left:8.33333333%;    }    ...} ...

Sorting of columns (Push and pull)

1. In practice, it is more of a call position and sequencing that allows you to break the fixed layout of the page from left to right in the HTML.

2. Pull and push are implemented by position's right and left values, pull is through the right value, Pull-1 value right:8.33333333% (1/12); Push-1 value = left:8.33333333% (1/12);

The distance from the left of the push distance (the number of columns to the right) takes the minimum screen as an example. col-xs-push-2 {  left:16.66666667%;}. col-xs-push-1 {  left:8.33333333%;}. col-xs-push-0 {  Left:auto;} ...//pull distance to the right (number of columns to Zola) take the minimum screen as an example. col-xs-pull-2 {  right:16.66666667%;}. col-xs-pull-1 {  right:8.33333333%;}. col-xs-pull-0 {  Right:auto;}