The principle of grid system is very simple, simply by defining the size of the container, split 12 parts (also flat into 24 or 32 parts, but 12 is the most common), and then adjust the internal and external margins, and finally combined with media query, the system made a powerful response grid system. The grid system in the bootstrap framework is to divide the container into 12 parts.
In the use of the time you can re-compile less (or sass) source code to modify the value of 12 (that is, 24 or 32, of course, you can also be divided into more, but not recommended for such use).
<! DOCTYPE html>
< html>
< head>
< meta charset= "Utf-8" >
< title> realization Principle </title>
< link rel= "stylesheet" href= "Http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >
< link rel= "stylesheet" href= "Style.css" >
<body>
< div class= "container" >
< div class= "Row" >
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
</div>
< div class= "Row" >
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
</div>
< div class= "Row" >
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
< div class= "col-md-1" >.col-md-1</div>
</div>
</div>
</body>
Working principle
The grid system of the bootstrap framework works as follows:
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 (. column) can be added in a row (. row), but the sum of the columns cannot exceed the total number of columns in the split, such as 12. 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 in the column container (columns), and only columns (column) can be used as a direct child element of the row container (. Row)
4. Create the spacing between columns by setting the padding (padding). The effect of the padding (padding) is then offset by setting a negative margin (margin) for the first column and the last column.
1. The outermost frame, with a large white area, is equivalent to the viewable area of the browser. The bootstrap frame'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 point) of 768px, 992px and 1220px.
2, the second border (1) is equivalent to a container (. container). For different browser resolutions, the widths are not the same: auto, 750px, 970px, and 1170px. Set in 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; }3, 2nd the horizontal bar is described, the container row (. Row) divided by 12 equal parts, that 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 led to the first column of the Padding-left and the last column of the padding-right occupy the total width of 30px, resulting in the page is not beautiful, of course, if you need to leave a certain distance, this practice is good. As shown in line No. 767 ~ No. 772 of 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-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;The 4, 3rd bar is the row container (. Row), which defines "Margin-left" and "margin-right" values as " -15px", which are used to offset the right padding of the first column and the left padding of the last column. From line No. 763 to line No. 767 of BOOTSTRAP.CSS, you can see:
. Row { margin-right: -15px; Margin-left: -15px;5, the rows and columns together to see the effect of the bar 4. That is, the effect we expect to see, there is no space between the first and last columns and the container (. Container).
Bar 5 just wanted to show you that you can combine columns and columns as you want, except that the sum of their combinations does not exceed the total number of columns.
< body>
< 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>
</body>
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 for different screen sizes, the examples covered in this section are described in the middle screen (970px) as an example, and other screens are used similarly. About screen sizes such as:
1. Combination of columns
The simple comprehension of column combinations is to change numbers to merge columns (the principle: the sum of columns cannot exceed 12), which is somewhat similar to 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>
(need to be set to full screen when viewing in the results window on the right)
The way to combine columns is very simple, involving only two CSS two features: floating and width percentages . Line ~1126 on line 1088th of the Bootstrap.css file:
/* Make sure 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%; }Sometimes we don't want the next two columns to be close together, but we don't want to use margin or other technical means. You can do this at this time using the column shift (offset) feature. Using column offsets is also straightforward, simply by adding the class name "col-md-offset-*" on the column element (where the asterisk represents the number of column combinations to offset), then the column with that class name will be shifted to the right. For example, you add "col-md-offset-4" on a column element to indicate that the column moves the width of 4 columns to the right.
col-md-offset-4 col-md-offset-4"> column to the right four columns of spacing </div></div></div>
As shown in the example code above, the results are as follows or can be seen in the rightmost result window ( mouse over the results window, click the Full-screen button that appears ):
The principle of implementation is very simple, that is, the use of One-twelveth (1/12) margin-left. Then there are the number of offset, there are how many margin-left. In Bootstrap.css, the 1205th line 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 one 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 does not exceed 12, otherwise the column is displayed as a line break, such as:
<div class= "Row" > <div class= "col-md-3" >.col-md-3</div> 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 a column break has occurred.
Column sortColumn sorting is actually changing the direction of the column, that is, changing the left and right floats, and setting the floating distance. In the bootstrap framework, the grid system 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 works as follows:
"Col-md-4" left, "col-md-8" right, if you want to swap positions, you need to move "col-md-4" to the right of 8 columns, that is, 8 offset, that is, "<div class=" col-md-4 ">" Add Class Name " Col-md-push-8 "to invoke its style.
Also, to move the "col-md-8" to the left of the 4-column distance, which is 4 offset, add the class name "Col-md-pull-4" on "<div class=" Col-md-8 ">":
Bootstrap only by setting left and right to achieve the positioning effect. You can see the specific code in line 1127th ~ Line 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; }Nesting of columns
The grid system of the bootstrap framework also supports nesting of columns. You can add one or more row containers to a column, and then insert columns in the row container (using columns as described earlier). But the row container in the column container, with a width of 100%, is the width of the current outer column. Consider a simple example:
<div class= "Container" > <div class= "Row" > <div class= "col-md-8" > my inside nested a grid <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" > inside of me 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 grid system in bootstrap
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
