栅格系统 英文为 Grid Systems，也有翻译为 网格系统。 定义：运用固定的格子，遵循一定的规则，进行页面的布局设计，使布局规范简洁有规则。以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。1692年法国为提高印刷水平，以方格为设计基础，将一个印刷版面分成上千个小格，这就是最早的栅格雏形。再后来，慢慢演变成运用固定的格子设计版面的平面设计风格。不过对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。
-
bootstrap栅格系统 是一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
-
基础应用 按照不同屏幕划分为12 等份 行（row） 可以去除父容器作用15px的边距 xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大； 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列 每一列默认有左右15像素的 padding 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6"
-
栅格嵌套 栅格系统内置的栅格系统将内容再次嵌套 可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
-
列偏移 使用 .col-md-offset-* 类可以将列向右侧偏移
-
列排序 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
-
响应式工具
手机 (<768px) 平板 (≥768px) 中等屏幕 桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