bootstrap 网格系统

网格系统概念

网格就是一种组织内容，让网站易于浏览，减轻用户端负担的系统

网格系统分为行和列

行必须放在.container class    内容则必须放在列中  列是行的直接子元素 

媒体查询

媒体查询：基于某种条件使用相应的样式

比如@media (min-width:@screen-sm-min){ 相应的样式}

以及@media(min-width:@screen-sm-min)and(max-width:@screen-sm-max){相应的样式}

基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>//col-md-6
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

同一个continer里col之和必须是12

偏移列

使用.col-md-offset-*来进行列的偏移 ，其原理是把这个列的左外边距增加*列，范围为1~11

嵌套列

在列中嵌套时，需要在原来的col  class中加入新的row class然后在新的row中加入嵌套的col

列排序

通过  .col-md-push-*  和  .col-md-pull-*可以改变列的顺序