Accumulate Kuibu, Poly stream------Bootstrap learning record (3)

As a feature of bootstrap, the grid system is a must, so let's take a look at how the grid system helps bootstrap implement a responsive layout.

1. What is a grid system

We can find more official answers from Bootstrap's website:Bootstrap provides a responsive, mobile-first, lost raster system that is automatically divided into up to 12 columns as the screen or viewport (viweport) increases. It contains pre-defined classes that are easy to use, and powerful mixin for generating more semantic layouts.

This statement is more accurate and clear, but can be more popular to explain: The viewport is divided into 12 columns, where the elements occupy a different number of columns, when the viewport changes, the number of columns occupied by the element will change accordingly, of course, this is my temporary understanding.

2. One of the simplest grid examples

I'll start with the code I used to do the example, and the corresponding effect shows:

<div class= "Container" > <div class= "Row part-msg" > <div class= "col-md-4 col-lg-2 col-sm-5" >  </div> <div class= "col-md-         4 col-lg-2 col-sm-5 ">  </div> <div class= "col-md-4 col-lg-2 col-sm-5" >  </div> <div class=" col-md-4 col-lg-2 col-sm-5 ">  </div> <div class= "col-md-4 col-lg-2 col-sm-5" >  </div> <div class= "col-md- 4 col-lg-2 col-sm-5 ">  </div&gt    ; </div></diV> 

My computer's current resolution is 1600*900, which shows the following:

When I reduce the size of my browser to a certain extent, I'll look at the display:

Then in this case I continue to narrow down the browser viewport and find that the layout will change further:

And as I narrowed the viewport further, the picture layout changed accordingly, showing the end effect:

See this effect, and my simplest description, now estimated there will be one of the biggest doubts, to what extent will have the corresponding effect, grid system here is how to behave?

3. Sample Code Analysis

First of all, there is a <div class= "container" ></div> in the outermost layer of the Code, and as a Div, it is easy to think that it is a separate module, and that it is a concrete manifestation, so let's look at the settings in the corresponding style sheet:

. container {padding-right:15px;  padding-left:15px;  Margin-right:auto; Margin-left:auto;}  @media (min-width:768px) {. container {width:750px;  }} @media (min-width:992px) {. container {width:970px;  }} @media (min-width:1200px) {. container {width:1170px; }}

Here we see a familiar code in the container: Margin-right:auto;margin-left:auto; it reminds me of our most commonly used margin:0px auto, which is the center effect, And here also according to the screen size set its fixed width, of course, we should also note that here is not set height, if used for layout, the height of the problem also need to pay attention to coordination, this later.

And we saw in this place three viewport sizes for dividing boundaries: 768px, 992px, 1200px. Then these three dimensions are not related to my previous operation, the answer is yes, it is because of its relationship.

We look at the explanation of the official website here:

We also used the corresponding class attribute in code writing: col-md-, col-lg-, col-sm-, col-xs-, and so on, and here the MD is MIDDLE,LG represents LARGE,SM represents the Small,xs also represents the "smaller, very small" The meaning of it. At this point, we can see the code above is not very basic, it is simply extremely simple.

But there is one more detail that we can never ignore, that is <div class= "row" ></div> existence, what is the significance of its existence?

If the word row, column, the first thing to think of is what, right, is table, the table has the ranks, and this is our grid system, since there is a col-, how can be less row, and columns can only be reflected in the row, the following can only be columns, The corresponding column of the corresponding row is a specific cell, in order to write content, and here the row can only be placed in container or Container-fluid .

As for the setting of row and columns, we can look at the definition of the style table:

. Row {margin-right: -15px; Margin-left: -15px;}. 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;}. Col-xs-1,. Col-xs-2,. col-xs-3,. col-xs-4,. col-xs-5,. col-xs-6,. col-xs-7,. Col-xs-8,. col-xs-9,. col-xs-10,. col-xs-11 ,. col-xs-12 {float:left;}. col-xs-12 {width:100%;}. col-xs-11 {width:91.66666667%;}. col-xs-10 {width:83.33333333%;}. col-xs-9 {width:75%;}. col-xs-8 {width:66.66666667%;}. col-xs-7 {Width:58.33333333%;}. col-xs-6 {width:50%;}. col-xs-5 {width:41.66666667%;}. col-xs-4 {width:33.33333333%;}. col-xs-3 {width:25%;}. col-xs-2 {width:16.66666667%;}. col-xs-1 {width:8.33333333%;}

See here's the. Row settings, what did you find out, remember. Container's settings, padding:0px 15px; and the margin here is -15px.

In this way, the simplest grid system is complete, suddenly feel good tall on ...



Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Accumulate Kuibu, Poly stream------Bootstrap learning record (3)