BOOSTRAP 3.0 网格(GRID)工作原理

JowayYoung 发布于2019-08-30 14:00 / 1127人阅读

摘要：网格是实现响应式页面设计的利器，但至于它的工作原理，大多数时候对开发人员应该是一个黑盒。而中间的列进行偏移时，效果是将前一列与当前列一分为二。明白了网格系统的以上工作原理，我项目当中页面布局的异常都得到了合理的解释。

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

容器 ( container)

容器的左内边距是15px，如下图给粉红部分显示

容器的宽度动态地取决于屏幕宽度

行(row)

列column应该包含在行row里面，最多可添加到12的列。它还充当包装器，因为所有列都向左浮动,如果浮动异常，行与行之间也不会有重叠。

行每边都有15px的负边距，如下图中蓝色所示。它正好抵消了外部容器的15px的左内边距。理解这点至关重要，有助于理解后续列 column的排列方式。以及自已设计的页面布局出现异常的时候。它使得行内的列可以贴着屏幕边距为起点，计算左内边距

不要在容器外使用行，那将不起作用

列(column)

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

两侧列沿着容器对齐（由于行的-15px)

列与列的内容之间永远保持着30px的间隙

不要在行外使用列，那将不起作用

列的内容

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

嵌套

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

偏移（offset)

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

推和拉（push and pull)

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

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

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

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

GPU云服务器云服务器工作原理网络工作原理爬虫工作原理 cdn工作原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115697.html

【图片版】CSS网格布局（Grid）完全教程

摘要：简言网格布局是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。例用属性和定义网格，同时定义网格线名称。例一组区域名称要放在单引号或双引号内，每一个名称之间以空格分隔。例本例中，是通过隐式网简言 CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局一直不够理想。包括table布局、浮动、定位及内联块等方式，从本质...

ddongjian0000 2019-08-29 15:14 评论0 收藏0
Bootstrap网格系统

摘要：栅格系统中的列是通过指定到的值来表示其跨越的范围。实例下图是一个栅格系统，共有四行。然后在根目录中，使用命令，可以自动将源代码编译成，放在目录中。什么是Bootstrap Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，它包括HTML,CSS,JS等。它是由Twitter开发，现在成为Github上最为流行的前端开发框架。它提供了一套响应式，移动设备优先的流式栅格...

ISherry 2019-08-30 13:07 评论0 收藏0
你不需要基于 CSS Grid 的栅格布局系统

摘要：在过去的几个星期里，我开始看到基于的布局框架和栅格系统的出现。你可能倾向于明确给出所有元素的位置，或是尽可能依赖于自动布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在过去的几个星期里，我开始看到基于 CSS Grid 的布局框架和栅格系统的出现。我们惊讶它为什么出现的这么晚。但除了使用 CSS Gr...

anonymoussf 2019-08-01 17:20 评论0 收藏0