bootstrap中布局

参考逆心的博客，网址：http://www.cnblogs.com/kissdodog/p/3929903.html

1 网格系统

Bootstrap把一个页面分为12列，分别占3、6、3列。

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

其中：col-xs为额外的小设备<768px、col-sm小型设备平板电脑>=768px、col-md中型设备台式电脑>=992px、

col-lg 大型设备台式电脑>=1200px

2 响应式网格

  <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
    </div>

• 当屏幕宽度u≥1200px时，bootstrap会自动选用col-lg-*这个class；
• 当屏幕宽度u≥992px时，bootstrap会自动选用col-sm-*这个class；
• 当屏幕宽度u≥768px时，bootstrap会自动选用col-md-*这个class；
• 当屏幕宽度u<768px时，bootstrap会自动选用col-lg-*这个class；