BOOTSTRAP3 Grid System principle and application detailed _javascript skills

When I first started using the bootstrap grid system to write layout, I encountered this problem:

There is a layout on my page

I hope that when the width of the screen is smaller than the sum of their widths, the right part falls off and they are placed vertically.

And I use col-xs-6 words, the box on the right will never fall down.

The words become so ugly.

If I use col-sm-6, the box on the right will fall too early.

At this time the screen width is 766px, he has been stacked emissions, left a large gap on both sides, or very ugly.

And Bootstarp doesn't offer the middle option.

To solve this problem, you have to figure out how the response layout works.

Bootstarp this mechanism into Grid system.

Thought:

Divide the screen into squares of equal size, usually divided into 12, 24, or 32 parts. Bootstrap Select default divided into 12 copies.

Rules:

1. The data row (. Row) must be contained in a fixed-tolerance (. Container) or full-tolerance (. container-fluid) to give it the appropriate alignment and spacing (padding).

2. The specific content should be placed within the column container (columns), and only columns (column) can act as direct child elements of the row container (. Row)

3. There is a 30px spacing between columns and columns.

4. Provide 4 different types of columns:

In my opinion, this picture is the essence of grid system, and through the experiment you can find:

When the screen width is less than 768px (that is, a small screen), the column is divided by the number following the. col-xs-. If no. col-xs-is defined, it becomes single-column and the width and row are equal.

When the screen is wide between 768px and 992px (that is, a flat panel), the column is divided by the number following the. col-sm-. If col-sm-is not defined, the. col-xs-is the subject.

When the screen is wide between 992px and 1200px (that is, the middle screen), the column is divided by the number following the. col-md-. If not defined. col-md-, whichever is col-sm-or col-xs-.

When the screen is wider than 1200px (that is, a large screen), the column is divided by the number following the. col-lg-. If no. col-md-is defined, the. col-md-or col-sm-or col-xs-prevail.

Core principle:

How is this response mechanism implemented?

In one example, write a structure like this in HTML:

<div class= "Container" >
 <div class= "Row" > <div class= "col-xs-3" col-md-4 col-sm-6 col-lg-2
 " >col-xs-3 col-sm-6 col-md-4 col-lg-2</div>
 <div class= "col-xs-3 col-md-8 col-sm-6 col-lg-10" > Col-xs-3 col-sm-6 col-md-8 col-lg-10</div> 
 </div>
</div>

When

When the screen width is 1280px (large screen), this line is 20 minutes, the MD SM XS width is not valid

When the screen width is 996px (medium screen), this line is 48 minutes and you can see the width of the SM XS is invalid.

When the screen width is 980px (flat panel), this line is 66 points. The width of the XS is invalid.

When the screen is wide to 600px (small screen),

So his source code should be like this:

Other. col-xs-
. col-xs-3 {
 width:25%;
}
Other. col-xs-

all xs {
 float:left;
}

@media (min-width:768px) {
all SM {
 float:left;
}
Other. col-sm-
. col-sm-6 {
 width:50%;
}
Other. col-sm-
}

@media (min-width:992px) {
All MD {
 float:left
}
Other. COL-MD
. col-md-8{
 width:66.66666667%;
Other. Col-md
}

@media (min-width:1200px) {
All LG {
 float:left;
}
Other. col-lg-

. col-lg-10 {
 width:83.33333333%;
}
Other. col-lg-
}

The order cannot be changed because the BOOSTRAP3 principle is mobile one.

Col-xs-* is always a single line because, his width and float are not defined in the @media, no matter how the screen changes, he has his own breadth and float.

So, if I want the two boxes stacked on the screen for less than 450px, I need to let XS lose its width.

@media (max-width:450px) {
 . col-xs-6 {
 width:100%
 }}
}

Add one such code, I want the effect can be achieved.

Other principles:

1. The partitioning and nesting of columns is achieved with a percentage + float.

Col-md-1, Col-md-2,. col-md-3, Col-md-5, col-md-6,. col-md-7,. Col-md-8,. col-md-9,. Col-md-11,. col-md-12 {
 float:left;
 }
