BOOSTRAP 3.0 网格(GRID)工作原理

lyelyelye 2019-06-26

BOOTSTRAP CSS 网格是实现响应式页面设计的利器,但至于它的工作原理,大多数时候对开发人员应该是一个黑盒。很少有人想知道它背后是如何工作的。直到你自已设计的页面无法满足一个复杂的需求,或者设计出来的页面显示怎么也达不到你的预期。你真的会像丈二和尚摸不着头脑。直到我看到了一篇国外开发人员写的文章,它提示了一些BOOTSTRAP 3.0框架中GRID的一些工作原理,这边简单做一个归纳总结,供大家参考。

容器 ( container)

  • 容器的左内边距是15px,如下图给粉红部分显示
  • 容器的宽度动态地取决于屏幕宽度

BOOSTRAP 3.0 网格(GRID)工作原理

行(row)

  • 列column应该包含在行row里面 ,最多可添加到12的列。它还充当包装器,因为所有列都向左浮动,如果浮动异常,行与行之间也不会有重叠。
  • 行每边都有15px的负边距,如下图中蓝色所示。它正好抵消了外部容器的15px的左内边距。理解这点至关重要,有助于理解后续列 column的排列方式。以及自已设计的页面布局出现异常的时候。它使得行内的列可以贴着屏幕边距为起点,计算左内边距
  • 不要在容器外使用行,那将不起作用

BOOSTRAP 3.0 网格(GRID)工作原理

列(column)

  • 列现在有15px的内边距,以黄色显示。这样一来就可以做到2点:

    • 两侧列沿着容器对齐(由于行的-15px)
    • 列与列的内容之间永远保持着30px的间隙
  • 不要在行外使用列,那将不起作用

BOOSTRAP 3.0 网格(GRID)工作原理

列的内容

有了上述行和列的内边距互相抵消,这样每一列的内容,无管是最2边的列,还是中间的列,对于整个屏幕来说,都是平等对待的,同时还能控制在同一行当中,即15px + ??px+ 15px的独立单元,这便是container > row > column 的内边距设置的巧妙之处。
BOOSTRAP 3.0 网格(GRID)工作原理

嵌套

可以在列中创建新的网格系统,记得只能在列中使用行,不能使用容器:
这样外层列对于内层行来说,与最外层的容器与行来说的关系是一样的。
也就是说此时,列的作用与容器的作用相同,形成一个递归关系
BOOSTRAP 3.0 网格(GRID)工作原理

BOOSTRAP 3.0 网格(GRID)工作原理

偏移 (offset)

偏移比较好理解,它只是将列的左外边距增加相应的若干个单位长度。只唯一需要注意的是,针对最左侧列进行偏移时,偏移的起始位置,如下图所示,是从行的-15px外开始的。其实这也好理解,因为外部的行的起始位置是-15px,毕竟内边距也属于行的一部分。而中间的列进行偏移时,效果是将前一列与当前列一分为二。

BOOSTRAP 3.0 网格(GRID)工作原理

推和拉(push and pull)

为什么使用推/拉?根据屏幕尺寸的变大变小,翻转当前布局。
特别适用于将列重新排列,当屏幕从移动设计布局变到桌面设计,因为它允许你在屏幕大小变动时,打破HTML默认的:自顶向下,从左至右的布局方式。

特别需要注意的是,pull和push实际上移动了列的位置,而不是改变列的左右边距,如下图所示,这样一来,如果push/pull一个列,而不是push/pull其相邻列的话,会出列与列内容重叠在一起的情况。
BOOSTRAP 3.0 网格(GRID)工作原理

因此,每当你pull/push一列的时候,相应的邻近的列也要做一个互补的push/pull的操作。

BOOSTRAP 3.0 网格(GRID)工作原理
 
明白了网格系统的以上工作原理,我项目当中页面布局的异
常都得到了合理的解释。如果觉得还是很难理解,那就切记要按照
container ->row ->column->row->column这种方式去组织界面的网格元素。

相关推荐