流浪小猫的博客

Bootstrap 4 初探

· xcatliu

Bootstrap 作为 GitHub 上 Stars 最多的项目,可以说是万众瞩目,issues 和 pull requests 也居高不下,足以看出其后劲依然很足。

截止到本文发布,Bootstrap 4 已经推出 alpha 2 版本一个多月了,让我们一起玩转 Bootstrap 4 吧!

新特性§

先来看看 Bootstrap 4 的新特性

使用 Sass 替代 Less§

众多 css 预处理器里面,Sass 一直保持了最活跃的开发者社区,使用 Sass 替代 Less 想必是众望所归。

支持 Flexbox 了§

允许用户构建 Bootstrap 的时候将 flexbox 设置为 true,这样网格系统和一些组件都使用 flexbox 布局啦。

当然兼容性上会存在很大问题,不过如果开发只支持高级浏览器的企业应用,就赶紧拥抱 flexbox 吧。

新组件 Cards§

wells,thumbnails 和 panels 被废弃,使用 cards 替代。

提供更多自定义选项§

使用 Reboot 替代 Normalize.css,提供了更多的自定义选项。

不再支持 IE8§

虽然官方说不支持 IE8 了,但是 Bootstrap 4 在 IE8 下应该也不会有很多 bug,可能需要一些兼容性的处理即可。

重写了 JavaScript 组件§

然而还是基于 jQuery 开发,可能是为了适应更广大的用户群体吧。

主题市场§

Bootstrap 推出了官方的主题市场

Bootstrap 4 文档中值得关注的地方§

我推荐大家把 Bootstrap 4 文档阅读一遍,不过对于已经很熟悉 Bootstrap 3 的同学,可以只关注以下部分即可:

构建 Bootstrap§

注意:margin-top 不使用了,只有 margin-bottom,这样的好处是单向的 margin 更容易控制

移动支持§

新组件§

其他§

如何关注 Bootstrap 4 项目§

可以关注以下内容:

总结§