Bootstrap响应式栅格系统设计

Posted 2022-12-31 rencoo

为了方便起见，我们通过1200px宽的屏幕来讲解bootstrap中container、row、col的css属性值为何这样设置的原理

在1200px屏幕中为何container的宽度设置为1170px?

为了在1200px宽的设备两边留出一定的边距，因此将container的宽度设置为1170px，同时margin-left:auto和margin-right:auto将container居中，从而确保屏幕两边各留出15px的边距；

@media (min-width: 1200px) 
  .container 
    width: 1170px;
  

.container 
  padding-right: 15px;/*下文解释为何padding设置为15px*/
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

为何col要留出15px的padding-left与padding-right？

为了创建栅格列与列之间的间隔(gutter)，因此将col的padding-left与padding-right均设置为15px；

.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;/*下文解释为何要设置position为relative*/
  min-height: 1px;/*下文解释为何min-height设置为1px*/
  padding-right: 15px;
  padding-left: 15px;


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

.col-md-12 
    width: 100%;

.col-md-11 
    width: 91.66666667%;

.col-md-10 
    width: 83.33333333%;

.col-md-9 
    width: 75%;

.col-md-8 
    width: 66.66666667%;

.col-md-7 
    width: 58.33333333%;

.col-md-6 
    width: 50%;

.col-md-5 
    width: 41.66666667%;

.col-md-4 
    width: 33.33333333%;

.col-md-3 
    width: 25%;

.col-md-2 
    width: 16.66666667%;

.col-md-1 
    width: 8.33333333%;

既然container左右两边都有15px的外边距了，为何还要设计15px的内边距呢？

原来，bootstrap通过将col看做一个容器，往里面再嵌入12个col(一个栅格系统)，以此实现嵌套列的功能，从而达到无限嵌套的目的；

因此从某种程度上，bootstrap把container当做一个最大的col(想象一下container中放一个col-12的情景，此时两者的padding与width均一致)，所以container和col一样，其padding-left和padding-right也均被设置成15px，从而达到container与col相统一的目的。

那为何bootstrap还设计了row，并且要求row必须包含在.container(固定宽度)中呢？

.row 
  margin-right: -15px;
  margin-left: -15px;


.row:before,
.row:after 
   clear: both;/*用于清除浮动;*/

还记得，刚刚为了统一处理container与col而将container的左右内边距设置为15px的操作吗？由于bootstrap将所有元素的盒模型都设置为了boeder-box

* 
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

*:before,
*:after 
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

上述15px的操作导致了container的content width从1170px，变成1140px，这下导致所有col栅格的百分比乘的都是1140而不是1170了；因此bootstrap在container中新增了row这个夹层，通过设置负值 margin从而抵消掉为 container 元素设置的 padding，使得row的宽度增加至1170px，从而使得col栅格的百分比乘的都是正确的1170；(也就间接为row所包含的col抵消掉了padding);

这里用到了盒模型尺寸的计算原理：块元素左右外边距、左右border、左右内边距和content width这七个值之和必须等于包含块的content width。row的包含块container的content width为1140px，因此对于row而言，就存在如下等量关系：

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

因此，row的width就自动扩展到1170px了。

为何col要设置position为relative呢？

为了实现列定位或列排序

.col-md-pull-12 
    right: 100%;

.col-md-pull-11 
    right: 91.66666667%;

.col-md-pull-10 
    right: 83.33333333%;

.col-md-pull-9 
    right: 75%;

.col-md-pull-8 
    right: 66.66666667%;

.col-md-pull-7 
    right: 58.33333333%;

.col-md-pull-6 
    right: 50%;

.col-md-pull-5 
right: 41.66666667%;

.col-md-pull-4 
    right: 33.33333333%;

.col-md-pull-3 
    right: 25%;

.col-md-pull-2 
    right: 16.66666667%;

.col-md-pull-1 
    right: 8.33333333%;

.col-md-pull-0 
    right: auto;

.col-md-push-12 
    left: 100%;

.col-md-push-11 
    left: 91.66666667%;

.col-md-push-10 
    left: 83.33333333%;

.col-md-push-9 
    left: 75%;

.col-md-push-8 
    left: 66.66666667%;

.col-md-push-7 
    left: 58.33333333%;

.col-md-push-6 
    left: 50%;

.col-md-push-5 
    left: 41.66666667%;

.col-md-push-4 
    left: 33.33333333%;

.col-md-push-3 
    left: 25%;

.col-md-push-2 
    left: 16.66666667%;

.col-md-push-1 
    left: 8.33333333%;

.col-md-push-0 
    left: auto;

结合col的position为relative的属性，通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

那为什么col要设置一个min-height为1px呢？

这是因为每个col为了保持占有自己的格子(就算没有内容，也占该有的栅格)；如果不设置min-height为1px，在col没有任何内容的情况下，后面有内容的col会float到前面没有内容的col的栅格位置，这是我们不希望看到的。

好了，到这里我们就解释了bootstrap的栅格系统中最重要的三个部分container、row和col它们样式设置的原理。

另外，关于列偏移

.col-md-offset-12 
    margin-left: 100%;

.col-md-offset-11 
    margin-left: 91.66666667%;

.col-md-offset-10 
    margin-left: 83.33333333%;

.col-md-offset-9 
    margin-left: 75%;

.col-md-offset-8 
    margin-left: 66.66666667%;

.col-md-offset-7 
    margin-left: 58.33333333%;

.col-md-offset-6 
    margin-left: 50%;

.col-md-offset-5 
    margin-left: 41.66666667%;

.col-md-offset-4 
    margin-left: 33.33333333%;

.col-md-offset-3 
    margin-left: 25%;

.col-md-offset-2 
    margin-left: 16.66666667%;

.col-md-offset-1 
    margin-left: 8.33333333%;

.col-md-offset-0 
    margin-left: 0;

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

另外，关于流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。