bootStrap栅格系统

BootStrap总结

1、栅格系统的总结

流式布局容器

<div class="container"></div>
<div class="container-fluid"></div> 

媒体查询

@media screen and (min-width: 1280px) {
    body>.container {
        width: 1280px;
    }
}
​
//大于1280px的时候执行的

重要的理解列偏移

<div class="col-md-3"></div>
<div class="col-md-6 col-md-offset-3"></div>

列嵌套

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排序[推拉]

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>