Bootstrap布局之网格系统

一.Bootstrap网格系统工作原理

Bootstrap的网格系统是指将页面布局划分为等宽的列。

随着屏幕或视口尺寸的增加，系统会自动分为1~12列。

• 网格系统用于通过一系列的行（row）与列(column)的组合来创建页面布局。
• 开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。
• 网格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子(布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。

Bootstrap的网格系统使用一系列容器类（container)，行(row）和列( column）的组合来创建页面布局。

●网格中每一行需要放在设置了.container或.container-fluid类的容器中。

●使用行.row来创建水平的列组。并且行必须包含在布局容器中，以便其赋予合适的排列和内补

●列使用样式.col-*-*，创建一组列并且只有列可以作为行的直接子元素。

网格案例：

 案例说明：

(1)本例中，一共显示了4行内容，网页内容整体居中显示。容器container 包含row,行row包含列col-sm-*。

(2)col-sm-*为列，表示占了*号列的宽度，值可以是1~12。 例如，col-sm-3表示该列占了12列中3列的宽度。

(3)col-sm-为小型设备列的前缀。依此类推，col-md- 为中型设备列的前缀，col-lg-为大型设备列的前缀，col-xl- 为超大型设备列的前缀。

二.响应式网格

网格系统前缀--案例

在小型设备上(>576px)效果图

在超小型设备上（<576px）效果图

 

三.列嵌套 

 栅格系统中内置的栅格系统可以将内容再次嵌套。

 Bootstrap网格系统支持列嵌套，即在一个列里可以再定义一个或多个行。内部嵌套的行的宽度为100%，也就是当前外部列的宽度。

案例：

 效果图：

四.列偏移

为了让两个相邻的列元素有一定的间隔，除了给元素设置外边距以外，还可以通过Bootstrap中提供的列偏移功能来实现。列偏移通过offset-* -*类来设置。第一个*可以是sm、md、lg、 xl,表示屏幕设备类型，第二个*可以是1到11的数字，表示向右偏移的列数。 

例如，为了在大屏幕显示器上向右偏移2列、可以使用ofet -md-2类。这些类会把一个列的左外边距( margin)增加2列，也就是往右移了2列。

例子：

 上图第1行中，第2列向右偏移了3列。第2行中，第1、2列都向右偏移了了列。第3行中，第1列向右偏移了3列，第2列向右偏移了3列，但是偏移列和显示列的总和超过了12列，所以显示到下一行。

 四.重排序

Bootstrap4提供了.order-*类控制网页元素的排列顺序。
.order-*类从.order-1（排在最前）到.order-12(排在最后）一共12个级别。这些类是响应式的，可以按断点设置顺序（例如.order-1.order-md-2）。如果元素没有定义.order-*类，则默认排在前面。

例子:

 效果图：

 Bootstrap4中还提供了order- first类、order- -last 类，可以快速更改一个元素到最前面、最后面。

例子：

效果图：