你可能听说了一个“大新闻”：Bootstrap4合并了代号#21389的PR，宣布放弃对IE9的支持，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面进入“现代浏览器”时代；2）样式处理再次面向未来，拥抱更灵活的弹性盒模型——Flex布局。本文将带你深入了解最新版Bootstrap的源码，窥探其架构组织的奥秘，剖析最为突出的光栅化系统。同时，你还将了解到sass的高级用法和flex最新语法的奥秘。BS4的新特性在开始我们的探索之前，有必要先梳理一下BS4新增的特性：1）MigratefromLesstoSass：现在，Bootstrap加入了Sass的大家庭。感谢Libsass（Sass解析器），Bootstrap编译速度比以前更快；2)改进网格系统：增加新的网格层以适应移动设备，并整顿语义混合。3）默认弹性盒模型（flexbox）：这是一个划时代的改变，利用flexbox的优势进行快速布局。4)弃用孔、缩略图和面板，用卡片代替。5)新的自定义选项：不再像之前的版本那样，将渐变、淡入淡出、阴影等效果放在单独的样式表中。相反，将所有选项移动到一个Sass变量中。想要为全局或意外的角落定义默认效果？很简单，更新变量值，然后重新编译即可。6)使用rem和em单位。7)重构所有JavaScript插件：Bootstrap4用ES6重写了所有插件。UMD支持、通用拆卸方法、选项类型检查等功能现已可用。8)改进工具提示和弹出窗口的自动定位：这部分要归功于Tether（一个定位引擎，使叠加、工具提示和下拉菜单更好）工具。如果你不知道Tether是什么，可以去他的Github地址。BS4GridSystemRevealed了解了以上新特性后，我们主要研究BS自诞生以来最大的“卖点”——网格系统。网格例子，我们选择一个有代表性的BS4官网例子，网上可以参考，或者参考下面的截图。在宽屏中，我们看到：当屏幕宽度小于576px时，我们有：对应代码：
