Detailed explanation of the grid system for Bootstrap learning

This article will introduce to you the grid system in Bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related recommendations: "bootstrap Tutorial"

The grid system in the bootstrap framework divides the container into 12 equal parts. When using it, you can recompile the LESS/SASS source code according to the actual situation to modify the value of 12. The working principle of the bootstrap framework's grid system:

1. The data row (.row) must be contained in the container (.container) so that it can be given appropriate alignment and padding

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

2. Columns (.column) can be added to the row (.row), but the sum of the number of columns cannot exceed the total number of equally divided columns (such as: 12)

<div class="container">
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-8"></div>
</div>
</div

3. The specific content should be placed Within the column container (.column), and only the column (.column) can be used as a direct child element of the row container (.row)

4. Create columns and columns by setting the padding (padding) spacing between them, and then offset the effect of padding by setting negative margins for the first column and the last stack

With responsive effects in the bootstrap grid system , which comes with four types of browsers (extra small screen, small screen, medium screen and large screen), and its breakpoints are 768px, 992px, 1220px

container (.container), for different Browser resolutions and widths are also different: automatic, 760px, 970px, 1170px;

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

Row container (.row) divides the row of the container into 12 equal parts, that is, columns. Each column has a padding-left: 15px and a padding-right: 15px; this also causes the padding-left of the first column and the padding-right of the last column to occupy a 30px line of medium width

.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 container (.row) defines margin-left and margin-right values ​​of -15px, which are used to offset the left padding of the first column and the right padding of the last column, so that the first and last columns are in line with the container (.container) There is no space between

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

Basic usage

Since the bootstrap framework uses different grid styles for different screen sizes, the following is Take the medium screen (970px) as an example.

1. Column combination

Column combination is to change the number to merge columns (the total number of columns cannot exceed 12), which is somewhat similar to the colspan attribute of the table; the column combination method is only Involves two features: Float in width percentage

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

The effect is as follows:

Ensure that all columns float left

.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 each column Combined width

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

2, column offset

Sometimes, we don’t want two adjacent columns to be close together, but we don’t want to use margin or Other technical means, this can be achieved using column offset (offset). To use column offset, just add the class name .col-md-offset-* (the asterisk represents the number of column combinations to be offset) on the column element, and the column with this class name will be offset, such as: in the column element Add .col-md-offset-4 to the column to indicate that the column is offset to the right by the width of 4 columns

<div class="container">
           <div class="row">
               <div class="col-md-4">1111</div>
               <div class="col-md-4 col-md-offset-2">111</div>
               <div class="col-md-2">333</div>
           </div>
           <div class="row">
               <div class="col-md-4 col-md-offset-4">列偏移</div>
               <div class="col-md-2">col-md-2</div>
               <div class="col-md-2">col-md-2</div>
           </div>
       </div>

The effect is as follows:

Implementation principle :

Use one-twelfth margin-left, there are as many margin-lefts as there are offsets

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

It should be noted that when using col-md-offset-* When right-shifting a column, make sure that the total number of columns and offset columns does not exceed 12, otherwise it will cause columns to break and display

4, column sorting

columns Sorting is to change the direction of the column and set the floating distance. In the bootstrap grid system it is done by adding the class name. The effects of col-md-push-* and col-md-pull-*

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

are as follows:

col-md-4 is on the left, col-md -8 is on the right. If you want to swap positions, you need to move col-md-4 to the right by 8 columns, that is, add the class name.col-md-push-8; at the same time, you need to move col-md-8 Move 4 columns to the left, that is, add the class name.col-md-pull-4

bootstrap only achieves the positioning effect by setting left and right.

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

5. Column nesting

Column nesting can add a column or make a row (row) container, and then insert it in this row container Column, in the row container (row) in the column container, when the width is 100%, it is the width of the current outer column

<div class="container">
       <div class="row">
           <div class="col-md-8">
               我在里面嵌套了一个网格
               <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">
               我在里面嵌套了一个网格
               <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 above is the detailed content of Detailed explanation of the grid system for Bootstrap learning. For more information, please follow other related articles on the PHP Chinese website!