Bootstrap grid system Comprehension and summary

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

<div class="container-fluid">  <div class="row"> ... </div></div>

解释：为了寄予栅格系统合适的排列和padding，要把每一行“row”包含在一个容器中，而这个容器我们用class名为“container”或者“container-fluid”,这两个class是Bootstrap为我们事先设计好的

.container是固定宽度，居中显示:下面是Bootstrap中.container类的代码

.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中取，数字等于几，就占几份；

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

　　　　

 < Span class= "NT" > 
  (3) Advanced: Cell class There are other options , a total of four: 
 
. c0l-xs-regardless of the screen width, the cell is in one row, the width is set by a percentage, the test is on the phone, and the col-sm-screen is larger than 768px, the single Prompt is displayed on a line, the screen is less than 768px, exclusive line, trial on the tablet; 
. col-md-screen is larger than 992px, the cell is displayed on one line, the screen is less than 992px, exclusive line, trial on the desktop display; 
. col-lg-screen greater than 1200px , the cell is displayed on one line, the screen is less than 1200px, the exclusive row for large desktop displays, 
 
 The 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

　　　　　　　　　　

　　　　

Bootstrap grid system Comprehension and summary