The bootstrap grid

Implementation principle

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

To better understand how the grid system works in the bootstrap framework, let's look at a sketch:

Simply explain the diagram:

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.

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. 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. 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).  Basic UsageThe 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>

Column OffsetSometimes 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"> column to the right four columns of spacing </div>

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:

  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 ">".Final Result:col-md-push-* Rightcol-md-pull-* left  Nesting of columnsThe 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.

<div class= "Row" >        <div class= "col-md-8" >        inside of me 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>

  As you can see from the above results, the nested mesh is below the outside grid. in addition, for nested meshes its col-md-* is pressedParent ClassThe width of the grid is divided into 12 parts that define the width of each column. Note: The total number of nested columns also needs to follow no more than 12 columns. Otherwise, it will result in a newline display. 

The bootstrap grid