Bootstarp Learning (7) grid system, bootstarp Grid

Bootstarp Learning (7) grid system, bootstarp Grid
Implementation Principle

The implementation principle of the grid system is very simple. It only defines the container size and splits 12 parts equally (24 or 32 parts equally, but 12 parts are the most common ), then adjust the internal and external margins, and finally combine the media query to create a powerful responsive grid system. In the Bootstrap framework, the grid system splits containers into 12 parts.

When using the SDK, You Can recompile the LESS (or Sass) source code based on the actual situation to modify the value 12 (that is, change to 24 or 32). Of course, you can divide the value into more values, but it is not recommended to use this method ).

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

Working Principle

The mesh system of the Bootstrap framework works as follows:

1. The data row (. row) must be included in the container (. container) so as to assign it an appropriate alignment and padding (padding ). For example:

<div class="container"><div class="row"></div></div>

2. You can add a column (. column) in a row (. row), but the sum of the columns cannot exceed the total number of columns that are evenly divided, such as 12. For example:

<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 (column), and only the column can be used as a direct sub-element of the row container (. row ).

4. You can set the padding between columns and columns by setting the padding. Then, we set a negative margin (margin) for the first and last columns to offset the influence of the inner margin (padding ).

To better understand the working principle of the Bootstrap Framework's grid system, let's look at a sketch:

Briefly explain the figure:

1. the outermost border, with a large white area, is equivalent to the visible area of the browser. The mesh system of the Bootstrap framework has a responsive effect. It has four types of browsers (ultra-small screen, small screen, medium screen, and large screen), and its breakpoint (pixel demarcation point) is 768px, 992px, and 1220px.

2. The second border (1) is equivalent to the container (. container ). Different browser resolutions have different widths: automatic, 750px, 970px, and 1170px. In the 736th rows of bootstrap.css ~ Set row 756th:

.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 horizontal bars 3 and 2 indicate that the rows (. row) of the container are evenly divided into 12 equal portions, that is, columns. Each column has a "padding-left: 15px" (pink in the figure) and a "padding-right: 15px" (purple in the figure ). This also leads to the padding-left of the first column and the padding-right of the last column occupying 30 PX of the total width, which leads to the page not beautiful, of course, if you need to leave a certain margin, this is a good practice. For example, the 767th rows in bootstrap.css ~ As shown in row 772nd:

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

4. the horizontal bar 3 is the row container (. row), which defines the "margin-left" and "margin-right" values as "-15px ", used to offset the left inner distance of the first column and the right inner distance of the last column. In the 763rd rows of bootstrap.css ~ You can see in row 767th:

.row {  margin-right: -15px;  margin-left: -15px;

5. You can combine rows and columns to see the effect of Row 4. That is, the expected effect is that there is no spacing between the first column and the last column and the container (. container.

Horizontal Bar 5 is just to show you that you can combine any columns and columns as needed, but the sum of their combinations should not exceed the total number of columns.

Basic usage

The grid system is used for layout, which is actually a combination of columns. There are four basic usage methods in the mesh system of the Bootstrap framework. Since the Bootstrap framework uses different grid styles in different screen sizes, the examples involved in this section are described using the screen (970px) as an example, the usage of other screens is similar to that of other screens. The screen size is as follows:

1. Column combination

A simple understanding of column combination is to change numbers to merge columns (principle: the total number of Columns cannot exceed 12), which is similar to the colspan attribute 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 following results:

(Set to full screen when viewing in the result window on the right)

The column combination method is very simple and involves only two CSS features:FloatingAndWidth percentage. In the 1,088th line of the bootstrap.css file ~ Row 3:

/* Make sure 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 (percentage 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%;  }

 

Column offset

Sometimes, we do not want two adjacent columns to be together, but we do not want to use margin or other technical means. In this case, you can use the column offset function. Column offset is also very simple. You only need to add the class name "col-md-offset-*" to the column element (the asterisk indicates the number of column combinations to be offset ), the column with this class name will be offset to the right. For example, you add "col-md-offset-4" on the column element to indicate that the column moves the width of four columns to the right.

<Div class = "container"> <div class = "row"> <div class = "col-md-4">. col-md-4 </div> <div class = "col-md-2Col-md-offset-4"> Column to the right to move the spacing of four columns </div> <div class =" col-md-2 ">. col-md-3 </div> <div class = "row"> <div class = "col-md-4">. col-md-4 </div> <div class = "col-md-4Col-md-offset-4"> Spacing between the four columns to the right </div>

As shown in the sample code above, the result is as follows or can be seen in the rightmost result window (Move the cursor to the result window and click the displayed full screen button.):

The implementation principle is very simple, that is, using 1/12 (1/12) margin-left. Then, the number of offset values is margin-left. In bootstrap.css, there are 1,205th rows ~ As shown in row 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;  }

Note:

Note that when you use "col-md-offset-*" to offset the column to the right, make sure that the total number of columns and offset columns does not exceed 12, otherwise, the columns will be disconnected, for example:

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

In the code above, the total number of columns and offset columns is 3 + 3 + 3 + 4 = 13> 12, so the column is broken.

As shown in the sample code above, the result is as follows or can be seen in the rightmost result window (Move the cursor to the result window and click the displayed full screen button.):

 

<Div class = "container"> 

Column sorting
Column sorting actually changes the column direction, that is, changes the Left and Right floating, and sets the floating distance. In the mesh system of the Bootstrap framework, the class name "col-md-push-*" and "col-md-pull-*" are added. The asterisk indicates the number of columns to be moved. ).
Let's take 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 is left, col-md-8 is right, if you want to swap location, you need to move col-md-4 to the right of the 8 columns, that is, 8 offset, that is, in "<div class =" col-md-4 ">" add the class name "col-md-push-8" and call its style.

You also need to move the col-md-8 to the left the distance of 4 columns, that is, 4 offset, add the class name "col-md-8" on "<div class =" col-md-pull-4 "> ":

Bootstrap only sets left and right to achieve the positioning effect. In the boostrap.css file, the 1,127th rows ~ You can see the specific code in line 3:
.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;  }
<div class="container">  <div class="row">    <div class="col-md-4 col-md-push-8">.col-md-4</div>    <div class="col-md-8 col-md-pull-4">.col-md-8</div>  </div></div>

Column nesting
The grid system of the Bootstrap framework also supports column nesting. You can add one or more row containers in a column, and insert columns in this row container (Use columns as described earlier ). However, when the row container (row) in the column container is 100% in width, It is the width of the current external column. Let's look at a simple example:
<Div class = "container"> <div class = "row"> <div class = "col-md-8"> I nested a grid inside <div class = "row"> <div class = "row"> div class = "col-md-6"> col-md-6 </div> <div class = "col-md-6"> col-md-6 </div> <div class = "col-md-4"> col-md-4 </div> <div class = "row"> <div class = "col-md-4">. col-md-4 </div> <div class = "col-md-8"> inside 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>
The effect is as follows:

Note: The total number of nested columns must not exceed 12. Otherwise, a new line is displayed for the last column.
 
<Div class = "container"> <div class = "row"> <div class = "col-md-8"> I nested a grid inside <div class = "row"> <div class = "row"> div class = "col-md-6"> col-md-6 </div> <div class = "col-md-6"> col-md-6 </div> <div class = "col-md-4"> col-md-4 </div> <div class = "row"> <div class = "col-md-4">. col-md-4 </div> <div class = "col-md-8"> inside 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>