Bootstrap 团队早在 v3.3.0 版本时便已透露将在几个星期后发布 v4 alpha 版,而事实上这一承诺整整延期了 10 个月。现在,Bootstrap v4 版终于揭开了其神秘的面纱,漫长的开发周期,注定其所酝酿的巨大的改变。让我们一起探索下这一风靡世界的顶级 web 界面框架的最新版本。

Bootstrap 来说,2015819 号注定将会成为一个特别的日子。它不仅仅是 Bootstrap 的第 4 个生日,更是在一整年的紧密开发后,终于可以向大家展示 Bootstrap 4 的第一个内部开发版。

相比之前版本, Bootstrap v4 版本进行了前所未有的具大改动,其内部的几乎每一行代码都被修改过。

截止目前已有 1100 次提交,及 120000 行代码修改,已公布的更新仅仅是其中的凤毛麟角。

您可以前往 Bootstrap 官方所提供的 v4 alpha 在线示例,以体验最新版本:

http://v4-alpha.getbootstrap.com/  (英文官网,建议使用代理访问)


  • 从 Less 迁移至 Sass

    得益于 LibsassBootstrap 的编译速度得到了前所未有的提升。Bootstrap 开发者们也已成为日益壮大的 Sass 社区的一部份。

    改进的网格系统

    新增了一个网格层,以更好的支持移动设备,且彻底修改了之前的语义混合表述设计(Semantic mixins)

    可选的 Flexbox 支持

    该特性已全完准备就序,只需切换一个布尔变量,就可以重新编译您的 CSS 文件,以直接利用基于 Flexbox 的网格布局系统及相关组件。

    放弃对 well(井框)thumbnail(小样)及 panel(窗体)等组件的支持,以改用全新的 Card(卡片) 组件

    Card(卡片)Bootstrap 来说是一个全新的组件,但您肯定会对它倍感熟悉,因为它基本上实现了 well(井框)thumbnail(小样)panel(窗体)所具体的所有功能,而且只会做得更好。

    整合所有 HTML 样式重置于一个新的模块,Reboot

    当无法使用 Normalize.css 时,Reboot 模块便可以帮助执行样式重置功能。它还提供了更多的重置选项,比如 box-sizing: border-boxmargin 微调及其它,而完成这一切,只需要修改一个单独的 Sass 文件即可。

    全新的自定义选项

    区别于之前的版本(如 Bootstrap v3.x)v4 开始将不在把所有诸如渐变(Gradient)、过渡变化(Transition)、阴影(Shadow)及更多其它特效放置于一个单独的样式表文件中。想要在所有地方都使用过渡变化或者统一禁用圆角?只须更新指定变量然后重新编译即可,即简单又方便。

    放弃对 IE8 的支持,且使用 rem em 作为唯一度量单位

    不在支持 IE8 意味着 Bootstrap 可以无所顾忌地利用 CSS 本身优势,不需要为了后向支持而不断地采用各种兼容补丁(Hack)

    新版中,像素度量方式已被 remem 所取代,这将使响应式(Responsive)排版及组件大小重置变得更加简单。

    如果您仍需支持 IE8,建议继续使用 Bootstrap 3

    重写所有 JavaScript 相关插件

    所有内置插件都已严格按照 ES6 规范进行重写,以最大限度地利用 Javascript 新特性。目前已全面支持像 UMDGeneric Teardown 方法、Option Type 等大量特性。

    改进 TooltipsPopovers 的自动置位的体验

    这里要感谢一个叫做 Tether 的工具的帮助。

    改进文档

    文档已按 Markdown 格式进行重写,且添加了一些便捷的插件以流线化管理样例及代码片段,这将使所有文档编辑工作变得更加简便。大为改善的搜索体验也已在有条不紊地进行中。

    还有更多!

    可定制的表格控件、marginpadding 辅助类、新的实用工具类及更多的新特性都已集成。