bootstrap栅格系统

一、概念：

①Bootstrap包括了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动扩展到最多12列

②栅格系统其实就是行和列的布局，网格状布局，通过一系列的行（row）与列（column）创建页面布局，你的内容就可以放入创建好的布局中。

二、行和列

①行是类名row，其中container容器默认有15px的左右内间距 ，row 填充父容器的15px的左右内间距 margin-left,margin-right -15px拉伸

  <div class="container">
      <div class="row">
        第一行
      </div>
      <div class="row">
        第二行
      </div>
  </div>

    .container{
        height: 100px;
        background: #ccc;
      }
      /* 推荐使用子代选择器 */
      .container>.row:first-child{
        height: 50px;
        background: green;
      }
      .container>.row:last-child{
        height: 50px;
        background: yellow;
      }

②列是类名col，col可以配合媒体查询使用，格式是col-屏幕大小-数字，其中：

• 屏幕大小 lg 代表大屏设备以上生效包含本身，比如col-lg-4
• 屏幕大小md 代表中屏设备以上生效包含本身，比如col-md-4
• 屏幕大小sm 代表小屏设备以上生效包含本身，比如col-sm-4
• 屏幕大小xs 代表超小屏设备以上生效包含本身，比如col-xs-4
• 数字代表占多少份，默认分成12等份 ，比如col-lg-8

 

   <div class="container">
      <div class="row">
        <div class="col-xs-2 col-sm-4 col-md-6 col-lg-8">第一列</div>
        <div class="col-xs-4 col-sm-4 col-md-3 col-lg-3">第二列</div>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-1">第三列</div>
      </div>
    </div>

     .container{
        height: 100px;
        background: #ccc;
      }
      .container>.row{
        height: 50px;
        background: green;
      }
      .container>.row>div{
        height: 50px;
        border: 10px solid #000;
      }

三、扩展功能

①栅格嵌套

    <div class="container">
      <div class="row">
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
        </div>
      </div>
    </div>

      .container{
        height: 100px;
        background: #ccc;
      }
      .container>.row{
        height: 50px;
        background: green;
      }
      .container>.row>div{
        height: 50px;
        border: 10px solid #000;
      }
      .container>.row>div>.row>div{
          height: 30px;
          border: 5px solid yellow;
      }
 

②列的偏移

    <div class="container">
      <div class="row">
        <div class="col-xs-4">第一列</div>
        <div class="col-xs-4 col-xs-offset-3">第二列</div>
      </div>
    </div>

      .container{
        height: 100px;
        background: #ccc;
      }
      .container>.row{
        height: 50px;
        background: green;
      }
      .container>.row>div{
        height: 50px;
        border: 10px solid #000;
      }
  

③列的排序

   <div class="container">
      <div class="row">
        <div class="col-xs-4 col-xs-push-8">第一列(push往后推)</div>
        <div class="col-xs-4 col-xs-pull-4">第二列（pull往前拉）</div>
      </div>
    </div>

      .container{
        height: 100px;
        background: #ccc;
      }
      .container>.row{
        height: 50px;
        background: green;
      }
      .container>.row>div{
        height: 50px;
        border: 10px solid #000;
      }