Bootstrap raster analysis

Container

1. Center: A container with the class name .container. The width of the center has different values ​​on each screen device. The width of the center is different on both sides of the center. Just leave it blank.
   The width of the center of each size is as follows:

   Screen equipment	The width of the center of the page
   max-width:768px	xs inherits the width of the parent element (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 is, the container.container will always have a padding of 15px on the left and right to prevent the content from sticking directly to the edge of the browser. Never nest another container in a container.

2. .container-fluid's layout container is the same as the layout container smaller than 768px screen. It does not set a fixed width value and inherits it. The width of the parent element.

3. .container container is used to provide width constraints on responsive width. In response to changes in size, the container is actually changed. Rows and columns are based on percentages, so they do not need to make any changes.

Row (row)

1. Row: A container with class name .row; it is column (col) There is a total of space and it is divided into 12 columns.

2. There will be two negative 15px margin values ​​at both ends of the row, in order to offset the padding values ​​on both sides of the container. .row is invalid when used outside the container.

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

Column

1. Each column has 15px padding on both sides value. Never use col outside a .row container, otherwise col will be invalid.

2. The padding value of each column col provides a blank space for its content so that the content will not stick to the edge of the browser and the columns will not stick together.

3. ==Columns are allocated according to percentages (relative to the percentage of the center width, so the wider the center, the greater the width of each column)==.

//五列的宽度
.col-xs-5 {
  width: 41.66666667%;
}// 四列的宽度
.col-xs-4 {
  width: 33.33333333%;
}// 三列的宽度
.col-xs-3 {
  width: 25%;
}// 占两列的宽度
.col-xs-2 {
  width: 16.66666667%;
}// 每列的宽度是版心宽度的8.33333333%
.col-xs-1 {
  width: 8.33333333%;
}...
// 如果是中等屏幕 类名为.col-md-1
//       小屏幕   类名为：.col-sm-1
//       大屏幕   类名为：.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%;
    }
    ...
}

栅格嵌套

1. After setting container/row/column, you can create a new grid in the column In the grid system, just add rows directly to the column. There is no need to add a container, because the padding values ​​on both sides of the column can offset the negative margin values ​​on both sides of the row, and the column is equivalent to a container.

Offsets

1. Offset offset is mainly the margin of the column -left value determines. If it is offset by one column, it is margin-left:8.3333333% (1/12). If it is offset by two columns, it is margin-left:16.66666667% (that is, 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%;
    }
    ...
}
...

Column sorting (Push and Pull)

1. In practical applications, it is more about calling position and sorting, allowing you to break the html p Fixed layout from top to bottom and left to right.

2. pull and push are implemented through the right and left values ​​​​of position. Pull is implemented through the right value. The pull-1 value right:8.33333333% (1/12); push-1 value => left:8.33333333%(1/12);

// push 距离左边的距离（向右推的列数）以最小屏为例
.col-xs-push-2 {
  left: 16.66666667%;
}.col-xs-push-1 {
  left: 8.33333333%;
}.col-xs-push-0 {
  left: auto;
}...

// pull 距离右边的距离（向左拉的列数）以最小屏为例
.col-xs-pull-2 {
  right: 16.66666667%;
}.col-xs-pull-1 {
  right: 8.33333333%;
}.col-xs-pull-0 {
  right: auto;
}

The above is the detailed content of Bootstrap raster analysis. For more information, please follow other related articles on the PHP Chinese website!