Bootstrap3.0的栅格布局系统实现原理

这个标题取的有点奇怪，怪我翻译的有问题吧。英文学平有限，有道词典和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个目的

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

二、提供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