bootstrap中的container row与col
比较好奇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的槽。结合图片看一下就一目了然了。