1. The basis points,

  1. box-sizing: border-box

    This is the most basic point, setting the box model as a border box. The box width specified by the width property includes border + padding + content. Specifying the padding and border will not change the size of the box as long as width is fixed.

    *,
*::before,
*::after {
    box-size: border-box;
}
Copy the code

  2. Knowledge of pre –

    • Sass basis
    • Bootstrap raster layout will be used basically
    • Flex Layout Basics

  3. This article raster implementation reference bootstrap source code implementation

2. Container

Generally speaking, there are two types of containers as the top layer of applications:

  • Responsive container
    • .container
    • .container-sm
    • .container-md
    • .container-lg
    • .container-xl
  • Fixed width containers (called fluid containers in Bootstrap)
    • .container-fluid

Reactive containers constrain the width of the container with max-width based on the media query, depending on the screen width. Since bootstrap is mobile first, the container style of the small screen is first satisfied, and then the large screen style is extended according to the media query.

Basic Container Data

xs < 576px sm >= 576px md >=768px lg >=992px xl >=1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

Breakpoint:

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
);
Copy the code

Container widths for different breakpoints:

$container-max-widths: (
    sm: 540px, // min-width: 576px
    md: 720px, // min-width: 768px
    lg: 960px, // min-width: 992px
    xl: 1140px // min-width: 1200px
);
Copy the code

You can actually define where you want to go. This is just the bootstrap specification referenced here.

2.1 Fixed container implementation

The fixed container implementation is simple. Simply set the width of the container to 100% and center it horizontally.

/** * Basic container style * 100% width * has half a gutter width inside margin * horizontal center * @param $gutter width if you just want a normal container. You can set the slot width to 0 * the default is $gird-gutter-width */
@mixin make-container($gutter: $grid-gutter-width) {
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
    margin-right: auto;
    margin-left: auto;
}
Copy the code

The concept of slot width should be understandable if you have used bootstrap. If you don’t understand, you can skip to the bottom of this article for more details.

All containers are 100% wide when the screen width is less than 576px. In the case of XS:

.container..container-sm..container-md..container-lg..container-xl..container-fluid {
    @include make-container();
}
Copy the code

2.2 Reactive container implementation

To implement reactive containers, set media query for different containers according to different breakpoints, and restrict the width of the container by max-width.

According to the specification:

  • When a breakpointsmWhen,.container..container-sm 的 max-width 为 540pxThe remaining containers are original100%
  • When a breakpointmdWhen,.container..container-sm, .container-md 的 max-width 为 720pxThe remaining containers are original100%
  • When a breakpointlgWhen,.container..container-sm, .container-md, .container-lg 的 max-width 为 960pxThe remaining containers are original100%
  • When a breakpointxlWhen,.container..container-sm, .container-md, .container-lg, .container-xl 的 max-width 为 1140pxThe remaining containers are original100%

If you analyze it, you’ll see. Container -#{$breakpoint} stops at.container-#{$breakpoint}.

Using sASS is described as follows:

@each $breakpoint.$container-max-width in $container-max-widths {
    Container-sm *. Container-md *. Container-lg *. Container-xl * Controls how wide the container is */
    @include media-breakpoint-up($breakpoint.$grid-breakpoints) {
        // Maximum screen width for each breakpoint
        %responsitive-#{$breakpoint} {
            max-width: $container-max-width;
        }

        // Determine which containers need to set media query flags
        $extend-breakpoint: true;

        @each $name.$width in $grid-breakpoints {
            @if $extend-breakpoint {
                .container#{breakpoint-infix($name)} {
                    @extend %responsitive-#{$breakpoint}; }}@if $name= =$breakpoint {
            $extend-breakpoint: false; }}}}Copy the code

The two auxiliary functions breakpoint-min and breakpoint-infix:

@param $name: map key; @param $breakpoints-map: map key; Breakpoint map * @return: mind-width */ for breakpoint
@function breakpoint-min($name.$breakpoints-map: $grid-breakpoints) {
    $min: map-get($map: $breakpoints-map.$key: $name);
    @return if($min! =0.$min, null);
}

/** @param $name; /* @param $name; /* @param $name; /* @param $name; Map key * @param $breakpoints-map: breakpoints map * @return: breakpoints suffix format '-sm' */
@function breakpoint-infix($name.$breakpoints-map: $grid-breakpoints) {
    @return if(breakpoint-min($name) != null, '-#{$name}'.' ');
}
Copy the code

