Bootstrap响应式栅格系统设计

为了方便起见,我们通过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 {
    width1170px;
  }
}
.container {
  padding-right15px;/*下文解释为何padding设置为15px*/
  padding-left15px;
  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-height1px;/*下文解释为何min-height设置为1px*/
  padding-right15px;
  padding-left15px;
}

.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 {
    width100%;
}
.col-md-11 {
    width91.66666667%;
}
.col-md-10 {
    width83.33333333%;
}
.col-md-9 {
    width75%;
}
.col-md-8 {
    width66.66666667%;
}
.col-md-7 {
    width58.33333333%;
}
.col-md-6 {
    width50%;
}
.col-md-5 {
    width41.66666667%;
}
.col-md-4 {
    width33.33333333%;
}
.col-md-3 {
    width25%;
}
.col-md-2 {
    width16.66666667%;
}
.col-md-1 {
    width8.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 {
    right100%;
}
.col-md-pull-11 {
    right91.66666667%;
}
.col-md-pull-10 {
    right83.33333333%;
}
.col-md-pull-9 {
    right75%;
}
.col-md-pull-8 {
    right66.66666667%;
}
.col-md-pull-7 {
    right58.33333333%;
}
.col-md-pull-6 {
    right50%;
}
.col-md-pull-5 {
right41.66666667%;
}
.col-md-pull-4 {
    right33.33333333%;
}
.col-md-pull-3 {
    right25%;
}
.col-md-pull-2 {
    right16.66666667%;
}
.col-md-pull-1 {
    right8.33333333%;
}
.col-md-pull-0 {
    right: auto;
}
.col-md-push-12 {
    left100%;
}
.col-md-push-11 {
    left91.66666667%;
}
.col-md-push-10 {
    left83.33333333%;
}
.col-md-push-9 {
    left75%;
}
.col-md-push-8 {
    left66.66666667%;
}
.col-md-push-7 {
    left58.33333333%;
}
.col-md-push-6 {
    left50%;
}
.col-md-push-5 {
    left41.66666667%;
}
.col-md-push-4 {
    left33.33333333%;
}
.col-md-push-3 {
    left25%;
}
.col-md-push-2 {
    left16.66666667%;
}
.col-md-push-1 {
    left8.33333333%;
}
.col-md-push-0 {
    left: auto;
}

结合colpositionrelative的属性,通过使用 .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-left100%;
}
.col-md-offset-11 {
    margin-left91.66666667%;
}
.col-md-offset-10 {
    margin-left83.33333333%;
}
.col-md-offset-9 {
    margin-left75%;
}
.col-md-offset-8 {
    margin-left66.66666667%;
}
.col-md-offset-7 {
    margin-left58.33333333%;
}
.col-md-offset-6 {
    margin-left50%;
}
.col-md-offset-5 {
    margin-left41.66666667%;
}
.col-md-offset-4 {
    margin-left33.33333333%;
}
.col-md-offset-3 {
    margin-left25%;
}
.col-md-offset-2 {
    margin-left16.66666667%;
}
.col-md-offset-1 {
    margin-left8.33333333%;
}
.col-md-offset-0 {
    margin-left0;
}

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

另外,关于流式布局容器

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

posted @ 2019-10-07 01:17  rencoo  阅读(...)  评论(...编辑  收藏