Bootstrap3 Grid system principle and application details, bootstrap3grid

Bootstrap3 Grid system principle and application details, bootstrap3grid

When I first wrote the layout using the Bootstrap lattice system, I encountered the following problem:

My page has such a layout

I hope that when the width of the screen is smaller than the sum of their widths, the right part will fall down and they will be placed vertically.

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

The text is so ugly.

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

At this time, the screen width is 766px, and it has been stacked and discharged, leaving a large blank space on both sides, still ugly.

Bootstarp does not provide intermediate options.

To solve this problem, you must understand how the responsive layout works.

Bootstarp converts this mechanism into a Grid system.

Thoughts:

Divide the screen into grids of equal size, generally 12, 24, or 32. Bootstrap is divided into 12 parts by default.

Rules:

1. data row (. row) must be included in the fixed width container (. container) or full-width container (. container-fluid) to give it an appropriate alignment and padding (padding ).

2. The specific content should be placed within the column container (column), and only the column can be used as a direct sub-element of the row container (. row ).

3. There is a 30px gap between the column and the column.

4. four different types of columns are provided:

In my opinion, this figure is the essence of the Grid system. Through experiments, we can find that:

When the screen width is less than 768px (small screen), the column is divided by the number following. col-xs. If. col-xs-is not defined, it will become a single column and the width is equal to the row.

When the screen width is between 768px and 992px (that is, flat screen), the column is divided by the number following. col-sm. If col-sm-is not defined, use. col-xs-as the standard.

When the screen width is between 992px and pixel PX (that is, the Center screen), the column is divided by the number following. col-md. If no. col-md-is defined, col-sm-or col-xs-prevails.

When the screen is larger than pixel PX (a large screen), the column is divided by the number following. col-lg. If no. col-md-is defined, use. col-md-, col-sm-, or col-xs.

Core Principles:

How is this response mechanism implemented?

Let's use an example to study and 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 points, and the width of md sm xs is invalid.

When the screen width is 996px (middle screen), this line is forty-eight points, we can see that the width of sm xs is invalid.

When the screen width is 980px (flat screen), this line is divided into six or six points. The width of xs is invalid.

When the screen width is 600px (small screen,

So his source code should be like this:

// Others. col-xs -. col-xs-3 {width: 25%;} // Other. col-xs-All xs {float: left;} @ media (min-width: 768px) {All sm {float: left;} // others. col-sm -. col-sm-6 {width: 50%;} // Other. col-sm-} @ media (min-width: 992px) {All md {float: left;} // others. col-md.col-md-8 {width: 66.66666667%;} // Other. col-md} @ media (min-width: pixel px) {All lg {float: left;} // others. col-lg -. col-lg-10 {width: 83.33333333%;} // Other. col-lg -}

The sequence cannot be changed, because the boostrap3 principle is mobile first.

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

Therefore, if I want to arrange the two boxes stacked when the screen is smaller than pixel PX, I need to make xs lose its own width.

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

Add such code to achieve the desired effect.

Other principles:

1. Column division and nesting are implemented by percentage + floating.

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .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 is implemented by the padding of each column. The padding of the columns on the two sides 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-sm-3, .col-md-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-xs-6, .col-sm-6, .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-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-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 offset is achieved 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 left and right of the box located by relative.

.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; }

Once you understand these principles, you will understand their functions and limitations, and you can change anything to help you.

Application:

If you want to change the layout from three columns to two columns after switching the screen to a flat screen, you can write it as follows:

<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 all the content of this article. I hope it will be helpful for your learning and support for helping customers.