流浪小猫的博客

Bootstrap 4 初探

· xcatliu · Programmer ·

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 项目

可以关注以下内容:

总结

  • 看得出来 Bootstrap 4 提供了很大的自由性,鼓励用户自己编译自己需要的版本
  • Bootstrap 布局了 Theme 市场,相信社区会越来越活跃
  • Bootstrap 4 摒弃了 IE8,支持了 flexbox,是时候一起推动 css 的迭代了

本文遵循 CC BY-ND-ND 3.0 协议,转载请注明原作者,禁止商用,禁止演绎。


© 2012 - 2017 xcatliu
Hexo 强力驱动 · 主题 Milk