current position:Home>Learn about bootstrap

Learn about bootstrap

2022-04-29 08:09:50Chen Chen is trying

Bootstrap

Containers

Fluid containers

class="container-fluid"
width: auto

Secure the container

class="container"

Fixed container characteristics

// threshold 
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;
@grid-gutter-width:         30px;
Responsive threshold width
Greater than 1200(lg)1170(1140+ Groove width 30)
Greater than or equal to 992 Less than 1200(md)970(940+ Groove width 30)
Greater than or equal to 768(sm)750(720+ Groove width 30)
Less than 768(xs)auto

Grid layout

Wrapped in a container , By default, a line is divided into 12 Share

Grid source code analysis

1. Common styles for fluid containers and fixed containers

The left and right outer margins of the container are auto, The left and right inner margins are 15px

//@grid-gutter-widt: Groove width 
.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));  //15px
  padding-right: ceil((@gutter / 2));   //15px
  &:extend(.clearfix all);
}

2. Fixed container specific style

Set the container width according to the media query results

.container {
  .container-fixed();
  // The order is immutable , Doing responsive layout 、 When the media inquires . It must grow from small to large 
  @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;
  }
}

3. Fluid container specific styles

.container-fluid {
  .container-fixed();
}

4. Line specific style

Set the left and right outer margins of each row to -15px, Overlap with the inner margin of the container

.row {
  .make-row();
}

.make-row(@gutter: @grid-gutter-width) {
  margin-left:  ceil((@gutter / -2));
  margin-right: floor((@gutter / -2));
  &:extend(.clearfix all);
}

5. Column specific style

Initialize public style columns

.make-grid-columns();
.make-grid-columns() {
  //  Yes lg, md, sm, xs Four situations ,  Will divide a line into @grid-columns Share ,  Here is 12
  .col(@index) { //  Initialize column style 
    @item: ~"[email protected]{index}, [email protected]{index}, [email protected]{index}, [email protected]{index}";
    .col((@index + 1), @item);
  }
    //@grid-columns 12
  .col(@index, @list) when (@index =< @grid-columns) { //  recursive 
    @item: ~"[email protected]{index}, [email protected]{index}, [email protected]{index}, [email protected]{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { //  Recursive export 
    @{list} {
      // Set relative positioning so that each column can turn on column sorting 
      position: relative;
      //  Set the minimum height to prevent elements from collapsing when there is no content 
      min-height: 1px;
      //  Set the inner margin by the slot width 
      padding-left:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
    }
  }
  .col(1); //  Open style 
}

Decide which specific style to turn on according to the media query

// Mobile phone first , This style is used by default when the following three media queries have no effect ,  Otherwise, it will be covered from small to large 
.make-grid(xs);// Mobile devices 
@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}
@media (min-width: @screen-md-min) {
  .make-grid(md);
}
@media (min-width: @screen-lg-min) {
  .make-grid(lg);
}
// Mix and match ,  Used to set... Separately width, pull, push, offset The style of 
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  //  Next iteration 
  .loop-grid-columns((@index - 1), @class, @type);
}
// Set column style 
.make-grid(@class) {
  .float-grid-columns(@class);
  .loop-grid-columns(@grid-columns, @class, width);
  .loop-grid-columns(@grid-columns, @class, pull);
  .loop-grid-columns(@grid-columns, @class, push);
  .loop-grid-columns(@grid-columns, @class, offset);
}

With .make-grid(xs) For example

function .float-grid-columns(@class) blend

Set up class by col-xs-1, col-xs-2, ..., col-xs-12 Floating style

.float-grid-columns(@class) {
  .col(@index) { //  Initialize column style 
    @item: ~"[email protected]{class}[email protected]{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { //  recursive 
    @item: ~"[email protected]{class}[email protected]{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { //  Recursive closure ,  Add float to all selectors 
    @{list} {
      float: left;
    }
  }
  .col(1); //  Turn on column style 
}

function .loop-grid-columns(@grid-columns, @class, width) blend

Set up class by col-xs-1, col-xs-2, ..., col-xs-12 Of width

.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  [email protected]{class}[email protected]{index} {
    width: percentage((@index / @grid-columns));
  }
}

function .loop-grid-columns(@grid-columns, @class, push) blend

Set up class by col-xs-1, col-xs-2, ..., col-xs-12 Column sorting

.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  [email protected]{class}[email protected]{index} {
    // Columns are sorted by left Realization 
    left: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  [email protected]{class}-push-0 {
    // In order not to use in recursion left Set to 0px So pick out @index=0 Set the value to auto
    left: auto;
  }
}

function .loop-grid-columns(@grid-columns, @class, pull) blend

And push The only difference is that what is set here is relative positioning right Instead of left

Therefore, column sorting cannot be set for different thresholds , It could happen left, right Conflicting or uncovered situations

function .loop-grid-columns(@grid-columns, @class, offset) blend

Set up class by col-xs-1, col-xs-2, ..., col-xs-12 Column offset of

.calc-grid-column(@index, @class, @type) when (@type = offset) {
  [email protected]{class}[email protected]{index} {
    // Column offset is realized by outer margin 
    margin-left: percentage((@index / @grid-columns));
  }
}

Responsive tools

.responsive-visibility() {
  display: block !important;
  table&  { display: table !important; }
  tr&     { display: table-row !important; }
  th&,
  td&     { display: table-cell !important; }
}

.responsive-invisibility() {
  display: none !important;
}
// Initialize all styles as hidden 
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  .responsive-invisibility();
}
// Display the qualified elements 
.visible-xs {
  @media (max-width: @screen-xs-max) {
    .responsive-visibility();
  }
}
.visible-xs-block {
  @media (max-width: @screen-xs-max) {
    display: block !important;
  }
}
.visible-xs-inline {
  @media (max-width: @screen-xs-max) {
    display: inline !important;
  }
}
.visible-xs-inline-block {
  @media (max-width: @screen-xs-max) {
    display: inline-block !important;
  }
}
// Hide eligible elements 
.hidden-xs {
  @media (max-width: @screen-xs-max) {
    .responsive-invisibility();
  }
}
.hidden-sm {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .responsive-invisibility();
  }
}
.hidden-md {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .responsive-invisibility();
  }
}
.hidden-lg {
  @media (min-width: @screen-lg-min) {
    .responsive-invisibility();
  }
}

The subtlety of the grid box model

Review the basic rules of the grid

  • Fixed containers have left and right inner margins 15px
  • On both sides of the line -15px Outside distance of
  • There are... On both sides of the column 15px The inner margin of
  1. In order to maintain the rule of slot width, the text in adjacent columns should be separated by inner margin
  2. When there are sub columns in the row inside the column , In order not to expand the margin between the text in the child column inside the row and the text in the adjacent column outside the row , You need to set a negative outer margin for the row so that the inner margin of the two columns of any nested relationship is constant 30px
  3. When the container is released , The inner margin of the container must be set to offset the side effects of the outer margin of the row

bootstrap Customization of

  • Modify source code

bootstrap The entry file of is bootstrap.less, Inside import by less Characteristics of , It plays a role in integrating other less The function of, not css The ability to make new requests in , It can be used frequently

You can recompile by modifying the source code bootstrap.less Introduce new css file

  • Create a new entry file

take bootstrap The new entry file is introduced into the new entry file as a mixture

Next, modify the variable or style you want to modify

Finally, compile the new entry file into

copyright notice
author[Chen Chen is trying],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204290809440403.html

Random recommended