本文翻译自 Boostrap 开发团队官方博客。css
通过两年的开发,咱们终于发布了第一个 beta 版本的 Bootstrap 4。在此之间,咱们一共把代码不折不扣搞砸了至少 27 次,提交了将近 5,000 个 commit,修改了 650+ 个文件,添加了 67,000 行代码,又删除了 82,000 行代码。咱们发布了 6 个 alpha 版本,三个官方主题甚至还有一个招聘版…… 终因而时候发布 beta 版本了。git
Beta!?
长话短说,发布一个 beta 版本意味着咱们在第 5 版以前不会再搞出超多的 bug 了。咱们都不是完美的,可是咱们也尽全力保证每个类、功能和文档 URL 都不会再被移除或者改变。也就是说,可能会加功能,可是不会删功能了。github
对于没用过 alpha 版本的同窗们,这些是 v4 中值得注意的一些亮点:npm
- 从 Less 切换到 Sass。感谢 Libsass 框架和强大的 Sass 开发者社区,Boostrap 如今的编译速度比之前都要快。
- Flexbox 和更加完善的网格系统。咱们几乎把全部东西都挪到了 flexbox 里,添加了一个更适合移动设备的网格等级,而且完全重构了咱们的源 Sass,使用了更优秀的变量、mixins 以及 maps。
- 放弃了 wells, thumbnails, 和 panels。卡片是 Bootstrap 一个全新的组成部分,它们可以完成前三者的任务,并且能作得更好。
- Fork 了 Normalize.css 而且将全部的 HTML resets 合并进一个全新的 CSS 模块,Reboot。Normalize.css 目前的开发走向了咱们没有预料到的方向,删除了一些咱们长期以来依赖的核心 CSS 部件。Reboot 使用了 Normalize.css 的核心组成,并将其扩张从而包含更多的 resets,好比
box-sizing: border-box
,以及边缘部件,所有放在一个 Sass 文件中。
- 添加了新的自定义选项。在 v3 中咱们让开发者能够选择须要的渐变、过渡、阴影、网格等。在 v4 中,咱们把这些选项所有放在了 Sass 变量中。想使用默认过渡样式而且禁用圆角图标?修改一下变量从新编译便可。
- 取消了对 IE8 和 IE9 以及其它高浏览器版本的支持,而且使用新的 CSS 特性。除了网格系统以外,咱们用 rem 和 em 替代了像素单位,从而使自适应字体和组成部分更加容易调节。若是你须要 IE8/IE九、Safari 8 如下版本、iOS 8 如下版本的支持,请移步 Bootstrap 3。
- 重写了全部 JS 插件。用 ES6 重写了全部插件从而支持最新的 JS 改进(包括新的 teardown, option type checking 等 method)。
- 利用 Popper.js 库提升了工具框、弹窗和下拉菜单的自动调节位置特性。
- 从新设计并改进了文档。从新设计,用 Markdown 重写,而且加了一些好用的插件来流水线生成示例和代码 snippets,让开发者更容易地使用咱们的文档。咱们也同时添加了一个新的超棒的搜索框。
- 新的 build 工具所有用 npm 脚本重写,弃用 Grunt,让 Bootstrap 项目的开发者们更加容易地为项目进行贡献。
- 还有更多!自定义表格控制,从新设计的走马灯,重构的导航栏,新部件,还有更多更多……
想了解更多新功能?继续阅读,或者直接去看文档吧!bootstrap
新外观
咱们已经在 Bootstrap 4 的 alpha 版本中更新了一些外观,可是最近咱们为文档页面也更新了样式。浏览器
Bootstrap 4 beta 文档sass
除了新的调色板和系统字体,文档也有了新的布局。咱们还使用了超强的 Algolia 的 DocSearch 搜索功能、固定的导航栏和边栏以及一个全新的目录。app
更多关于 beta 版本的细节,能够参考以下连接:框架
<3,
@mdo & team工具
译者注:原文来自 Boostrap 开发团队官方博客。详情请见 Bootstrap 4 官方网站。