Auxiliary Mixin media-breakpoint-up:

$breakpoints = 'map'; $breakpoints = 'map'; $breakpoints = 'map' * * @param $name breakpoints name * @param $breakpoints-map Breakpoints map */
@mixin media-breakpoint-up($name.$breakpoints-map: $grid-breakpoints) {
    $min: breakpoint-min($name.$breakpoints-map);

    @if $min {
        @media (min-width: $min) {
            @content; }}@else {
        @content; }}Copy the code

3. Row

The grid layout is centered around rows and columns. Rows place columns, columns place application content, and columns can nest rows (children and grandchildren are infinite (x)).

A row is a fixed container, so the style is simple.

/** * line base styles * Open Flex layout * allows multiple line containers * to have half a gutter width left and right ** @param $gutter gutter width */
@mixin make-row($gutter: $grid-gutter-width) {
  display: flex;
  flex-wrap: wrap;
  margin-right: -$gutter / 2;
  margin-left: -$gutter / 2;
}
Copy the code
/ / line
.row {
    @include make-row();
}
Copy the code

4. Column

Columns are the most important part of a grid layout, but they are also the most complex.

There are multiple columns available:

  • Column width.col
    • Characteristic is.rowPut n in.col, then a.colThe width of theta is.rowOne n over n of theta
  • Ratio of the column.col-${i}
    • The value of $I ranges from 1 to 12By default, a row can be divided into 12 columns..col-{$i}So the width is going to be 1, 2, 3rowThe total width of the$i / 12.
    • The default number of columns that we’re going to divide into is theta$grid-columns: 12 ! default;
  • Elastic columns of variable width.col-auto
    • The width it occupies is determined by the width of its content

If we’re on a small screen, we don’t usually have a row with many columns, we usually have a row with only one column. So depending on the screen breakpoint, Bootstrap also provides responsive columns.

  • Column width.col-#{$breakpoint}
  • Ratio of the column.col-#{$breakpoint}-${i}
  • Elastic columns of variable width.col-#{$breakpoint}-auto

The semantics are the semantic form of the column rendered when the screen is greater than or equal to the width of the breakpoint. When less than the breakpoint width, all columns degenerate to width: 100%; In the form. Again, this is done through media queries.

4.1 Column base styles

The most basic style for all columns:

/** * Column base style * turn on relative positioning as a reference point for absolute positioning of the contents of the column * width is 100% * there is a margin around half a slot width */
%grid-column {
    position: relative;
    width: 100%;
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
}
Copy the code

This style is used to degrade the column style when the screen is smaller than the corresponding breakpoint

4.2 Setting. Col,. Col -${I},. Col -auto

$infix: breakpoint-infix($breakpoint.$breakpoints);

//. Col -*-i series sets the base style
@if $columns > 0 {
    @for $i from 1 through $columns {
        .col# {$infix# {} -$i} {
            @extend%grid-column; }}}//. Col -*, -col-*-auto sets the column base style
.col# {$infix},
.col# {$infix} -auto {
    @extend %grid-column;
}
Copy the code

$infix: ‘-sm’ The variable $colums: 12 is the default for how many columns a row can be divided into.

After executing,.col-sm,.col-sm-#{$I}(I values 1-12),.col-sm-auto are all set to %grid-column by default. The basic style of degradation is set.

The media query is then set up to determine the style of the different columns.

Because here’s the example$breakpoint: sm“, so everything that follows will be compiled@media(min-width: 576px)In:

4.3 Column Style Settings

  1. Uniform width column style Settings

    The flex: 1 1 0; Max – width: 100%. Columns can be scaled up and scaled down. The initial row free space computed is the entire main size. (If you don’t, look up Flex-basis: 0). This way, no matter how many.col-sm are placed under.row, each.col-sm will have the same width. (Provided the column can hold the content)

    .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
Copy the code

  2. .row-cols#{$infix}-#{$i}

    This is the bootstrap feature class that applies to row. Constraints on the maximum number of equal-width columns you can have under it. This class does not affect other columns, only the same width columns. (This is done through selector priority)

    // Set.row-cols-*-i series styles
