比较好奇bootstarp是如何写响应式的也就是container row col是怎么形成的.先来看看container代码

container

.container { 
 padding-right: 15px; 
 padding-left: 15px; 
 margin-right: auto; 
 margin-left: auto; 
} 
@media (min-width: 768px) { 
 .container { 
   width: 750px; 
 } 
} 
@media (min-width: 992px) { 
 .container { 
   width: 970px; 
 } 
} 
@media (min-width: 1200px) { 
 .container { 
   width: 1170px; 
 } 
} 
.container-fluid { 
 padding-right: 15px; 
 padding-left: 15px; 
 margin-right: auto; 
 margin-left: auto; 
} 

这里是bootstrap中的container. 在正常的PC也就是大于1200px的情况下 container宽度是1170px 但是无论是1200px还是992,768px.这里都给container设置了一个margin-left,right:auto和paading-left,right:15px。 为什么? 先不急 我们来看看row是怎么写的

row

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

很简单.就一句话 给margin-right和left设置了一个-15px 抵消了container的padding 15px 在来看看 col-sm col-xs 之类的是怎么写的

col--

col-xx-xx的通用定义

所有分辨率下是如何定义.col-xx-xx的

.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; 
 min-height: 1px; 
 padding-right: 15px; 
 padding-left: 15px; 
} 

首先所有的col-xx-xx都要遵循一个规则.他们的规则是

  • 不脱离文档流但可以拥有left,right,top,bottom等属性设置(position:relative)
  • 设置了一个最小高度1px(min-height: 1px)
  • 设置了內右边距15px(padding-right:15px)
  • 这些了內左边距15px(padding-left:15px)

col-xs-xx

然后我们来看看通用分辨率下的.col-xs-xx的定义 因为.col-xs-xx是不需要考虑分辨率的

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { 
 float: left; 
} 
.col-xs-12 { 
 width: 100%; 
} 
.col-xs-11 { 
 width: 91.66666667%; 
} 
.col-xs-10 { 
 width: 83.33333333%; 
} 
.col-xs-9 { 
 width: 75%; 
} 
.col-xs-8 { 
 width: 66.66666667%; 
} 
.col-xs-7 { 
 width: 58.33333333%; 
} 
.col-xs-6 { 
 width: 50%; 
} 
.col-xs-5 { 
 width: 41.66666667%; 
} 
.col-xs-4 { 
 width: 33.33333333%; 
} 
.col-xs-3 { 
 width: 25%; 
} 
.col-xs-2 { 
 width: 16.66666667%; 
} 
.col-xs-1 { 
 width: 8.33333333%; 
} 
.col-xs-pull-12 { 
 right: 100%; 
} 
.col-xs-pull-11 { 
 right: 91.66666667%; 
} 
.col-xs-pull-10 { 
 right: 83.33333333%; 
} 
.col-xs-pull-9 { 
 right: 75%; 
} 
.col-xs-pull-8 { 
 right: 66.66666667%; 
} 
.col-xs-pull-7 { 
 right: 58.33333333%; 
} 
.col-xs-pull-6 { 
 right: 50%; 
} 
.col-xs-pull-5 { 
 right: 41.66666667%; 
} 
.col-xs-pull-4 { 
 right: 33.33333333%; 
} 
.col-xs-pull-3 { 
 right: 25%; 
} 
.col-xs-pull-2 { 
 right: 16.66666667%; 
} 
.col-xs-pull-1 { 
 right: 8.33333333%; 
} 
.col-xs-pull-0 { 
 right: auto; 
} 
.col-xs-push-12 { 
 left: 100%; 
} 
.col-xs-push-11 { 
 left: 91.66666667%; 
} 
.col-xs-push-10 { 
 left: 83.33333333%; 
} 
.col-xs-push-9 { 
 left: 75%; 
} 
.col-xs-push-8 { 
 left: 66.66666667%; 
} 
.col-xs-push-7 { 
 left: 58.33333333%; 
} 
.col-xs-push-6 { 
 left: 50%; 
} 
.col-xs-push-5 { 
 left: 41.66666667%; 
} 
.col-xs-push-4 { 
 left: 33.33333333%; 
} 
.col-xs-push-3 { 
 left: 25%; 
} 
.col-xs-push-2 { 
 left: 16.66666667%; 
} 
.col-xs-push-1 { 
 left: 8.33333333%; 
} 
.col-xs-push-0 { 
 left: auto; 
} 
.col-xs-offset-12 { 
 margin-left: 100%; 
} 
.col-xs-offset-11 { 
 margin-left: 91.66666667%; 
} 
.col-xs-offset-10 { 
 margin-left: 83.33333333%; 
} 
.col-xs-offset-9 { 
 margin-left: 75%; 
} 
.col-xs-offset-8 { 
 margin-left: 66.66666667%; 
} 
.col-xs-offset-7 { 
 margin-left: 58.33333333%; 
} 
.col-xs-offset-6 { 
 margin-left: 50%; 
} 
.col-xs-offset-5 { 
 margin-left: 41.66666667%; 
} 
.col-xs-offset-4 { 
 margin-left: 33.33333333%; 
} 
.col-xs-offset-3 { 
 margin-left: 25%; 
} 
.col-xs-offset-2 { 
 margin-left: 16.66666667%; 
} 
.col-xs-offset-1 { 
 margin-left: 8.33333333%; 
} 
.col-xs-offset-0 { 
 margin-left: 0; 
} 

