Bootstrap的栅格系统¬——基础布局

 

    行必须包含在.container或.container-fluid里面，前者是固定布局，后者是100%宽度布局。行的类是.row，通过行在水平方向创建一组列。

    内容应该放在“列”里，并且只有列可以作为行的直接子元素。

    如果一行包含的列多余12，多余的列所在的元素就会另起一行排列。

       Bootstrap的栅格系统可以在多种屏幕设备上工作，分界线为

           1、超小屏幕（手机）：<768px，列的类前缀为.col-xs-。最大列宽自动适应。

           2、小屏幕（平板）：≥768px，列的类前缀为.col-sm-。最大列宽62px。

           3、中等屏幕（桌面显示器）：≥992px，列的类前缀为.col-md-。最大列宽81px。

           4、大屏幕（大桌面显示器）：≥1200px，列的类前缀为.col-lg-。最大列宽97px。

    为了创建强大的动态布局，可以同时应用以上几种列的定义，来适应不同屏幕大小的设备。如：

<div class="row">

       <div class="col-xs-12 col-sm-6 col-md-8">

              .col-xs-12 .col-sm-6 .col-md-8

      </div>

      <div class="col-xs-6 col-md-4">

             .col-xs-6 .col-md-4

      </div>

</div>

     以上代码定义了当设备为手机时，显示两列cms系统，比例2:1，设备为平板类小屏幕时，只显示50%宽度的内容。设备为桌面显示器等中等屏幕时也显示2：1的两列。避免了只使用大屏幕类而使小屏幕显示时堆叠在一列中。