为了方便起见,我们通过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;
}

结合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-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% 宽度的布局。

Bootstrap响应式栅格系统设计的更多相关文章

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

    1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...

  2. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  3. Bootstrap响应式布局

    Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...

  4. 关于禁用bootstrap响应式解决方法

    前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...

  5. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  6. bootstrap响应式网页设计的9条基本原则!

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  7. bootstrap响应式前端页面

    技术:HTML+CSS+JS+bootstrap   概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...

  8. Bootstrap 响应式表格

    响应式表格 通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您 ...

  9. Bootstrap & 响应式

    要了解一个东西 就是要知道 它是什么? 干什么 ? 怎么用 ? 1.Bootstrap 简介   Bootstrap 是由Twitter(著名的社交网站)推出的前端开源工具包,它基于Html.CSS. ...

随机推荐

  1. nyoj 773-开方数 (pow)

    773-开方数 内存限制:64MB 时间限制:1000ms 特判: No 通过数:3 提交数:8 难度:3 题目描述: 现在给你两个数 n 和 p ,让你求出 p 的开 n 次方. 输入描述: 每组数 ...

  2. 领扣(LeetCode)检测大写字母 个人题解

    给定一个单词,你需要判断单词的大写使用是否正确. 我们定义,在以下情况时,单词的大写用法是正确的: 全部字母都是大写,比如"USA". 单词中所有字母都不是大写,比如"l ...

  3. 在VMware通过挂载系统光盘搭建本地yum仓库

    1.首先需要有一个VMware虚拟机: 2.进去虚拟机(这里用Linux下deCentOS进行演示): 3.用root账号进行登录,否则在根目录下没有一些操作权限: 4.打开终端: 5,输入命令“cd ...

  4. shell配置文件

    个人配置主要集中在-/.profile文件中 打开新的交互式shell时,配置文件的执行顺序是/etc/profile  /etc/bashrc  ~/.profile   最后是~/.bashrc ...

  5. RHEL7.2 安装Eclipse-oxygen Hadoop开发环境

    1 Eclipse-oxygen下载地址 http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/re ...

  6. vim-plug 安装 jedi-vim

    安装: Plug 'davidhalter/jedi-vim' :PlugInstall 我就在配置文件里写了一个配置项 let g:jedi#use_tabs_not_buffers = 1 进入定 ...

  7. 护网杯2019 mergeheap --pwn

    护网 又是签到 一天 这道题一开始 不懂得如何泄露 libc 信息,就蒙了  后来群里师傅也是刚刚好 做出 到这里 我就接着做了 . 先看下保护,发现  全开了 然后 就看下流程 大概 就是添加  c ...

  8. socket解决编码解码问题

    MySocket类: import socket class MySocket(socket.socket): # 继承自socket文件中的socket类,此时socket就是父类 def __in ...

  9. 关于Go defer的详细使用

    先抛砖引玉defer的延迟调用:defer特性: . 关键字 defer 用于注册延迟调用. . 这些调用直到 return 前才被执.因此,可以用来做资源清理. . 多个defer语句,按先进后出的 ...

  10. Djangoday2第二个app加减法

    第二个app 计算新建一个app在view定义显示的内容修改urls指定连接对应的视图测试另一种通过路径传参的方式访问网址路径传参的urls定义方法网址路径传参测试urls的urlnamedjango ...