Hack in compatible CSS

Summary of Bootstrap grid system learning

The bootstrap framework is one of the most Popular front-end frameworks today, and Bootstrap is powerful, easy to learn, and well-fit for practical applications.

Just bootstrap content more, novice often can not quickly skilled use of bootstrap.

Here, I'm going to be very important to the bootstrap. The raster system is an example-guided summary:

　　

(1) First step: Creating a container for a raster system

<divclass="Container-fluid"> < Div class= "Row" > ... </div> </div>

 explanation: In order to place the appropriate arrangement and padding of the grid system, each row" row "is included in a container, and this container we use the class name" container "or" Container-fluid ", These two classes are bootstrap for our pre-designed 




    

.container-fluid是 100% 宽度：下面是Bootstrap中.container-fluid类的代码

(2)第二步：创建合适的栅格系统

<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>
<div class= "Row" >
<div class= "Col-md-8" >.col-md-8</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-4" >.col-md-4</div>
<div class= "Col-md-4" >.col-md-4</div>
</div>
<div class= "Row" >
<div class= "Col-md-6" >.col-md-6</div>
<div class= "Col-md-6" >.col-md-6</div>
</div>

解释：上面这段是我从Bootstrap官网复制下来的，每一个“row”代表一行，而内部的“col-md-数字”代表一个单元格；
　　　　
　　　　Bootstrap把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份；

　　　　合理的选择单元格的数字配置，再往单元格中添加我们想要的内容，这样一个栅格系统就完成了！

　　　　

 
  (3) Advanced: Cell class There are other options , a total of four kinds: 
 
 col-sm-screen is larger than 768px, the cell is displayed on one line ; When the screen is less than 768px, the exclusive line; 
 col-md-screen is larger than 992px, the cell is displayed on one line; When the screen is less than 992px, the exclusive row ; 
 col-lg-screen is larger than 1200px, the cell is displayed on one line, the screen is less than 1200px, exclusive line, suitable for large desktop display; 
 
 above can be clearly understood by the following code: 
  

<div class= "Container" >
<div class= "Row" >
<div class= "col-xs-12 col-sm-6 col-md-8" >.col-xs-12. Col-sm-6 .col-md-8</div>
<div class= "col-xs-6 col-md-4" >.col-xs-6 .col-md-4</div>
</div>
<div class= "Row" >
<div class= "col-xs-6 col-sm-4" >.col-xs-6 .col-sm-4</div>
<div class= "col-xs-6 col-sm-4" >.col-xs-6 .col-sm-4</div>
<div class= "col-xs-6 col-sm-4" >.col-xs-6 .col-sm-4</div>
</div>
</div>

When the screen is larger than 992px:. Col-md-8 and. Col-md-4 are still in scope, as follows

　　　　　　

When the screen is between 769px-992px:. Col-md-has lapsed, while. col-sm-is still in range, as follows

When the screen width is less than 768px, the. col-sm-has expired only. Col-xs-is not affected by the screen width, this time by the. col-xs-function, as follows

　　　　　　　　　　

Hack in compatible CSS