大家好，我是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.更多讨论
栅格系统的真的很精妙，可以有更多的用法和理解么？
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
下期不见不散~
