1. Source code file
_grid.scss: grid system class file
Mixins/_grid.scss: Support mixin collections implemented by grid systems
Mixins/_grid-framework.scss: The core mixin implemented by grid system
2. Supported functions
1. Realize the layout by percentage
2. Realize the positioning of the grid
3. Implement nesting of grids
4. If you only use the grid system, you can only encode the bootstrap-grid.scss file
Implementation principle
1. Layout by percentage , the main problem is how to evenly distribute the width on different devices. Bootstrap just uses a simple percentage, and the same percentage is used under any size device.
2. Positioning of grids: solves the ability of grids to move left, right, and shift several cells to the right with grids
3. Nesting of grids: Implement the grid layout system after nesting grid content.
4. Source code analysis
1. _grid.scss: The main class generated by the grid system, referring to variables and related methods in the mixins/_grid.scss, mixins/_grid-framework.scss, variables.scss.
First: define two container classes
a) container: a grid container, which defines different widths according to different devices and will not fill the full screen;
b) continaer-fluid: lattice container, full screen with any support
Both container and container-fluid use make-container (mixins/_grid.scss). make-container only implements controls such as centering, left and right margins, clearing floats, etc.; the container defines the width of the container according to different devices.
Then: define row (row):
Make-row (mixins/_grids.scss) is called to achieve the definition of clearing floating and left and right margins. In 4.0, if the support for flex layout is enabled, the display of the container is set to flex and flex-wrap as wrap, and clear floating.
Next: directly call make-grid-columns (mixins/_grid-framework.scss) to achieve cell establishment
a) make-grid-columns: the entry method for cell generation, passing the total number of grids, margin width, and several supported sizes
b) make-grid-columns references many methods in mixins/_grid.scss:
a) Use map-key function to traverse a map key collection;
The @extend function is used, used for inheritance, implementing left floating of all cols, and relative positioning of all cols.
@for $i from 1 through $columns { .col-#{$breakpoint}-#{$i} { @extend %grid-column; //extend is inheritance, merge this into a style collection //.col-xs-1,col-xs-2{ positiona:relative; .... } } }a) Make-col-span function to implement the calculation of col width
b) Call the make-col-modifier method in mixins/_grid.scss to realize the generation of push, pull, and offset styles:
i. Push: Push a few grids to the right, using left
ii. Pull: Push a few grids to the left, using right
iii. Offset: It uses margin-left implementation, pushing it to the right to a percentage.
@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-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 all about this article, I hope it will be helpful for everyone to learn JavaScript programming.