响应式前端框架Bootstrap系列（2）网格系统

朴灿烈づ我的快乐病毒、 2021-09-14 13:56 316阅读 0赞

网格系统，也叫栅格系统，是bs中最常用也是最核心的布局方式。大家知道，一个前端界面是由多个块级元素组建而成，而我们常用到的块级元素就是div，网格系统就是将一个div划为等分12列。为了使网格系统能支持不同的分辨率，网格的列定义也分为了4种类型，分别是.col-xs、.col-sm、.col-md、.col-lg，它们与分辨率宽度的对应关系如下：

超小设备手机（<768px）用.col-xs-表示  
小型设备平板电脑（≥768px）用.col-sm-表示  
中型设备台式电脑（≥992px）用.col-md-表示  
大型设备台式电脑（≥1200px）用.col-lg-表示

举个例子，我们创建一个包含3列的div块级元素，列的比例为4:1:1，当屏幕宽度小于768px时，列比例变为1:1:1

效果图：分辨率大于或等于768px时，

![SouthEast][]

分辨率小于768px时，

![SouthEast 1][]

由例子可以看到，当屏幕宽度像素变化时，样式为row的块级div元素显示的内部布局也会自动变化，这就是网格系统的强大之处。注意一点， 当没有更大屏宽度像素的约定时，元素将自动继承较小的屏幕宽度像素的约定。如上例中并没有设置.col-md和.col-lg的约定，该元素自动继承.col-sm的约定。

（注）样式为row的块级div元素允许设置具体的宽度像素。

网格系统还有两个很常用的API，它们是**列偏移**和**列排序**功能。

偏列移是一个用于更专业的布局的有用功能，它可用来给列腾出更多的空间。网格系统的列布局类似于流式布局，一列挨着一列。当中间列隐藏时，其它列会按流式布局的方式自动补充上来。比如要实现当不需要中间列，但又不想其它列自动补充上来的效果，代码如下：

效果图：  
![SouthEast 2][]

列偏移通过添加样式.col-md-offset-\*实现，它会把一个列的左外边距（margin）增加 \* 列，其中 \* 范围是从 1 到 11。

列排序，就是把div看做成包含12个插槽的一横，push就是把列往后推，pull就是把列往前拉。如.col-md-pull-1就是把该列在原来插槽的位置上往前拉至前一个插槽。演示源码如下：

效果图：  
![SouthEast 3][]

.col-md-push-\*和.col-md-pull-\*，其中 \* 范围也是从 1 到 11。

[SouthEast]: /images/20210813/315df572836a4b93a449ae9e10a704e0.png
[SouthEast 1]: /images/20210813/418a4206bf30446dbdbbc8e1e646d6ae.png
[SouthEast 2]: /images/20210813/9a21dd5926764e5297eef50ce674a83c.png
[SouthEast 3]: /images/20210813/414ab1dd65b645ad9d9b6ebbd4a19efc.png