bootstrap-解析栅格系统源码

bootstrap作为方便前端开发响应式网页的框架，其中最核心的内容就是栅格系统，栅格系统通过行（row）与列（column）的组合创建页面布局，每行最多12列 ，然后可以在每列里面方内容，达到响应式效果。

看我这篇博客的话最好还是先会用栅格，因为本篇会说一些实现原理和样式，先会用才能有想象空间。不过要是会用然后再来看我这篇也没多大意义。就存粹当作了解吧。不说废话，开始主题。

如何看源码

首先去官网下载，这里放中文网bootstrap
，如果喜欢英文官网也行，直接去官网下载就可以了，下载带源码字样的，然后需要的就是在下载的文件下的dist > css 打开 bootstrap.css就可以了

列的实现

使用了栅格之后会发现，只需要设置相应的类，就能在页面上占有一定的空间。并且最多不会超过12列，在不同的屏幕尺寸下能做出响应式调整。打开刚才的文件，拉到1615行，就可以看到关键的类。

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

可以看到这个样式涵盖了所有的列的类名。不同屏幕尺寸下都给设置了统一的样式。
在写列的时候，列也是div元素，div元素默认块级元素，默认沾满一行，bootstrap通过设置

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

浮动来达到排列在一行的效果。
列的宽度也分为十二个等级，并且列是会根据容器大小调整列的大小，所以列不会是固定值，1624行开始声明列的相对宽度。

.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}

设置百分比可以很容易的根据容器大小改变自身的宽度。
这个是在屏幕宽度小于768px的情况下的宽度，在1777行有媒体查询，

@media (min-width: 768px)

就是查询大于768px的情况。里面同样设置了在此屏幕大小的情况下，相应的列占据的宽度。接着1935行，2093行分别设置了屏幕大于992px，1200px情况下的列占据的宽度。

列排序

视线回到1660行，这里开始一直到1737行，都是设置列排序的相关样式。这里的 列排序并不是直接给列给个列排个顺序，而是通过改变列的位置来达到排序的目的。
首先看列排序的.col-md-push-* ，push就是推，就是把列往后推。

.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}

回首上面的列的实现里面，第一个内容就是所有的列都设置了一个统一的样式，其中position：relative；所以这里列排序就直接使用left偏移，根据相应的类偏移相应的位置。

接着是排序的.col-md-pull-* ，pull就是拉，可以直接理解把列往前拉。这里不看源码应该也能猜出源码的实现原理的。肯定就是设置right了。这里就不放源码了。没啥特别的。

列偏移

列偏移与列排序略有不同，列偏移主要是向后方偏移，并且会影响后面紧跟着的列。列排序只对自身有影响。列排序因为调整的是自身的定位，相对定位偏移了还是会占据之前的空间，所以不会影响其他的列。从1738行开始看。

.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0;
}

可以看出列偏移是通过设置左外边距来达到向后偏移的目的。因为使用的是外边距，所以后面的列也会受影响。

栅格系统主要就这写代码，此篇文章主要针对于3.x版本，最新的4.x版本实现原理不同。源码从1615到2250，代码也就六百多行，其中超过3/4重复代码，阅读起来其实没有一点压力，基本上瞟一眼就能知道相应的作用，看bootstrap的源码学习最大的就是命名，比如col-md-* ，col-xs-offset-* , row，container，可比A1，A2，A3要更明白意思。