bootstrap-栅格布局

Bootstrap栅格布局
了解Bootstrap栅格布局是使用bootstrap的基础。bootstrap将屏幕分为12等分，在具体的div中，可以设置div所占等分的数字确定其在屏幕中占有的宽度。

<div class="row“>     <!--表示12等分分成8和4--> 
<div class="col-md-8" style="border:1px solid black;height:100px;"></div>
      <div class="col-md-4" style="border:1px solid black;height:100px;"></div>
  </div>

布局屏幕分类
bootstrap是全响应技术，对于不同的显示屏幕尺寸，bootstrap提供不同的栅格布局的属性
超小屏幕–手机(<768px) col-xs-
小屏幕-平板（>768px）col-sm-
中等屏幕 桌面显示器（>=992px) col-md-
大屏幕 大桌面显示器（ >=1200px） col-lg-

多个布局属性
如果想让一个div在不同的屏幕中占有不同的的带宽，通过写多个类别的布局属性，从而让该div在不同的屏幕中呈现不同的屏宽。

  <div class="row">
      <div class="col-md-8 col-xs-6 col-lg-4"></div>
  </div>