bootstrap中的栅格系统

大家好，我是IT修真院成都分院第一期的学员常开洋，一枚正直纯洁善良的web前端程序员

今天给大家分享一下，修真院官网CSS（职业）任务，深度思考中的知识点——bootstrap中的栅格系统

大家好，我是IT修真院成都分院第一期的学员常开洋，一枚正直纯洁善良的web前端程序员

1.背景介绍

栅格系统通过固定的格子结构，来进行布局设计，这是一种设计风格，而且一直以来很广泛地应用于网页设计领域。这样的风格清晰、工整，可以让网页具有更友好的浏览体验。而随着响应式设计（responsive design）的流行，栅格系统开始被赋予新的意义，那就是，一种响应式设计的实现方式。

2.知识剖析

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。正确的基本结构是这样的

3.常见问题

栅格布局的用法相信大家都很熟悉了，今天我们主要来探讨容器的padding 15px,行的margin -15px，列的padding 15px为什么要这么来回的使用15px

4.解决方案

容器container

Container是一个容器，使用它的主要是有两个目的

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

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

行row

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

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

列col

列(col)也有15px的padding，如下图中黄颜色部分。上文中提到row的负margin抵消了container的padding，所以为每个column设置padding就是为了防止内容直接触碰边界，使内容不会紧贴在浏览器边界上，而列与列之间有了padding才不会互相紧贴在一起。但是容器，行，与列的3个15px只是为了不让col紧贴浏览器边缘么，那直接取消container和row的15px只留下col的15px就行，为什么这么麻烦呢，继续分析

嵌套

你设置了container,row,column后，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作为容器的column中，而不需要在放置一个container中，col就充当了container如下图蓝色所示，是放入col中的row的负margin 15px区域

而下图继续将col放入row中，这样就构成了循环

我觉得嵌套的使用应该是最符合container，row，column的这3个15px来回使用的解释了

5.编码实战

如何学习

1

匹配你现在的个人情况寻找适合自己的岗位

2

了解职业前景薪金待遇、竞争压力等

3

掌握行业内顶级技能

4

查看职业目标任务

5

参考学习资源，掌握技能点，逐个完成任务

6

加入班级，和小伙伴们互帮互助，一块学习

7

选择导师，一路引导，加速自己成长

8

完成职业技能，升级业界大牛

演示链接:http://119.10.57.69:880/jnshu067/task10/task10-1.html

6.扩展思考

1.对于超小屏幕，栅格系统的断点不够用怎么办？

2.栅格系统是按照12等分来设计的，如果想要5等分怎么做？

7.参考文献

参考一：http://www.tuicool.com/articles/Afuu2q/

参考二：http://www.cnblogs.com/dojo-lzz/p/4621627.html

参考三：http://v3.bootcss.com/css/#grid

8.更多讨论

栅格系统的真的很精妙，可以有更多的用法和理解么？

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

下期不见不散~