@if $grid-row-columns > 0 {
    @for $i from 1 through $grid-row-columns {
        .row-cols-sm-# {$i} {
            @include row-cols($i); }}}Copy the code

    Auxiliary mixin row – cols

    Flex: 00 100% / $count ** @param $count $count */
@mixin row-cols($count) {& > * {flex: 0 0 100% / $count;
        max-width: 100% / $count; }}Copy the code

    That is,.row-cols-sm-1 > * has the same selector specificity as.col-sm. But the former is declared after the latter, resulting in style overwriting. That is. Row -cols#{$infix}-#{$I} only works on equal-width columns.

    Strictly speaking, using.row-cols-#{$breakpoint}-#{$I} will apply to the.col-#{$breakpoint} and the same width columns before the breakpoint. That is,.row-cols-mD-4 applies to.col,.col-sm, and.col-md. The reason is because the whole cycle order is xs -> XL. If not, look at the compiled CSS output to see why.

  3. Variable width elastic column style set.col-SM-auto

    // Set the.col-*-auto style
.col-sm-auto {
    @include make-col-auto();
}
Copy the code

    Auxiliary mixins make – col – auto

    /** * set. Col -*-auto style * by default is a box that does not zoom in or out, and the width is determined by the flex item width */
@mixin make-col-auto() {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
Copy the code

  4. Set the scale column style. Col-sm -#{$I}

    // Set. Col -*-i series styles
@if $columns > 0 {
    @for $i from 1 through $columns {
        .col-sm-# {$i} {
            @include make-col($i.$columns); }}}Copy the code

    Auxiliary mixins make – col

    /** *. Col -*-i style ** @param $size number of columns * @param $columns: total number of columns */
@mixin make-col($size.$columns: $grid-columns) {
    flex: 0 0 percentage($size / $columns);
    max-width: percentage($size / $columns);
}
Copy the code

    If $I: 5, then.col-sm-5 occupies 5/12 of the entire line width.

  5. Use the ORDER attribute in the Flex layout to visually sort Flex items. So Bootstrap also provides classes for column sorting

    // Column sort is related
.order-sm-first {
    order: -1;
}

.order-sm-last {
    order: $columns + 1;
}

// A row with a maximum of 12 columns can be numbered from -1 to arrange the columns of the entire row
@for $i from 0 through $columns {
    .order-sm-# {$i} {
        order: $i; }}Copy the code

    To get a sense of what this is all about, just understand that the browser visual sort is sorted by the order value from smallest to largest.

  6. The column offset

    In actual requirements, there will always be a requirement for column offset, which is realized by margin-left.

    // Set column offset
@if $columns > 0 {
    @for $i from 0 through ($columns - 1) {
        @if not ($infix= =' ' and $i= =0) {
            .offset# {$infix# {} -$i} {
                @include make-col-offset($i.$columns); }}}}Copy the code

    Auxiliary mixins make – col – offset:

    @mixin make-col-offset($size.$columns: $grid-columns) {
    $num: $size / $columns;
    margin-left: if($num= =0.0, percentage($num));
}
Copy the code

This is the whole process of creating a reactive column, except for the sm breakpoint, as well as the other breakpoints. I don’t want to go into detail here, but it’s actually done through loops. If you don’t need a response, if you just need a constant width column, a variable width elastic column, a proportional column it’s much easier, and I’m sure if you can understand the above you can easily write it yourself with the ingenuity of the reader.

Slot 5.

Gutter, “gutter,” is the space between two columns. The number of slots is the number of columns minus 1.

Slot formula: suppose grid row width is W, column width is C (column width here refers to the content area), slot width is G, column number is N then W = N * C + (n-1) * gCopy the code

Bootstarp’s design looks like this:

  1. container

    There’s 1/2 gutter padding on each side of the container

  2. row

    Row sets the left and right margins of the -1/2 gutter to smooth out the padding effect of the container

  3. column

    Colum has a 1/2 gutter left and right margin so that the content has a 1/2 gutter distance from the container boundary. Make the content not fit the edges.

    Columns are also allowed to nest rows, because the negative margin of the row removes the left and right padding of the column, allowing infinite nesting.

    The size of this gutter will vary depending on your design. The default gutter width of bootstrap is 30px. You can adjust it for your design purposes.

6. Complete source code

The full source code moves to the Git repository (not bootstrap, but a personal rewritten annotated grid-only version. Not much)

bootstrap-grid