First contact with the magical bootstrap grid system _javascript skills

This article will mainly introduce the bootstrap grid system.

The realization of grid system is through the definition of container size, divided into 12 (or 24, 32, but 12 is the most common), and then adjust the internal and external margins, and finally combined with media inquiries, the system made a powerful response grid system.

The grid system in Bootstrap is to divide the container flat into 12 parts.

The bootstrap grid system is used for layout, which is actually a combination of columns, there are four basic uses:

1. Column combination

Change numbers to merge columns (principle: The sum of the columns cannot exceed 12), for example:

 <! DOCTYPE html>  
 

The effect chart is as follows:

2. Column Offset

Add the class name "col-md-offset-*" to the column element (where the asterisk represents the number of column combinations to offset), and the column with that class name is shifted to the right.

<div class= "Container" >
 <!--columns move the spacing of four columns to the right-->
 <div class= "Row" >
  <div class= "col-md-4 ">.col-md-4</div>
  <div class=" col-md-2 col-md-offset-4 > Columns move four columns to the right of the space </div>
  <div class= "Col-md-2" >.col-md-3</div>
 </div>
</div>

<!--occurrence of a row break-->
< 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 moves the spacing of four columns to the right </div>
  <div class= "Col-md-2". col-md-3</div>
 </div>
 <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>
</div>

The effect chart is as follows:

3. Column sorting

Column sort is to change the direction of the column, change the left and right float, and set the floating distance. The bootstrap is implemented by adding the class name "col-md-push-" and "col-md-pull-" (where the asterisk represents the number of moved column combinations).

<! DOCTYPE html>
 
 

4. Nesting of columns

<! DOCTYPE html>
 
 

The effect chart is as follows:

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

Series of articles:

First contact with the magical Bootstrap Foundation typesetting http://www.jb51.net/article/89278.htm
First contact with the magical bootstrap form http://www.jb51.net/article/89330.htm

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.