Hello everyone, this is demo Software Park. Today, we are going to share the learning of Bootstrap.

As we all know, Bootstrap is a simple, intuitive and powerful front-end development framework that makes Web development faster and simpler.

The fluid layout container width is auto, but the padding is 15px on both sides.

The width of the fixed layout container varies depending on the device resolution

Resolution threshold

The width of the container is 1170. The padding is 15. The width of the container is 970 The width of the container is 750 and the padding is 15 and the width is 768 > W and the width of the container is auto and the padding is 15Copy the code

Grid source code analysis

1. Fluid container & Fixed container common style

  margin-right: auto;
  margin-left: auto;
  padding-left:  15px;
  padding-right: 15px;	
Copy the code

2. Fixed container specific style order immutable

          @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

Line 3.

margin-left:  -15px;
margin-right: -15px;
Copy the code

Column 4.

.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;
		 * }
Copy the code
.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

Column offset is adjusted by margin-left, which has 13 scales (0 to 12). 0 is 0%

When the column is pushed, the left is adjusted, which is divided into 13 grades (0 to 12). 0 is auto

In pull, right is adjusted. There are 13 levels (0 to 12). 0 is auto

The subtleties of container and box model design

Container Provides a 15px padding

A row is a container for columns directly. A row can have up to 12 columns by default.

It also acts as a wrapper for all left-floating columns, with the nature of ClearFix.

The row has a -15px margin on each side.

To offset the 15px padding in the container

Each column will also have a 15px horizontal padding, colunmn can only live in a row,

Since the margin of the row is -15px, the columns on either side of the row will touch the container boundary.

But colunmn has a 15px padding so that its contents don’t touch the container. Also, there are 30px slots between the contents of different columns. The goal is to ensure that there are 30px slots between the columns and 15px slots between the columns and the container.

To put it simply:

The container has a 15px padding on both sides

The row with a -15px margin has a 15px padding on both sides of the column

To maintain the rule of slot width, you must use 15px padding on both sides of the column

In order for columns to be nested with rows, there must be a -15px margin on both sides

In order for the container to be able to wrap around the row it has to have 15px padding on both sides of the container