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

一、历史背景

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

二、基本结构

　　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栅格系统预设的数值，如列数、槽宽以及媒体查询阈值都是能够修改的。可定制化是全部优秀框架的另外一个共同品质。

 三、列排序与列偏移

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

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

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

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