基于css理解bootstrap栅格布局-1000字

1. 先制造一个容器

先制造一个“容器”，取类名为.container，用来装各种东西（盒子呀）；
对于CSS来说，这个容器固定了宽度，其宽度取决于媒体查询(见代码1.1)。

代码1.1

  @media (min-width: 769px) { 
    width: 750px;       
  }
  @media (min-width: 992px) {  
    width: 970px;       
  }
  @media (min-width: 1200px) {  
    width: 1170px;       
  }

2. 制作删格布局

有了容器的宽度，就可以进行栅格布局了。

2.1 行的规定

先规定”行“的样式，取类名为.row，行的样式先通过.clearfix清除浮动来规定它的块级元素特征——独占一行。

2.2 列的规定

在一个<div class=".row"></div>里面，可以装的盒子先是“列”。

2.2.1 列是通过浮动来形成的

我们在css布局块级元素时，如何进行列布局成了我们经常的困惑，有通过浮动布局的，也有通过flex伸缩布局的，而bootstrap是通过浮动+宽度固定的方式来布局各种列，即全部float:left;来实现。此外，不需要担心浮动是否清除的问题，因为在制造“行”时就已经有.clearfix清除浮动了。

2.2.2 列的宽度规定

如何分配一行中列的宽度呢？在bootstrap中是通过各种各样的类来规定的。比如，我规定某个盒子在PC端是一行的1/2，在手机端是一行的100%。那么该div的类就可以添加“.col-md-6 .col-xs-12”。在这里6和12就是一行的列数，如一行分12列，每一列是1/12, 6就是6/12个宽度。
那么如何才能保证一行中的列宽不会超出呢，通过分成12列，在不同媒体下不同的1/12宽度的具体数值是不同的，但1/12的百分比8.33%却是相同的，所以,以媒体为xs手机端为例，通过百分比的方式规定每个.col-xs-1 .col-xs-2 … .col-xs-12宽度值就可以保证一列中全部加起来刚好是一行的宽度。
在css中，宽度值取百分比%是相对于外层盒子的宽度，在bootsrap中，列的外层是行，但行没有指定宽度，所以就看容器，而容器在刚刚就说了它很重要的作用就是根据媒体查询来规定本身宽度，所以列宽的百分比是通过容器的宽度来计算的。

2.2.3 列的偏移和排序

每个列都浮动也是列的共同样式，但为了实现列的偏移和排序，列还需要有很多共同样式。
在bootstrap中，它是通过相对定位的方式，然后每个列就可以通过margin-left取值的大小来控制列偏移，在应用中表现为加一个.col-xs-offset-1~12来实现，通过left：__%;/right:__%来控制列顺序（排序），在应用中表现为加一个.col-xs-pull/push-1~12 来实现。