. col-md-12 {
 width:100%
 }
 . col-md-11 {
 width:91.66666667%
 }
 . col-md-10 {
 width:83.33333333%
 }
 . col-md-9 {
 width:75%
 }
 . col-md-8 {
 width:66.66666667%
 }
 . col-md-7 {
 width:58.33333333%
 }
 . col-md-6 {
 width:50%
 }
 . col-md-5 {
 width:41.66666667%
 }
 . col-md-4 {
 width:33.33333333%
 }
 . col-md-3 {
 width:25%
 }
 . col-md-2 {
 width:16.66666667%
 }
 . col-md-1 {
 width:8.33333333%;
 }

2. The spacing between columns and columns is implemented by the padding of each column (column), and the padding of the two sides of the column is offset by the negative margin of (. Row):

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-3, Col-lg-3, Col-xs-4,. col-sm-4, Col-md-4, col-lg-4, Col-xs-5, col-sm-5,. col-md-5,. Col-lg-5, Col-md-6, Col-lg-6,. col-xs-7, Col-sm-7, col-md-7, Col-lg-7, Col-xs-8,. col-sm-8,. Col-md-8, Col-sm-9, Col-md-9,. col-lg-9, Col-sm-10, col-md-10,. col-lg-10,. col-xs-11,. col-sm-11,. Col-lg-11, col-xs-12,. col-sm-12,. col-md-12,. col-lg-12 {
 position:relative;
 min-height:1px;
 padding-right:15px;
 padding-left:15px
}
. Row {
 margin-right: -15px;
 Margin-left: -15px;
}

3. Column offsets are implemented by adding margin to the left of the column.

. col-md-offset-12 {
 margin-left:100%
}
 . col-md-offset-11 {
 margin-left:91.66666667%
 }
 . col-md-offset-10 {
 margin-left:83.33333333%
 }
 . col-md-offset-9 {
 margin-left:75%
 }
 . col-md-offset-8 {
 margin-left:66.66666667%
 }
 . col-md-offset-7 {
 margin-left:58.33333333%
 }
 . col-md-offset-6 {
 margin-left:50%
 }
 . col-md-offset-5 {
 margin-left:41.66666667%
 }
 . col-md-offset-4 {
 margin-left:33.33333333%
 }
 . col-md-offset-3 {
 margin-left:25%
 }
 . col-md-offset-2 {
 margin-left:16.66666667%
 }
 . col-md-offset-1 {
 margin-left:8.33333333%
 }
 . col-md-offset-0 {
 margin-left:0;
 }

4..col-md-push-* and. Col-md-pull-* are implemented by setting the left and right of the box relative positioned.

. col-md-pull-12 {right:100%;
 }. col-md-pull-11 {right:91.66666667%;
 }. col-md-pull-10 {right:83.33333333%;
 }. col-md-pull-9 {right:75%;
 }. col-md-pull-8 {right:66.66666667%;
 }. col-md-pull-7 {right:58.33333333%;
 }. col-md-pull-6 {right:50%;
 }. col-md-pull-5 {right:41.66666667%;
 }. col-md-pull-4 {right:33.33333333%;
 }. col-md-pull-3 {right:25%;
 }. col-md-pull-2 {right:16.66666667%;
 }. col-md-pull-1 {right:8.33333333%;
 }. col-md-pull-0 {right:0;
 }. col-md-push-12 {left:100%;
 }. col-md-push-11 {left:91.66666667%;
 }. col-md-push-10 {left:83.33333333%;
 }. col-md-push-9 {left:75%;
 }. col-md-push-8 {left:66.66666667%;
 }. col-md-push-7 {left:58.33333333%;
 }. col-md-push-6 {left:50%;
 }. col-md-push-5 {left:41.66666667%;
 }. col-md-push-4 {left:33.33333333%;
 }. col-md-push-3 {left:25%;
 }. col-md-push-2 {left:16.66666667%;
 }. col-md-push-1 {left:8.33333333%; }. col-md-push-0 {left:0;
 }

Knowing these principles, you will know his function and limitations, you can change any place, let him serve you.

Application:

If you want the middle screen to switch to a flat screen, the layout changes from three columns to two columns, which can be written as:

<div class= "Row" >
 <div class= "col-sm-6 col-md-4" >1</div>
 <div class= "Col-sm-6 col-md-4 ">2</div>
 <div class=" col-sm-6 col-md-4 ">3</div>
 <div class=" Col-sm-6 col-md-4 " >4</div>
 <div class= "col-sm-6 col-md-4" >5</div>
 <div class= "col-sm-6 col-md-4" > 6</div>
</div>

Effect:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.