Bootstrap响应式栅格系统的设计原理

1、历史背景

　　Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架，于2011年开源。2012年发布的第二版中新增了12列栅格系统和响应式组件，2013年发布的第三版进一步改造为扁平化视觉风格和优先支持移动设备。把握潮流，与时俱进是所有优秀框架的共同品质。

2、基本结构

　　Bootstrap采取12列的栅格体系，根据主流设备的尺寸进行分段，每段宽度固定，通过百分比和媒体查询实现响应式布局。

　　Bootstrap划分了四种尺寸：超小屏（手机）、小屏（平板竖屏）、中屏（平板横屏）和大屏（PC），每一类中顶层包含块container的宽度都是固定的。还可以使用.container-fluid将固定宽度转换为连续的宽度（width=100%）。

　　这里有个疑问：为什么对于大屏设备，container的宽度要设计为1170px。既然是12列栅格，设计成1200px不是显得更规整、也更容易向产品和UI解释吗？

　　原来bootstrap为了避免内容占满屏幕，确保在1200px宽的设备两边留出一定的边距，因此将container的最大宽度设为1170px，并使用margin-left:auto和margin-right:auto将container居中，从而确保两边各留出15px的边距。所有列宽均设置为百分比，根本不考虑具体数值。所以if(你有整数情结){不要受整数情结的影响}。

　　Bootstrap的栅格系统是一个三层结构，除了外围的container和内部的column，中间还有一个夹层row，并且Bootstrap要求所有的column必须包含在row里面，这是为什么呢？

　　原来Bootstrap将所有元素的盒模型设置为了border-box：

　　因此container宽度为1170px，减去左右共30px的padding，于是container的内容宽度就只剩1140px，这下所有col栅格的百分比乘的都是1140而不是1170，为解决此问题，Bootstrap在container中新增了一个夹层row，通过使用负的margin增加row的宽度至1170px。这里用到了盒模型尺寸的计算原理：块元素左右外边距、左右border、左右内边距和width这七个值之和必须等于包含块的content width。row的包含块container的content width为1140px，因此对于row而言，就存在如下等量关系：

　　-15px+0+0+width+0+0+（-15px）= 1140

　　于是row的width就自动扩展到1170px了。

　　这样是不是显得有点多此一举呢？既然container左右两边都有15px的外边距了，为什么还要设计15px的内边距？如果没有这个内边距，不就不需要额外添一个夹层row了吗？

　　这里就是Bootstrap设计的精巧之处：因为栅格之间需要间隔，因此每个column栅格都设置了15px的padding：

　　这意味着每个column实际上也可以看成一个container！我们可以在任意一个column内再嵌套一个栅格系统，而无需再添加container，只需添加一个row即可，不要将row理解成“行”，它就是一个包含块而已。这样的三层结构使得Bootstrap成为了一个可以无限嵌套的响应式系统，每一个栅格都可以看做一个独立的系统，container只不过是那个最大的栅格而已。

　　另外，Bootstrap栅格系统预设的数值，如列数、槽宽以及媒体查询阈值都是可以修改的。可定制化是所有优秀框架的另一个共同品质。

 3、列排序与列偏移

　　Bootstrap将所有列的position都设成了relative，就在于可对列进行定位或排序，比如要将某一个列定位到12分之3处（即从第三、四列交界处开始），可以设置left:25%或者right:75%。Bootstrap已经预设好了相应的类名：

　　列偏移的不同之处在于使用margin，而被margin挤占的区域没办法安放其它的列。

　　以上就是Bootstrap栅格系统的所有内容。我把Bootstrap源码中与栅格系统无关的代码全部删除，做了一个洁版Bootstrap，方便研究和使用：

　　https://files.cnblogs.com/files/kidney/bootstrap.simplified.css