Comprehensive analysis of bootstrap lattice layout _javascript skills

First, source files

_grid.scss: Lattice System class file
mixins/_grid.scss: a mixin set to support grid system implementation
mixins/_grid-framework.scss: core mixin of grid system realization

Second, the function of support

1. Implementation by Percent layout

2. Realize the position of the lattice

3. Realize the nesting of lattice

4. If you only use a grid system, you can encode only bootstrap-grid.scss files

Iii. Principle of realization

1, according to the percentage layout , the main question of how to divide the average width on different devices, bootstrap just used a simple percentage, in any size device is using the same percentage.

2, the location of the lattice: to solve the lattice to the left, move to the right, with a lattice to the right offset several cells of the ability

3, Lattice nesting: The realization of the grid content and then nested lattice layout system.

Iv. Source Code Analysis

1, _grid.scss: lattice system generated by the main class, referencing the Mixins/_grid.scss, MIXINS/_GRID-FRAMEWORK.SCSS, VARIABLES.SCSS class variables and related methods.
First: Define two container classes

A) Container: lattice container, according to different equipment defined different width, not full full screen;

b continaer-fluid: Lattice container, full screen with any support
Container and Container-fluid all use Make-container (MIXINS/_GRID.SCSS), Make-container only achieve center, left and right inside margin, clear floating control Where container defines the width of the container according to different devices

Then: Define row (Row):
Called Make-row (MIXINS/_GRIDS.SCSS) to clear the definition of floating, left and right margin, in 4.0, if the support of flex layout, set the display of the container as flex and flex-wrap for wrap, and remove the float.

Furthermore: Directly call Make-grid-columns (MIXINS/_GRID-FRAMEWORK.SCSS) to realize the establishment of the cell

A) Make-grid-columns: The entry method that the cell generates, passing the total number of squares that can be supported, the width of the outer margin, and several dimensions supported

b) Make-grid-columns cites many of the methods in Mixins/_grid.scss:

A the Map-key function of map is used to traverse the key set of a map;

The @extend function is used to inherit, to implement all Col left floats, and all col to be positioned relative to each other.

@for $i from 1 through $columns {
   . col-#{$breakpoint}-#{$i} {
    @extend%grid-column;//extend is inherited, merging this into a collection of styles
    //.col-xs-1,col-xs-2{positiona:relative ...}}
  

A) Make-col-span function to realize the calculation of Col width

B Call the Make-col-modifier method in Mixins/_grid.scss to generate the style of push, pull, and offset:

I push: a few squares to the right, with left

ii. Pull: push a few squares to the left, with right

iii. Offset: using the Margin-left implementation, push to a percentage to the right.

@mixin Make-col-offset ($size, $columns: $grid-columns) {
 margin-left:percentage ($size/$columns);
}

@mixin Make-col-push ($size, $columns: $grid-columns) {
 left:if ($size > 0, percentage ($size/$columns), auto); 
   }

@mixin make-col-pull ($size, $columns: $grid-columns) {
 right:if ($size > 0, percentage ($size/$columns), Auto);
}

@mixin Make-col-modifier ($type, $size, $columns) {
 //Work around the lack of dynamic mixin @include support 
 @if $type = = Push {
  @include make-col-push ($size, $columns);
 } @else if $type = = Pull {
  @include make-col-pull ($size, $columns);
 } @else if $type = = offset {
  @include make-col-offset ($size, $columns);
 }

The above is the entire content of this article, I hope to learn JavaScript program to help you.