Every day, Bootstrap must learn the grid system (layout) and bootstrap grid layout.

Every day, Bootstrap must learn the grid system (layout) and bootstrap grid layout.

1. Grid System (layout)
Bootstrap has a built-in responsive, mobile device-first streaming raster system. With the increase in screen devices or viewports, the system will automatically be divided into up to 12 columns.

Here I call the grid system in Bootstrap layout. It creates a page layout by combining a series of rows and columns, and then your content can be put into the layout you created. The following describes how the Bootstrap raster system works:

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

2. Use Rules
Bootstrap has a built-in set of responsive and mobile devices.

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.

3. grid options
The following shows how the Bootstrap raster system works on a variety of mobile devices.

As shown in the preceding figure, Bootstrap sets different styles for screens of different sizes (including mobile phones, tablets, and PCs, in this way, developers can have more choices during development. According to my understanding: if multiple style classes are used on an element, the element selects the most appropriate (matching the most ideal) style class based on different sizes. For example, two style classes are used for an element:. col-md-And. col-lg. As shown above

First case:Size "= pixel PX; select. col-lg.

Case 2:Size "= 992px and size" = pixel PX "is selected. col-md.

Case 3:If the size is 992px, neither style class will apply to the element.

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

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:

The column combination method is very simple. It only involves two CSS features: Floating and width 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;}/* defines 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%; }

5. 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-2 col-md-offset-4"> column to the right to move the spacing of the 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-4 col-md-offset-4"> column to the right to move the spacing of the four columns </div>

The following figure shows the sample code.

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.

The following figure shows the sample code.

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

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

This article uses the simplest case to analyze the layout points involved in the case, hoping to help you learn.