关于下一版 Bootstrap 的 5 件很酷的事情

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

Bootstrap 4 的 alpha 版本本周 刚刚发布 ,我想让每个人都清楚地意识到这是对这个流行的(可能是最流行的)响应式 CSS 框架的 重大改革 。项目创建者 Mark Otto 表示,该版本“几乎涉及每一行代码”,他并不是在开玩笑。

1.文件更小

您知道这句话:“删除的代码是经过调试的代码”。当最好的重构会议导致从项目中删除大量代码并将其精简时,您会经常看到这一点。如果您下载了 alpha 版,您会注意到,与 Bootstrap 3 (3.3.5) 的最后一个稳定版本(大约 123KB(bootstrap.min.css 文件))相比,新的 4.0.0 alpha 版 bootstrap.min .css 大约为 88KB。 放弃对 IE8 的支持 可能对这有很大帮助。

2. 从 LESS 切换到 Sass

社区和性能是 Bootstrap 在版本 4 中进行此转换的两个主要原因。具体来说,他们对转换的论点是:

  • Sass 项目的迭代速度比 LESS 快

  • 切换到 Sass 提高了框架的性能

然而,查看 GitHub 页面,LESS 似乎仍然具有流行优势,但 Bootstrap 表示 Sass 正在快速增长。无论哪种方式,您仍然可以使用正确的方法使用 Bootstrap 3 在 Sass 中进行大量 CSS 编码。有些人想知道 PostCSS 是否应该代替 LESS 来代替 LESS,这种新兴的模块化工具可以以出色的性能进行预处理。

3. 切换 Flexbox 支持

Bootstrap 4 现在支持使用 W3C 的 Flexbox 功能,该功能仍在完善其所有浏览器支持。因此,它是一项可选功能,您可以根据需要打开它。

如果您需要快速复习 Flexbox,最好的指南可能是 CSS-Tricks 上的指南 。如果您喜欢这种方法 ,Flexbox 上还有一个非常新的 20 个视频系列

4. 重新关注卡片 UI 模式

早在 2013 年,Andrew Trice 和我就认为这是一个需要理解的 重要 UI 模式 。Google 的 Material Design 和现在的 Bootstrap 4 现在都在顺应这一趋势。 Boostrap 为卡片放置井、缩略图和面板

5. 用 ES6 重写的 JS 插件

随着几个月前 EcmaScript 6 的定稿和标准化 ,Bootstrap 似乎跟上了最新的网络技术。他们已经重写了所有的 JavaScript 插件以利用 ES6,他们还更新了插件,“UMD 支持、通用拆卸方法、选项类型检查等等。”

等够了!前往 文档 看看它的外观!