Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345

时间 2014-02-20 17:58:00  博客园-原创精华区

原文  http://www.cnblogs.com/willian/p/3558180.html

主题 Html

这个标题取的有点奇怪，怪我翻译的有问题吧。英文学平有限，有道词典和google翻译齐上阵是必须的。还好翻译的不是小说，对于技术文章，还是能勉强翻过来的。

本文主要讲解了Bootstrap3.0的栅格布局系统实现原理，以及使用过程中应该注意的问题。

开始...翻译..

像 CSS 栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，除非你有了比较烂的设计或者一些比较复杂的东西，

当你无法找出 spacing, margin, padding 等这些补白全都乱的原因，那就真的很苦逼了，尤其是在某些动态改变和变化的 UI 上。

在关于 bootstrap 的栅格系统工作原理上我见过很多人都对它比较困扰、懊恼，每次都需要我解释很多遍后别人才能理解，

所以我乐意用快速和可视化的方式来解释为什么 bootstrap 栅格系统能玩得动，没必要解释很多。让我们一起找出 Bootstrap 是如何利用巧妙的技巧实现栅格系统的

HTML正确的基本结构：

<div class="container"><div class="row"><div class="col-xs-12"></div></div></div>

Container

---

Container 这个容器 class 为 .container 类有 2 个目的

1 、在响应式宽度上提供宽度约束。响应式尺寸的改变其实改变的是 container ，行(rows) 和列 (columns) 都是基于百分比的所以它们不需要做任何改变；

2 、提供 padding 以至于不内容不直为紧贴于浏览器边缘，两边都是 15px ，下图中粉色的就是了，稍后解释更多；

在一个container中永远不需要再嵌一个container，记住永远不要。

你将会看到为什么

Row

---

行 (Row)Class 为 .row 的容器

row 为 col 提供了空间，理想上一行上分了 12 col ，当所有 col 都向左浮时 row 也就扮演了容器角色，另外当浮动有问题时 row 也不会重叠

Rows  的两侧都拥有独特的负 15px margin 值 , 如下图中蓝色部分 .  被当作为 row 的div 被约束在 container 内边界与粉色区域重叠，但没超过。这负的 15px margin 值把row 的推出了 container 的 15px padding ，并与之重叠，本质上讲就是负出去。为什么这么做呢？原因得看列 (col) 的工作原理，下面我们会看到

永远不要在 container 外用 row, row 在 container 外面使用是无效的

Column

---

列(col)现在有15px的padding了，如下图中黄颜色部分。Container的正padding值造成了15px的留空，row用负margin值反的延伸回去，

所以现在col的padding值与container的padding重叠了

永远不要在row外使用col,在row外使用col是无效的

Content Within a Column

---

列(col)的padding给内容提供了空白，使内容不会紧贴在浏览器边界上，列之间有了padding才不会互相紧贴在一起。

container/row/column整这么些事儿最终要达到的结果就体现在这里了，就是为了col的补白啊...

Nesting嵌套

---

当你设置了container,row,column后，你可以在column内再创建新的栅格系统。你在右侧的列(col)内添加新的行(row)时不需再嵌container了

为什么嵌套时不需要新的container了？

这个技巧在于列(col)扮演了container一样的角色，列也有15px的padding值，它一样允许行(row)的负margin值,它内部的列、内容间的补白等都一样能很好的工作了

Offsets 偏移

---

偏移的实现相当简单，仅仅是在列(col)的左侧加上了margin值，

唯一比较怪的地方可能是在最左侧的col是从-15px的row的margin值开始偏移的，中间的列的偏移则是直接从前一个列开始偏移，分割分离出补白。

除此之外，偏移就表现的像列(col)一样

Push and Pull 列的排序

---

(直译过来应该是“推和拉”但实际使用过程中更多的表现为互换位置进行排序)

让我们先从为什么需要对列进行排序说起：基于响应式布局，对布局进行翻转，尤其是对移动设备上对列进行重新排列，

对于 pc 桌面来说 push and pull 允许你打破 HTML 中 div 从上到下从左到右的固定布局

可能让人比较困惑的是 push pull 的实现是通过添加 position 而不是通过添加 margin值实现。

