Bootstrap the grid system (layout) _javascript skills that must be learned every day

1. Grid system (Layout)
Bootstrap has a set of responsive, mobile-priority streaming grid systems, which are automatically divided into up to 12 columns as the size of the screen device or viewport (viewport) increases.

I'm here to call the grid system in bootstrap a layout. It is creating a page layout with a series of rows and columns (column), and then your content can be put into the layout you created. Here is a brief introduction to the workings of the bootstrap grid system:

The realization principle of grid system is very simple, only by defining the size of the container, divided 12 (also divided into 24 or 32, but 12 is the most common), and then adjust the internal and external margins, and finally combined with media inquiries, the system made a powerful response grid system. The grid system in the bootstrap frame is to divide the container flat into 12 parts.

In use when you can recompile less (or sass) source code to modify the value of 12 (that is, to 24 or 32, of course, you can also be divided into more, but do not recommend this use).

2, the use of rules
Bootstrap has a set of responsive, mobile devices built into it.

1. The data row (. Row) must be included in the container (. Container) to give it the appropriate alignment and padding (padding). Such as:

<div class= "Container" >
 <div class= "Row" ></div>
</div>

2. Columns can be added (. column) in rows (. row), but the sum of the columns cannot exceed the total number of columns, such as 12, that are equally divided. Such as:

<div class= "Container" >
<div class= "Row" >
 <div class= "col-md-4" ></div>
 < Div class= "Col-md-8" ></div>

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

4, create the spacing between columns by setting the padding. The effect of the inner margin (padding) is then offset by setting a negative outer margin (margin) for the first and last columns

To better understand the workings of the grid system of the bootstrap framework, let's look at a sketch:

Simple explanation of the diagram:

1, the outermost frame, with a large white area, is equivalent to the visual area of the browser. The bootstrap framework's grid system has a responsive effect with four types of browsers (ultra small screen, small screen, medium screen and large screen) with breakpoints (pixel demarcation points) 768px, 992px, and 1220px.

2, the second border (1) is the equivalent of a container (. container). The width is not the same for different browser resolutions: Automatic, 750px, 970px, and 1170px. Set on line No. 736-No. 756 of Bootstrap.css:

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

The 3 and 2nd cross section illustrates that the container's row (. Row) is divided equally into 12 equal parts, which is the column. Each column has a "padding-left:15px" (the pink part of the figure) and a "padding-right:15px" (The purple part of the figure). This also leads to the padding-left of the first column and the Padding-right of the last column occupying the 30px of the total width, which makes the page unattractive, of course, if you need to keep a certain amount of spacing, this is a good practice. As shown in line No. 767, line No. 772 in Bootstrap.css:

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;

The horizontal bar 4, 3rd is the row container (. Row), which defines the "Margin-left" and "margin-right" values as " -15px" to offset the left and the right margins of the first column. On line No. 763 of Bootstrap.css-line No. 767, you can see:

. Row {
 margin-right: -15px;
 Margin-left: -15px;

5, the row and column to be together to see the effect of the cross bar 4. That is, the effect we expect to see, there is no spacing between the first column and the last column and the container (. Container).

Cross Bar 5 just want to show you, you can according to need, any combination of columns and columns, but their combination of number and not more than the total number of columns.

3, grid options
The screenshot below lets you see how Bootstrap's grid system works on a variety of mobile devices.

As you can see from the screenshot above, Bootstrap has different style classes for different sizes of screens, including mobile phones, tablets, PCs, and so on, so developers can have more choices when they develop. As I understand it: if you use more than one style class on an element, the element will choose the style class that is most appropriate (matching the ideal) in different sizes. Simple examples: For example, on an element we use two style classes:. col-md-and. Col-lg. You can see from the screenshot above

The first case: size =1200px; then you will choose. Col-lg.

The second case: size =992px and size "=1200px; then you choose. Col-md.

In the third case, if the size is 992px, then neither of the style classes will be used on the element.

4. Basic usage
The grid system is used for layout, which is actually a combination of columns. There are four basic uses in the grid system of the bootstrap framework. Since the bootstrap framework uses different grid styles in different screen sizes, examples in this section are described in the example of a medium screen (970px), which is similar to the use of other screens.

1), column combination

A simple understanding of column combinations is to change numbers to merge columns (principle: The sum of the columns cannot exceed 12), somewhat like the colspan property of a table, for example:

<div class= "Container" >
 <div class= "Row" >
 <div class= "col-md-4" >.col-md-4</div>
 <div class= "col-md-8" >.col-md-8</div>
 </div>
 <div class= "Row" >
 <div class= "col-md-4" >.col-md-4</div>
 <div class= "col-md-4" >.col-md-4</div>
 <div class= "col-md-4" >.col-md-4</div>
 </div>
 <div class= "Row" >
 <div class= " Col-md-3 ">.col-md-3</div>
 <div class=" col-md-6 ">.col-md-6</div>
 <div class=" Col-md-3 ">.col-md-3</div>
 </div>
