爱吃螃蟹的前端：登上 Bootstrap 4.0 的大船

摘要：去掉了对的支持，并使用和单位。更新了所有伪元素选择器的使用规范，首选双冒号如，而不是。卡片现在有不同的轮廓和进一步支持基于类的扩展。代表水平方向，代表全部。

Bootstrap 这个号称世界第一的 responsive 和 mobile first 前端样式组件库去年八月发布了 v4.0 Alpha，去年年底时发布了 v4.0 Alpha 2 版本。可能是 v3 用的过于顺手，直到今天才决定踏上 v4.0 这艘船，让我们一起来看它是说翻就翻，还是屹立不倒。

根据官方文档，我们先来看看 v4.0 相比 v3.0 做了那些改变：

从 Less 迁移到 Sass。感谢 Libsass, Bootstrap 现在编译的更快了，而且 Sass 社区在快速壮大。

升级栅格系统。我们添加了新的栅格排列来根更好地适应移动设备，并且完全重构了语义的 mixins。

有了可选的 flexbox 支持。通过一个变量开关，你可以重新编译你的CSS 使用基于 flexbox 的栅格系统和组件，直接进入未来模式。

去掉了 well，thumbnail 和 panel，并用 card 来代替。 card 是 Bootstrap 中一个全新的组件，你会觉得它似曾相识，因为它和 well，thumbnail 和 panel 的用法差不多，并且会更好。

加固了所有的 HTML reset 代码，用一个新的模块：Reboot。 Reboot 做了一些 Normalize.css 没有做的事。在一个多带带的 Sass 文件中给你提供了很多的重置选项，例如：box-sizing: border-box, margin tweaks 等。

全新的自定义选项。并非像 v3 中那样把装饰性样式，如：gradients, transitions, shadows 等放在各自的文件中。我们把这些选项移到了 Sass 的变量中。希望默认的把 transitions 应用到所有元素上或者禁用掉圆角？你只需要更新一个变量然后重新编译。

去掉了对 IE8 的支持，并使用 rem 和 em 单位。抛弃 IE8 意味着我们可以使用 CSS 中最好的那些属性而不用被 CSS hacks 或 fallbacks 所牵制。使用 rem 和 em 替代像素更适合做响应式排版，调整组件大小更方便了。如果你需要支持 IE8，继续用 Bootstrap 3 就好。

重写了我们所有的 JavaScript 插件。所有插件使用 ES6 重写，得以使用最新的 JavaScript 特性。并且他们现在支持 UMD，通用的 teardown 方法，参数类型检查，等很多优点。

增强 tooltip and popover 的自动定位，多亏了 Tether 这个开源库的支持。

改进了文档。我们用 Markdown 重写了它，并且添加了一些好用的插件来提高例子和代码片段的效率。还用这种方法改进了搜索。

当然还有成吨的优化！你可以自定义 form control，margin 和 padding 的类，还有很多新的工具类。

再来看看 Bootstrap 4.0 Alpha 2 相比之前的 Alpha 1 版本做了哪些改进工作：

使用数字堆叠彻底重构了间隔工具类(spacing utilities)（避免与栅格混淆）

持续地重构，在多个组件中使用相同的类来替换某些根据标签的选择器（包括分页，列表等）。还有更多其他组件也在重构中。

恢复媒体查询和栅格容器的单位 rem 到 pixel 因为 viewports 不会被 font-size 影响。（详情见 issue #17403。我们还有成吨的栅格需要处理。请关注 issue #18471）

为了组件的一致性恢复边框宽度 .0625rem 到 1px，以避免缩放和 font-size的 bug 在不同浏览器的兼容问题。

重命名 .img-responsive 为 .img-fluid 以避免将来各种响应图像解决方案出现混乱。

替换 ZeroClipboard 为 clipboard.js，可以不依赖 flash 了。

输入框和按钮共享相同的边框值以确保组件总是同样大小。

更新了所有伪元素选择器的使用规范，首选双冒号（如，::before 而不是 :before）。

卡片现在有不同的轮廓和 mixins 进一步支持基于类的扩展。

用来实现 floats 和文字对齐的工具类现在有了响应式范围。这意味着我们已经放弃了非响应类，以避免重复。

增加了对 jQuery 2 的支持

还有成百上千的 Sass 优化，bug 修复，文档更新等等。

看完这些，心里大致有了个底：
js 的 API 基本没变（算你有良心）。well，thumbnail 和 panel 被干掉了，全部用 card 代替（之前的确实太复杂）。长度单位被换成了 rem 和 em，但是 rem 有兼容性 bug，某些地方又被换回了 "px"（心好累）。添加了一些新的工具类，可以直接写 class 设置间隔了（敲黑板，曾经为了偷懒，我们一直在这么玩）。

下面让我们来仔细看看 Bootstrap v4.0 Alpha 2 的新特性。

v4.0 中使用 Reboot 重置浏览器的默认样式。

[hidden] { display: none !important; }

HTML5 添加了一个全局的新属性 [hidden]，它的默认效果和 display: none 一样。这里借用了 PureCSS 的思想。虽然 [hidden] 在 IE9-10 中并不被支持，通过明确的声明解决了这个问题明确声明.

值得一提的是，v4.0 针对触摸屏设备的点击延时做了优化。做过移动端页面调优的同学都知道，在移动设备上，用户的点击事件有大约 300 毫秒的延时，这个特性是为了方便识别的用户双击操作，以自动放大或缩小屏幕。

v4.0 的一大特点是，增强了对响应式的支持，或者说：强制你写出支持响应式的页面。

v4.0 已经没有了 .hidden 这个通用的 class，想要隐藏某个元素的话强烈建议遵循响应式的需求使用响应式的 class 向上生效，或者向下生效。

v4.0 去掉了 well，thumbnail 和 panel，用一个 card
解决所有问题。

  
  

    
Card title
    
Some quick example text to build on the card title and make up the bulk of the card"s content.
    Button
  

这样可以少纠结那些的细小的区别了。

  

    

      
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      
    
  


  

    

      
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      
    
  

用 card 实现的 well

v4.0 中新增了很多方便调用的工具类，我们来大概刷一遍。

.m-t-0 {
  margin-top: 0 !important;
}

.m-l-1 {
  margin-left: $spacer-x !important;
}

.p-x-2 {
  padding-left: ($spacer-x * 1.5) !important;
  padding-right: ($spacer-x * 1.5) !important;
}

.p-a-3 {
  padding: ($spacer-y * 3) ($spacer-x * 3) !important;
}

哇擦！这些用来设置间距的工具类，你们感受一下。x 代表水平方向，a 代表全部。最后的数字可以简单理解为一个字符的宽度（水平方向）或者一行的高度（垂直方向）。使用后的感受是：这样调间距方便极了，有木有！

Bootstrap 甚至还包含了一个 .m-x-auto 的 class，用它可以快速把水平 margin 设为 auto。

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  @include center-block;
}

使用 margin 的 auto 值剧中块级元素。

 .text-hide {
    font: "0/0" a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

// Usage as a mixin
.heading {
  @include text-hide;
}

通过给文字设置透明的颜色来隐藏文字，用来做 logo 图片的文字隐藏最好不过了。

// Class
.invisible {
  visibility: hidden;
}

// Usage as a mixin
.element {
  .invisible();
}

替开发者想的真是周到。

大国之重器，前端黑科技
我们啥都不缺！
—Bootstrap v4.0