Push 添加的是 left 值， pull 添加的是 right 值。当然在添加 left 或者 right 值之前它们的容器已经是相对定位了。

上图那么做就有问题，它会导致列重叠，而不像正常的列或者列偏移。

所以如果你 push 了一个列到右侧，它就会叠在右侧的列上，反之亦然。

所以一般我们总是“互换”，如果你 push 一个列到右侧，那么你得 pull 右侧的列到左侧，或则也对右侧的列进行处理。

The Reasoning Behind It 总结一下背后的原理

---

Container:

正是由于 container 这样设计才让 content 的两侧拥有 15px 的 padding 值的补白，

另外，整个 body 拥有 15px 的 padding 值，这使整体上不会紧贴浏览器的边缘，当然如果对于满屏设计并带有背景色的 div 就不好了 ..

Rows:

行(row)拥有负的margin值，并且值等于container的padding值，以至于边界与container得以重叠（相等）

，负的margin值叠在了padding上，这让row看起来没被container的padding所影响.为啥？自行脑补..

Columns：

列(col)又拥有15px 的padding，所以能真正让content拥有15px的补白,而又让列之间拥有了15px+15px的中间补白，

正是因为如此，这个栅格系统不需要像960排版（blueprint, 等）系统似的对第一列或最生一列进行特殊的处理。

现在不管怎样在列之间都拥有15px的空白了。

Nested Rows：

嵌套行的原理就像上面一样，只是它的重叠住了列的padding ，其实就把外面的列当作 container 了，

本质上列扮演了 container 的角色，所以嵌套行时你不再需要 container

Nested Columns:

嵌套列没什么好讲的了，和上面一样

Offsets: 

偏移的本质就是分割空白间隔，通过增加空白间隔达到你想要的距离，非常的简单

Push/Pull:

Push 和 pull 用于主要用于变换左右列的位置，当你有一个特别的设计并且 offset 偏移用着不给力的时候，你可以用它们来改变位置

Common Problems

---

这里有些普遍会发生的 bug 值得注意，一些 bug 在 HTML 中很容易就能看出来 .

缺少 Container ： 第一个容易产生 bug 的地方是忘记添加 container 。没有container 意味着没有 padding 与行 (row) 的负 margin 直相抵消，

意味着行会超出父元素。当元素处于浏览器边缘时，这是最普遍的造成奇怪的横向滚动的原因

缺少 row:

第二个普遍问题是少了 row, 这与缺少 container 产生的问题相反， content 与浏览器/viewport 的边缘拥有了 30px 的距离，

比正常值多了一倍。而且你的列浮动也会产生问题。由于缺少了外面 row 的包裹，浮动没有得到正常的清除，所以浮动就可能产生问题。

同样，当你试图嵌套栅格系统时，同样新嵌进去的 content 离左侧的边距达到了45px

Container 内的元素再嵌 container: 在 container 内任意元素内再嵌 container 会导致很多问题，如双倍的 padding 值，空白间隔，怪异的横向滚动

偏移/push/pull:

当使用偏移或者排序 (push/pull), 偏移很简单不会出什么问题， push/pull 却不同，如果你 push 太多，列会超出它的 container ，记住只是使用正常的值主不会有问题

这些就是在使用 bootstrap3.0 的基础栅格系统时时产生的问题，如果你在设计里有很多的嵌套碰到问题，

或你的响应式布局没按照你所希望的方式工作，先看看上面这几点，是不是这些问题产生的。

如果你修复了上面说的问题，基本上除了你自定义的布局外 bootstrap3.0 的布局问题基本上都能搞定了

That ’ s It

---

这就是 bootstrap3.0 的工作原理。它真的很聪明并提供了极好的解决方案。在这么多年使用栅格系统的经验中，

我个人觉得它是实现的最优雅的。虽然看到到这片文章写了这么多会可能觉得bootstrap3.0 的栅格系统很复杂，

但如果不从整体详细的了解其内部的实现原理的话，在实际使用中，它确实是使用了简单的 CSS ，提供了我们一个好用的栅格系统。

========================================================

英文原文： http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

========================================================

转载处请注明：博客园(王二狗)willian12345@126.com