栅格系统

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

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

Bootstrap中定义了一套响应式的网格系统，

其使用方式就是将一个容器划分成12列，

然后通过col-xx-xx的类名控制每一列的占比

栅格系统 - row类

因为每一个列默认有一个15px的左右外边距

row类的一个作用就是通过左右-15px屏蔽掉这个边距

栅格系统 - col-**-*类

col-xs-[列数]：在超小屏幕下展示几份

col-sm-[列数]：在小屏幕下展示几份

col-md-[列数]：在中等屏幕下展示几份

col-lg-[列数]：在大屏幕下展示几份

xs : 超小屏幕 手机 (<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面显示器 (≥992px)

lg : 大屏幕 大桌面显示器 (≥1200px)

按钮样式生成

http://blog.koalite.com/bb

可以通过界面生成一个新的按钮样式

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

显示与隐藏

BS_栅格系统&列偏移&显示与隐藏