Bootstrap framework

  1. bootstrapThe framework downloads it firstcssandjs, as well asjQuery.jsAnd reference. Mobile devices are preferred.
  2. Fluid container:container-fluidIt’s an elastic layout of a containerwidthforautoI just added 15px to both sidespadding.
  3. Fixed container:containerThere is a threshold value for the containerwidthWill vary with the resolution of the equipment.
    The threshold value width
    > or equal to 1200(LG large screen PC) 1170 (1140+ slot width)
    The value is greater than or equal to 992(PC in MD) but less than 1200 970 (940+ slot width)
    Greater than or equal to 768(sm plate) less than 992 750 (720+ slot width)
    Less than 768(XS mobile phones) auto

Raster source analysis

  1. Fluid containers & Fixed containers common style

    margin-right: auto;

    margin-left: auto;

    padding-left: 15px;

    padding-right: 15px;

Copy the code
  1. Fixing the container-specific style (order immutable) changes is an error, because it is ordered from small to large, and conversely causes the small to be unreadable.
@media (min-width: @screen-sm-min) {

width: @container-sm;

}

@media (min-width: @screen-md-min) {

width: @container-md;

}

@media (min-width: @screen-lg-min) {

width: @container-lg;

}
Copy the code
  1. line
margin-left: -15px;

margin-right: -15px;
Copy the code
  1. Column (recursion)
.make-grid-columns()---> .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-12, .col-sm-12, .col-md-12, .col-lg-12{ position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .make-grid(xs)---> float-grid-columns(@class); .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,... col-xs-12{ float: left; } .loop-grid-columns(@grid-columns, @class, width); .col-xs-12{ width:12/12; } .col-xs-11{ width:11/12; }... .col-xs-1{ width:1/12; } .loop-grid-columns(@grid-columns, @class, pull); .loop-grid-columns(@grid-columns, @class, push); push pull: .col-xs-push-12{ .col-xs-pull-12{ left:12/12; right:12/12; } } .col-xs-push-11{ left:11/12; }... . .col-xs-push-1{ left:1/12; } .col-xs-push-0{ .col-xs-pull-0{ left:auto; right:auto; } } .loop-grid-columns(@grid-columns, @class, offset);Copy the code

Grid system

col-lg-x

col-md-x

col-sm-x

col-xs-x

X has 12 levels by defaultCopy the code

The column offset

Margin-left: 13 levels (0 to 12)

0 to 0%

Column sorting

(Note that style Settings on thresholds cannot be skipped)

When push is adjusted left (from left to right), there are 13 levels (0 to 12)

0 for auto

“Pull” adjusts right (from right to left) on a scale of 13 (0 to 12)

0 for auto

Responsive tool

Visible – displays when a certain threshold is reached

Hidden – hidden at a certain threshold

The subtleties of the grid box model design

The container has 15px padding on both sides

Margin: -15px on both sides of the line

The columns have 15px padding on both sides

  1. To maintain the slot-width rule, the columns must have 15px padding on both sides

  2. In order for the columns to be nested, it is necessary to have a margin of -15px on both sides of the rows

  3. In order for the container to wrap around the row, the container must have 15px padding on both sides