ootstrap3.0的栅格布局系统实现原理
2016-02-18 15:40
405 查看
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
原文 http://www.cnblogs.com/willian/p/3558180.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 的角色,所以嵌套行时你不再需要 containerNested 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 ,提供了我们一个好用的栅格系统。相关文章推荐
- 研究Tomcat的结构,彻底解决数据源连接数据库
- url解析
- VR/AR工作原理、目前存在的技术问题
- yum 查询软件信息
- jquery获取单选框复选框下拉框值
- frameset标签
- 省份城市联动 多选
- symfony2 教程之数据库和Doctrine--翻译(官方文档)
- 自控力和专注力是执行力的保证
- 8个超实用的jQuery插件应用
- win10系统怎么更换电脑背景?
- nginx官网配置
- iOS9 - SFSafariViewController提供完整的Web浏览体验
- Notification(状态栏通知)详解
- [LeetCode 063] Unique Paths II
- 为什么Java接口里使用public static final修饰成员变量
- Linux内核的Oops
- Android 操作SQLite基本用法
- java虚拟机——深入java虚拟机(二)——类加载器详解(上)
- IOS学习路线图