</div>

Using the above structure, you will see the effect of the following diagram:

Implementing a column combination is very simple, involving only two CSS two features: float and width percent. On line 1088th of the Bootstrap.css file ~1126:

/* Ensure that all columns are left 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;
 }
/* Define the width of each column combination (percent used) * *

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

5. Column Offset
Sometimes we don't want the next two columns to be close together, but we don't want to use margin or any other technical means. This time you can use the column offset (offset) feature to implement it. Using column offsets is also very simple, and simply add the class name "col-md-offset-*" to the column element (where the asterisk represents the number of column combinations to offset), and the column with that class name is shifted to the right. For example, you add "col-md-offset-4" to a column element to indicate that the column is moving the width of 4 columns to the right.

<div class= "Container" >
<div class= "Row" >
<div class= "col-md-4" >.col-md-4</div>
<div class= "col-md-2 col-md-offset-4" > column moves the spacing of four columns to the right </div>
<div class= "Col-md-2" >.col-md-3 </div>
</div>
<div class= "Row" >
<div class= "col-md-4" >.col-md-4</div>
<div class= "col-md-4 col-md-offset-4" > column move right four-column spacing </div>
</div>
</div>

As the above example code, the results are as follows

The principle of implementation is very simple, is to use One-twelveth (1/12) of the margin-left. Then how many offset, how many margin-left. The 1205th line in Bootstrap.css is shown in line ~1241:

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

Attention:

However, there is a detail to note that when you use "col-md-offset-*" to offset a column to the right, you want to ensure that the total number of columns and offset columns is not more than 12, or you can break column display, such as:

<div class= "Row" >
<div class= "Col-md-3" >.col-md-3</div>
<div class= "col-md-3 col-md-offset-3" >col-md-offset-3</div>
<div class= "Col-md-4" >col-md-4</div>
</div>
The total number of columns and offset columns in the above code is 3+3+3+4 = 13>12, so column breaks occur.

As the above example code, the results are as follows

6, Column sorting
Column sort is to change the direction of the column, is to change the left and right float, and set the floating distance. In the grid system of the bootstrap framework, it is by adding the class name "col-md-push-*" and "col-md-pull-*" (where the asterisk represents the number of column combinations moved).

Let's look at a simple example:

<div class= "Container" >
 <div class= "Row" >
 <div class= "col-md-4" >.col-md-4</div>
 <div class= "col-md-8" >.col-md-8</div>
 </div>
</div>

By default, the above code effects are as follows:

"Col-md-4" occupies the left, "col-md-8" right, if you want to swap position, you need to move "col-md-4" to the right 8 column distance, that is, 8 offset, that is, in the "<div class=" col-md-4 ">" Add Class Name Col-md-push-8 ", call its style.

Also, to move "col-md-8" to the left by 4 columns, that is, 4 offset, add the class name "Col-md-pull-4" on the "<div class=" Col-md-8 ">":

Bootstrap the positioning effect only by setting left and right. The specific code can be seen on line 1127th ~ 1204th of the Boostrap.css file:

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

 

7. Nesting of columns
The grid system of the bootstrap framework also supports nesting of columns. You can add one or more rows (row) containers to a column, and then insert columns in the row container (using the columns as described earlier). However, the row container (row) in the column container, with a width of 100%, is the width of the current outer column. To see a simple example:

<div class= "Container" >
 <div class= "Row" >
 <div class= "col-md-8" >
 i have nested a grid
 inside <div class= "Row" >
 <div class= "col-md-6" >col-md-6</div>
 <div class= "Col-md-6" > col-md-6</div>
 </div>
 </div>
 <div class= "col-md-4" >col-md-4</div>
 </div>
 <div class= "Row" >
 <div class= "col-md-4" >.col-md-4</div>
 < Div class= "Col-md-8" >
 my inside nested a grid
 <div class= "Row" >
 <div class= "col-md-4" >col-md-4 </div>
 <div class= "col-md-4" >col-md-4</div>
 <div class= "col-md-4" >col-md-4< /div>
 </div>
 </div>
 </div>
</div>

The effect is as follows:

Note: The total number of nested columns also needs to follow no more than 12 columns. Otherwise it will cause the end of the line to show.

This series of tutorials is organized into: Bootstrap basic tutorials, welcome to click to learn.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

This series of tutorials is organized into: Bootstrap basic tutorials, welcome to click to learn.

This article is through the simplest case, to analyze the layout of the case related to the main points, I hope to help you learn.