Bootstrap学习——栅格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增长，系统会自动分为最多12列。它包含了易于使用的预约义classe，还有强大的mixin用于生成更具语义的布局。

简介

栅格系统用于经过一系列的行（row）与列（column）的组合建立页面布局，你的内容就能够放入建立好的布局中。下面就介绍如下Bootstrap栅格系统的工做原理：

• “行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 使用“行（row）”在水平方向建立一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”能够做为行（row）”的直接子元素。
• 相似Predefined grid classes like .row and .col-xs-4 这些预约义的栅格class能够用来快速建立栅格布局。Bootstrap源码中定义的mixin也能够用来建立语义化的布局。
• 经过设置padding从而建立“列（column）”之间的间隔（gutter）。而后经过为第一和最后同样设置负值的margin从而抵消掉padding的影响。
• 栅格系统中的列是经过指定1到12的值来表示其跨越的范围。例如，三个等宽的列能够使用三个.col-xs-4来建立。

Responsive column resets

即使有上面给出的四组栅格class，你也难免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的状况。为了克服这一问题，建议联合使用.clearfix和响应式工具classe。

 <div class="row">
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3(经过调整浏览器的宽度或在手机上便可查看这些案例的实际效果。)</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>

 

列偏移

使用.col-md-offset-*能够将列偏移到右侧。这些class经过使用*选择器将全部列增长了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

嵌套列

为了使用内置的栅格将内容嵌套，经过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内便可实现。嵌套row所包含的列加起来应该等于12。

列排序

经过使用.col-md-push-* 和 .col-md-pull-*就能够很容易的改变列的顺序。