bootstrap笔记之十二栅格系统

12栅格系统：

.container作用：元素居中，内补15px，其宽度是响应式的，不会占据整个页面。

.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container { width: 750px; /*小型屏幕时,container样式的宽度*/ }
}
@media (min-width: 992px) {
    .container { width: 970px; /*中型屏幕时,container样式的宽度,缩小min-width范围*/}
}
@media (min-width: 1200px) {
    .container { width: 1170px; /*大型屏幕时,container样式的宽度,再次缩小min-width范围*/}
}

行样式（.row）

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

.row抵消了.container的内补，使其内容扩充到整个.container

列样式（.col-{xs|sm|md|lg}-*）

.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; /*确保12个列都是左浮动*/
}
/*定义每个组合的宽度百分比*/
.col-md-12 { width: 100%;}
.col-md-11 { width: 91.66666666666666%;}
.col-md-10 { width: 83.33333333333334%;}
.col-md-9 { width: 75%;}
.col-md-8 { width: 66.66666666666666%;}
.col-md-7 { width: 58.333333333333336%;}
.col-md-6 { width: 50%;}
.col-md-5 { width: 41.66666666666667%;}
.col-md-4 { width: 33.33333333333333%;}
.col-md-3 { width: 25%;}
.col-md-2 { width: 16.666666666666664%;}
.col-md-1 { width: 8.333333333333332%;}

列样式：

• 左浮动
• 按父元素宽度百分比设置该元素宽度
• 左右各padding 15px

列样式的元素的宽度，只与父元素宽度有关，同时是左浮动的，col-xs-6，则表示宽度为父元素的6/12。

• xs：表示自适应，没有最大列宽，始终水平排列。
• sm：最大列宽60px；
• md ：最大列宽78px；
• lg：最大列宽95px；

列偏移与列排序

列偏移（.col-{xs|sm|md|lg}-offset-*）是通过margin-left实现列的偏移，比如.col-xs-offset-5意味着该元素margin-left了父元素的5/12;
列排序（.col-{xs|sm|md|lg}-{push|pull}-*）是分别通过left和right改变元素的位置，比如.col-xs-push-5是指将该元素向左移动位移父元素宽度的5/12；

.container .row .col-md-*嵌套组合实例：

<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-6</div>
            <!--由于这12个div都一样,所以这里省略了其他10个-->
        <div class="col-md-1">.col-md-6</div>
    </div>
</div>

.row嵌套实例

<div class="row">
    <div class="col-md-9">
        Level 1: .col-md-9
        <div class="row">
            <div class="col-md-6">Level 2: .col-md-6</div>
            <div class="col-md-6">Level 2: .col-md-6 </div>
        </div>
    </div>
    <div class="col-md-3"></div>
</div>

因为row平衡掉了col-* padding的15px，所以row的内容是父元素的100%