Bootstrap栅格系统

栅格系统

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

在 .container （固定宽度） 或 .container-fluid （100% 宽度） 中 添加 行（row）,行（row）中添加列（column），内容放在列（column）中。

栅格系统可以在多种屏幕设备上工作，实现了响应式。

1. col-xs- 超小屏幕 手机（<768px）。
2. col-sm- 小屏幕 平板 。（≥768px 且 <992px）。
3. col-md- 中等屏幕 桌面显示器（≥992px且<1200px）。
4. col-lg- 大屏幕 大桌面显示器（≥1200px）。

使用如下：

效果：

可以明显看到看出每一行有12列
如果有一行列超过12列，多余的列所在的元素将被作为一个整体另起一行排列。
如果有一行列小于12列，少的列会空出来。

使用栅格参数可以构成一个响应式网页。

在不同设备下有不同的效果。
屏幕宽度≥1200px下，按col-lg- 分配的比例显示

屏幕宽度≥992px且<1200px下，按col-md- 分配的比例显示

屏幕宽度≥768px 且 <992px下，按col-sm- 分配的比例显示

屏幕宽度<768px下，按col-xs- 分配的比例显示

栅格系统简单容易控制,更加方便。

列偏移 col-*(lg、md、sm、xs)-offset-

使用col-*-offset- 可以将列向右侧偏移，实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。
没有加之前：


加上之后：

列排序

使用 .col-*-push- 和 .col-*-pull- 类就可以很容易的改变列（column）的顺序。