浅谈Bootstrap混合网格

事因今年一月份打算给实验室做个网站,并借此学习Bootstrap框架。然后拖拖拉拉几个月,终于在今天开始了。

在学习Bootstrap的栅格系统时,笔者卡在了官方文档的Mix and match那一块,并且无论如何也想不清同一个div被同时赋予不同的col类型时会出现的行为。由于笔者的html和css的基础非常薄弱,所以并没有能力在底层上做解释,这里只给出一个经验公式。

以下所有内容基于Bootstrap v4.1.1

栅格系统简介

  • 固定栅格系统

Bootstrap将视图窗口(viewport)平均分成12列(暂不考虑嵌套情况)。这12列是栅格系统的基本组合单元。也即是说,采用该系统做页面布局时,每个布局的宽度只能为该基本单元的整数倍。

Bootstrap将div赋予.col-x('x’可取1-12)类即可完成页面布局。下例将整个viewport平均分为左右两个布局。

1
2
3
4
5
6
7
8
<div class="row">
<div class="col-6">

</div>
<div class="col-6">

</div>
</div>

需要注意的是:

  1. .col-x类div必须在row类div内部。
  2. 如果row类div内部的.col-x上数字之和>12,因为空间不够,后面的div只能跑到下一行
  • 响应式栅格系统

在固定栅格系统中,只要一个row中的所有.col-x的数字和≤12,则这些.col-x只能分布为一行。这种做法目前是有缺陷的,比如采用固定栅格系统将6张图片分布到一行中。这种布局在大屏幕中可以接受,但是在小屏幕里就非常挤。实际上这是Bootstrap在设计时重点考虑的一个问题,所以就有了接下来的响应式栅格系统。

FixedSmallMediumLargeExtra large
breakpoint<576px≥576px≥768px≥992px≥1200px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-

Bootstrap给出了四种响应式类型,分别用于Small、Medium(用于手机和平板),Large,Extra large(用于显示器)。下面给出了采用Medium (.col-md-)类型的响应式布局:

1
2
3
4
5
6
7
8
<div class="row">
<div class="col-md-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis doloribus ex repudiandae hic minima, dignissimos optio autem molestiae voluptates ipsam soluta corporis culpa vero earum sit sed, expedita nemo ipsum!
</div>
<div class="col-md-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis doloribus ex repudiandae hic minima,* dignissimos optio autem molestiae voluptates ipsam soluta corporis culpa vero earum sit sed, expedita nemo ipsum!
</div>
</div>

以及在网页上的行为:

colmd未堆叠

colmd堆叠

可以看到,当viewport的宽度≥768时,两个div位于同一行,但一旦viewport的宽度<768,两个div立刻堆叠起来。

也即是说,对于任意一种响应式类型,只要viewport的宽度小于其breakpoint,则该类型下的所有布局会堆叠起来。

Bootstrap混合网格

如果对上面响应式布局的代码做以下修改:

1
2
3
4
5
6
7
8
<div class="row">
<div class="col-md-6 col-lg-8">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis doloribus ex repudiandae hic minima, dignissimos optio autem molestiae voluptates ipsam soluta corporis culpa vero earum sit sed, expedita nemo ipsum!
</div>
<div class="col-md-6 col-lg-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis doloribus ex repudiandae hic minima, dignissimos optio autem molestiae voluptates ipsam soluta corporis culpa vero earum sit sed, expedita nemo ipsum!
</div>
</div>

同一个div被赋予两种不同的类型,此时布局在窗口改变时会产生什么样的行为呢?

col-lg-8区间

col-md-6区间

col-md-6堆叠区间

可以发现随着viewport宽度的减小,div首先由8-4比例分布,变为6-6比例分布,最后变成堆叠。根据每张图右上角的宽度精确值,总结得:

  • 当宽度≥992时,.col-lg-x类激活,div呈现8-4分布
  • 当宽度<992并且宽度大于等于768时,.col-md-x类激活,div呈现6-6分布
  • 当宽度<768时,没有任何现有类被激活,此时div堆叠

结论

依据上面的例子,这张表可以这样理解:

FixedSmallMediumLargeExtra large
breakpoint<576px≥576px≥768px≥992px≥1200px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-

若某布局堆叠了多种响应式类型,若当前viewport的窗口不满足所有类型的breakpoint,则堆叠布局;否则,选取满足条件的,并拥有最大breakpoint的类型做为当前窗口布局。在每次viewport发生改变时都作此判断。

0%