基本的Bootstrap框架，可以适用于响应式布局，比如星巴克

1.对布局的四个容器的范围划分

        Ⅰ.  超小屏(100% )

        Ⅱ.  小屏（ >= 768px） 宽度定为750px

        Ⅲ.  中屏  ( >= 992px)    宽度定为970px

        Ⅳ.  大屏  ( >= 1200px)    宽度定位1170px

2.最核心的栅格系统

        1.通过一系列的行(row)和一系列的列(column)这种相互组合的方式来布局和创建页面的

        2.一般情况下，把屏幕分为1~12等分

        3.行row:可以去除父容器作为15px的边距

        4.列column:如果大于12的话，多余的列里所包含的元素会作为一个整体另起一页

        5.小屏幕的列：        .col-sm-

           中等屏幕的列        .col-md-

           大屏幕                   .col-lg-

           超大屏幕               .col-xl-

6.设置不同行的相应列宽度

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (更宽-12格中占6格，其它6格另外两列平分)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

  7. 设置等列多行

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>