Bootstrap笔记 栅格系统

Bootstrap的栅格系统是当网页运用Bootstrap框架后，应对响应式布局一个很有效的方法,对网页元素布局起了相当重要的作用。

简要来说，栅格系统就是将每一个div分为许多相同宽度的“列”。这样做的好处是div中的元素布局可以直接通过占有”列”的个数来控制元素的位置。具体的以后一一介绍。

1.如何创建栅格系统
首先，bootstrap为栅格系统提供了一个”容器”—-“container”，在container中加入”行”—“row”在row里加入合适分排列和padding。
（1）固定宽度

（2）100%宽度

（注：container-fluid表示容器宽度达100%）
2.创建栅格
a.在每一个行里插入一组”列”—“column”。
b. 通过列设置padding属性，从而设置列与列之间的间隔（可通过.row设置负值margin抵消掉.container设置的padding)
c.”col-A-B”
A.单元格类型：
lg（large）{屏幕>1200px 单元格在一行显示 屏幕<1200px 直接占一行 适用于大屏幕}
md（middle）{屏幕>992px 单元格在一行显示 屏幕<992px 直接占一行 适用于一般显示器}
sm（small）{屏幕>768px 单元格在一行显示 屏幕<768px 直接占一行 适用于平板}
xm（xsmall）{屏幕直接占一行 适用于手机屏幕}
B.栅格最多12列，也就是将父级div分成12列，B是选取列数
例：col-md-6 （在一般显示器显示下，获取父级div一半的面积）
具体细节上代码：

具体表现：
a.手机屏幕（xm）

b.平板（sm）

c.显示器屏幕（md）

我们要注意一下c，在同一级单元格类型B和C所占列数不足12列时，系统会自动补上，而如果下一个div的class元素所占列数大于4时，就会占新的一行进行显示。