1. Implementation principle

The realization principle of the grid system is very simple, just by defining the size of the container, dividing it into 12 parts (there are also 24 or 32 parts, but 12 is the most common), adjusting the margins inside and outside, and finally combining the media query, a powerful responsive grid system is made. The grid system in the Bootstrap framework splits the container into 12 pieces.

<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>
Copy the code

2. Working principle

The data rows (.row) must be contained in the.container to give them proper alignment and padding. Columns can be added to a row (.row), but the total number of columns cannot exceed the total number of bisected columns, such as 12. The concrete content should be placed inside the column container (.column), and only the column (.column) can be a direct child of the row container (.row). Padding creates the spacing between columns by setting the padding. The padding is then offset by setting a negative margin for the first and last columns.

A quick explanation: The outermost border, with a large white area, is the equivalent of the browser’s viewable area. The Bootstrap framework has a responsive effect in its grid system with four types of browsers (ultra-small, Small, medium and large) and its breakpoints (the cut-off point for pixels) are 768px, 992px and 1220px. The second border (1) is equivalent to the container (.container). The widths vary for different browser resolutions: Automatic, 750px, 970px, and 1170px. Bar 2 states that the container’s rows (.row) are divided into 12 equal portions, or columns. Each column has a padding-left: 15px (in pink) and a padding-right: 15px (in purple). This also results in the padding-left of the first column and the padding-right of the last column taking up 30px of the total width, which makes the page look ugly, although this is fine if you want to keep some spacing. The third bar is the row container (.row), which defines margin-left and margin-right values of -15px to offset the first column left margin and the last column right margin. Join the rows and columns together to see the effect of bar 4. This is what we expect, with no space between the first and last columns and the.container. The bar 5 just wants to show you that you can combine columns and columns as much as you want, but the sum of their combinations doesn’t exceed the total number of columns.

Create a gutter between columns by setting the padding attribute for the “.column “. The padding for the.container element is offset by setting a negative margin for the.row element, which indirectly cancels out the padding for the.column contained in the.row element.

3. Basic usage

A grid system is used for layout, which is essentially a combination of columns. There are four basic uses of the Bootstrap framework’s grid system.

Column composition simply means changing the number to combine the columns (rule: the total number of columns cannot exceed 12), similar to the colSPAN property of a table.

<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>
Copy the code

Implementing column composition is very simple and involves only two CSS features: float and width percentage.

4. Column offset

Sometimes we don’t want adjacent columns to be right next to each other, but we don’t want to use margins or other techniques. This can be done using the column offset function. Using column offsets is also very simple, just add the class name col-md-offset-* to the column element (where the asterisk represents the number of column combinations to offset), and columns with that class name will be offset to the right. For example, if you add col-md-offset-4 to a column element, the width of the column is moved four columns to the right. The realization principle is very simple, is to use 1/12 (1/12) margin-left. Then there are as many offsets as there are margin-left. Note that when using col-md-offset-* to offset a column to the right, ensure that the total number of columns and offset columns does not exceed 12, otherwise the column will be displayed as line breaking.

<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-2 </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 to the right of the four columns spacing < / div > < / div > < / div >Copy the code

Try making a grid:

1) A grid with 4 columns.

2) The first column occupies 2 grids without deviation.

3) The grids of the second and third columns are 2 grids wide and offset by 1 grid.

4) The fourth column occupies 3 grids and is offset by 1 grid.

<div class="row">
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2 col-md-offset-1">col-md-2 col-md-offset-1</div>
    <div class="col-md-2 col-md-offset-1">col-md-2 col-md-offset-1</div>
    <div class="col-md-3 col-md-offset-1">col-md-3 col-md-offset-1</div>
</div>
Copy the code

5. Column sorting

Column sorting is actually changing the direction of the column, changing the left and right float, and setting the float distance. In the grid system of the Bootstrap framework, this is done by adding the class names col-Md-push -* and col-Md-pull -* (where the asterisk represents the number of column combinations moved).

6. Column nesting

The grid system of the Bootstrap framework also supports column nesting. You can add one or more rows (.row) containers to a column and then insert columns into the row container (using columns as described earlier). But in the row container (.row) in the column container, a width of 100% is the width of the current outer column. The total number of nested columns also needs to follow no more than 12 columns. Otherwise, the last column will be displayed on a newline.

The appendix

Read the original article: blog.mazey.net/1959.html