okay 先不看这些代码.我们先来探讨个问题 当float:left和position:relative混合在一起会产生什么效果?

脱离文档流

定义和用法float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

脱离文档流的意思就是 当一个元素脱离文档流后 其他的元素进行排列的时候都会忽视这个元素 比如float和position:absolute那么float脱离文档流后.因为position:relative是没有脱离文档流的,那么position的元素最自动往上浮靠近float 来看一段代码.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
   <meta charset="UTF-8"> 
   <title>Document</title> 
   <style type="text/css"> 
       *{ 
           margin: 0; 
           padding: 0; 
           font-family: '微软雅黑' 
       } 
       .box1{ 
           width: 300px; 
           height: 300px; 
           background: red; 
       } 
       .floatPosition{ 
           position: relative; 
           width:100px; 
           height: 100px; 
           background:gray;  
       } 
   </style> 
</head> 
<body> 
   <div class="box1"> 
       <div class="floatPosition" style="background-color: gray;z-index: 2;float:left">1</div> 
       <div class="floatPosition" style="background-color: #432;left: 100px;">22</div> 
       <div class="floatPosition" style="background-color: black;left: 100px;">333</div> 
   </div> 
</body> 
</html> 

会产生如上图的效果.其中box1中的第一个div是设置了float的,第二个,第三个都是没有设置float. 那么我们改动下给第一个div加上一个left:120px 效果如下图 其中float是距离左边也就是box1有120个px像素的.因为设置了z-index:2 那么第一个div是会在第二个div上面的.那么为什么第三个div仍旧在下面而不是上去的呢?因为position:relative是没有脱离文档流的,所以第三个,第二个div仍旧独占一行.但是float是脱离文档流的所有独占一行的时候是不会考虑float的.因为同时设置了float和postion那么第一个div即拥有left,right,bottom,top这些属性设置 也拥有脱离文档流的功能.再设置一下 给第二个div加上float同是给第二个div宽度设置为201px 效果如下图 其中第三个div是浮上去了 因为是不考虑已经脱离文档流的元素 但是呢 第三个div上面的文字仍旧是考虑文档流的排列的 所以文字会在最下面.但是我们给第二个div设置了float为什么他还是没有浮上去呢?这就涉及到float的一个属性

假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

第一个float元素宽度是100px 第二个float元素宽带是201px 其中box1的宽带是300px; 所以100px+201px>300px 所以会浮动下去.bootstrap也是利用float属性来做自适应的.

col-sm-xx

@media (min-width: 768px) { 
 .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 
   float: left; 
 } 
 .col-sm-12 { 
   width: 100%; 
 } 
 .col-sm-11 { 
   width: 91.66666667%; 
 } 
 .col-sm-10 { 
   width: 83.33333333%; 
 } 
 .col-sm-9 { 
   width: 75%; 
 } 
 .col-sm-8 { 
   width: 66.66666667%; 
 } 
 .col-sm-7 { 
   width: 58.33333333%; 
 } 
 .col-sm-6 { 
   width: 50%; 
 } 
 .col-sm-5 { 
   width: 41.66666667%; 
 } 
...略 
} 

其中col-sm-xx是在屏幕最低分辨率为768px才设置的那么屏幕分辨率没有768px col-sm-xx宽度是多少呢?显而易见 在屏幕分辨率低于768px后 bootstrap是没有给他设置一个固定的宽度 也就是说无论是col-sm-10 还是col-sm-1这些宽度都是自适应的 而且都是独占一行的也就是没有设置float这个属性 仅仅是设置了position:relative这个属性

col-md-xx col-lg-xx原理都是一样的 只是设置的分辨率不同

container与row中的margin padding

其中container的属性为(测试分辨率大于1200px)

.container { 
 padding-right: 15px; 
 padding-left: 15px; 
 margin-right: auto; 
 margin-left: auto; 
} 
@media (min-width: 1200px) { 
 .container { 
   width: 1170px; 
 } 
} 

row的属性为

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

为什么这里要用负margin呢?我们来模拟下 不用负margin的情况

会发现row左右两边多出了15px的padding 这个是container设置的 那么为什么container要设置15px的padding呢 其是为了实现栅栏效果具体可以看这篇文章

注意啦,每个column 也会有15px的水平方向的 padding,也就是图片中黄色的部分,唉,先别急,会明白的。还记得上面提到的 row 的作用吗,colunmn 只能在 row 中生存,由于 row 的 margin 为-15px,那么位于两边的 column 就碰到了 container 的边界。但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container,同时 不同column的内容之间就有了30px的槽。结合图片看一下就一目了然了。