2018年1月，源前Bootstrap 4正式版发布。端框距离Bootstrap 3已经过去快四年。源前很多人当时的端框第一反应是：终于不用再跟float较劲了。Bootstrap 4最核心的源前变化，是端框全面转向Flexbox布局。这不是源前小修小补，是端框整个栅格系统的底层重写。

Bootstrap 3时代，源前开发者要写一堆col-md-push-*、端框col-md-offset-*来做对齐和排序。源前到了Bootstrap 4，端框Flexbox原生支持让这些hack手段基本可以扔掉。源前d-flex、端框justify-content-center、源前align-items-center——三行类名搞定垂直水平居中，以前得写多少CSS？做过前端的人都懂那种痛。

栅格系统：从12列到更灵活的断点

Bootstrap 4保留了12列栅格，但断点做了调整。新增了一个sm以下的默认层级（即col-*不带断点前缀的类），这意味着移动优先不再只是口号。以前Bootstrap 3默认是col-xs-*，写起来啰嗦，现在直接col-6就作用于所有屏幕，往上再覆盖。

断点像素值也变了。Bootstrap 3的xs是<768px，Bootstrap 4把sm定在≥576px，md≥768px，lg≥992px，xl≥1200px。多了一个xl，大屏适配更细。实际项目里，这意味着设计师给你1440px宽的设计稿时，不用再自己算自定义媒体查询了。

从LESS到SASS：编译工具的切换

Bootstrap 4把源码从LESS换成了SASS（SCSS语法）。这个决定当时争议不小。LESS社区活跃度下降是一方面，SASS的生态和工具链更成熟是另一方面。对使用者来说，如果你用官方编译好的CSS，感知不大。但要定制主题变量，SASS的!default和map结构确实比LESS顺手。

举个例子，改主色不再需要覆盖一堆选择器。在_variables.scss里改$primary的值，重新编译，所有按钮、链接、边框色全部跟着变。这种变量驱动的设计思路，在Bootstrap 4里贯彻得比3彻底得多。

卡片组件取代了面板和缩略图

Bootstrap 3有panel、thumbnail、well好几个类似的容器组件。功能重叠，用起来还得挑。Bootstrap 4直接合并成card一个组件。卡片可以放图片、标题、文本、列表组、页脚，配合card-deck还能做等宽排列。

这个改动挺务实。实际开发中，产品列表、文章摘要、用户信息展示，本质上都是卡片模式。一个组件覆盖大部分场景，减少了选择成本。当然，card的默认样式比较素，边框加圆角，不额外写CSS的话视觉上偏平淡。但作为框架，提供结构而非过度装饰，方向是对的。

放弃IE8，拥抱现代浏览器

Bootstrap 4明确不支持IE8及以下。IE9支持但部分组件有限制。这个决策在当时需要勇气，毕竟2018年国内还有不少项目要求兼容IE8。但回头看，正是这种取舍让Bootstrap 4能用上Flexbox、rem单位、CSS变量（部分）这些特性。框架不可能永远背着旧浏览器走路。

另一个细节：Bootstrap 4默认使用rem作为尺寸单位，根字号16px。font-size-base是1rem，间距也基于rem计算。这对响应式和无障碍更友好，用户调整浏览器字号时整个布局会等比缩放，而不是像px那样死板。

JavaScript插件的变化

Bootstrap 4的JS插件从jQuery插件体系改成了独立工具类。依赖jQuery这一点没变（Bootstrap 5才去掉），但写法上更规范。每个插件都暴露了$.fn.xxx和Constructor，支持noConflict。Popper.js被引入来处理tooltip、dropdown、popover的定位。以前Bootstrap 3自己算位置，遇到滚动容器经常跑偏，Popper.js在这块稳定得多。

不过实际用起来，Bootstrap 4的JS插件在复杂交互场景下还是偏弱。比如Modal的嵌套、动态内容加载后的重新初始化，文档写得不够细，踩坑得翻GitHub issues。这是开源框架的通病，官方示例永远比真实项目简单。

值不值得用

2024年的今天，Bootstrap 4已经停止维护，官方推荐迁移到Bootstrap 5。但大量存量项目还在跑4.x版本。如果你的项目不需要支持IE，新项目直接上5。如果是维护老项目，理解4和3的差异能省不少调试时间。Bootstrap 4完成了它的历史任务：把框架从float时代带进了Flexbox时代，让响应式布局从“需要技巧”变成“写类名就行”。这个贡献，比它本身好不好用更重要。