你可能已经听说了一个“大新闻”：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。

　　这篇文章会带你深入Bootstrap最新版源码，窥探其架构组织奥秘，并解析最具亮点的栅格化系统。同时，你也会了解到sass的高阶用法和flex最新语法的奥秘。

　　3）默认弹性盒模型（flexbox）：这是项划时代的变动，利用flexbox的优势快速布局。

　　不再像上个版本一样，将渐变、淡入淡出、阴影等效果分放在单独的样式表中。而是将所有选项都移到一个Sass变量中。

　　想要给全局或考虑不到的角落定义一个默认效果？很简单，只要更新变量值，新视觉然后重新编译就可以了。

　　7）重构所有JavaScript插件：Bootstrap 4用ES6重写了所有插件。现在提供UMD支持、泛型拆解方法、选项类型检查等特性。

　　我们看到，代码里设置了这两个class进行样式声明，很明显他们的样式属性是有冲突的，那么他们是如何做到“和平共处”交替发挥作用的呢？

　　1）在屏幕宽度小于576px时候，我们发现.col-sm-3并没有起作用，这时候起作用的是.col-6。

　　这就保证了在576px以下屏幕，只有在媒体查询之外的.col-*样式声明发挥了作用。

　　2）在屏幕宽度大于576px时候，命中.col-sm-3的样式声明，所有他的优先级一定大于.col-6，这时候就保证了一行四栏的样式“占上风”。

　　我们从样式代码里看到类似flex: 0 0 25%的声明，为了理解它，我们从flex属性入手：

　　1）flex-grow：属性定义项目的放大比例，默认为0。我们看到BS代码里这个值一直为0，即如果存在剩余空间，也不放大。

　　2）flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

　　3）flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

　　浏览器根据这个属性，计算主轴是否有多余空间。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

　　看到此，不难明白BS4栅格的实现，但是这并不是此文的最终目的。我们可以深入更多，比如，BS4的栅格系统里，一行一共是12栏。他的媒体查询断点又包括：xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px。参考其源码dist/css目录下光棍影院样式代码，我们会想组织生成如此大量的CSS样式，不用预处理器简直是反人类的。而BS4却是把sass用到了极致。

　　3）$breakpoints表示断点设置，这是一个全局变量，为map类型。

　　认识了这些参数，我们看.col-sm-具体实现，下面代码我已经进行过大范围精简，只保留col-sm-相关部分，并且加了注释：

　　2）breakpoint-infix是一个函数，它定义在css/mixins/_breakpoints.scss文件当中， 返回一个带破折号的断点标识字符串，新视觉影院比如这里我们关系的就是“-sm”；

　　4）breakpoint-min又是一个函数，它返回了断点的具体数值。这里是用来拼媒体查询条件的。5）最后最关键样式的生成又使用了另外一个定义在css/mixins/_grid.scss文件当中的mixin:

　　到此为止，我们深入了Bootstrap V4的scss/目录下的源码，研究涉及了：

　　如果你理解了这些，那么再去读bootstrap新版源码就不会存在任何难度。相信你也能够在全局上，以“上帝视角”了解sass所起的作用，大型样式框架的架构组织。

　　通过阅读源码的栅格系统部分，我们应该认识到sass对于这样大型样式框架系统的重要意义：

　　2）复用的意义，我们使用了大量的mixin,function,全局变量；

转载请注明出处。