I'm learning bootstrap, mainly for its grid system. For its other css, it's not very useful.

Grid system, generally speaking, is to divide the web page into 12 columns to adapt to the mobile and PC terminals, but it is mobile devices first, design smaller widths first, and add elements as the screen size increases.

Working Principle and Corresponding Specification

1. First, we need to define div as. container class in order to get proper alignment and padding.
2. Use row again to wrap the required 12 columns
3. The content we want to add is all added to the column, such as. col-xs-4.

The following is the basic grid structure, knowing that the grid we write can be based on this:

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

The class "col--" of the columns in the code is more important, and the following are used for each case.

col-xs -: Mobile phones for ultra-small devices < 768px; div display has always been horizontal

col-sm-: For small device tablets 768px-992px,div starts with folding, breakpoint above is horizontal

col-md-: For desktop computers of medium-sized equipment, 992px-1200px,div starts with folding, and above breakpoint is horizontal.

col-lg - > 1200px for desktop computers with large equipment, div starts with folding, and above breakpoint is horizontal

Column reset

The so-called response is to display corresponding to different screens, which requires different screens to display various div s. The following code is to display two rows and two columns under the ultra-small screen, and one row and four columns on the screen above the small device.

<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         </p>
      </div>



      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
         </p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         </p>
      </div>
   </div>
</div>

Column migration
Generally speaking, column offsets are used for large screens, using the. col-md-offset-* class. These classes add * columns to the left margin of a column, where * ranges from 1 to 11.
The following example shows six columns on a small screen, without offset, but three columns on a large screen.

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-xs-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet
            </p>
        </div>
    </div>
</div>

Nested columns

Nested columns are simply grids with a contanier 12 column nested in the column. Nested grids are used in the same way as ordinary grids.

That's the most basic thing about raster systems. In the next section, I'll show you some practical tools for responding.