bootstrap栅格系统

前端学习之bootstrap栅格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统英文为“grid system"，也有人翻译为”网格系统
。它是指页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

1、栅格选项参数

栅格系统用于通过一系列的行（row）和列（column）的组合来创建页面布局，你的内容就可以放入这些建好的布局中。

不同类型、不同大小的屏幕的.container最大宽度是不同的，类前缀度分别为：超小屏幕（.col-xs-）、小屏设备（.col-sm-）、中等屏幕(.col-md-)、宽屏幕（.col-lg-）

其中行（row）必须放到container布局容器里面；每一列默认有左右15像素的padding值。

2、列嵌套

栅格系统内置的栅格系统将页面内容再次嵌套。简单的说就是一个列内再分成若干份小列。

例如我们可以通过添加一个新的row元素和一系列.col-sm-*元素列到已经存在的.col-sm-*元素内。

列嵌套加一行row，可以取消父元素的padding值。

3、列偏移

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

4、列排序

通过使用.col-md-push-*和.col-md-pull-*类就可以改变列（column）的顺序。