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

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

4.0 vs 3.0

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

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

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

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

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

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

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

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

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

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

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

  • 当然还有成吨的优化!你可以自定义 form controlmarginpadding 的类,还有很多新的工具类。

Alpha 2 vs Alpha 1

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

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

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

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

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

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

  • 替换 ZeroClipboardclipboard.js,可以不依赖 flash 了。

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

  • 更新了所有伪元素选择器的使用规范,首选双冒号(如,::before 而不是 :before)。

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

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

  • 增加了对 jQuery 2 的支持

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

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

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

Reboot

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

hidden 属性

<input type="text" hidden>

[hidden] { display: none !important; }

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

优化触摸屏的点击延时

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

响应式增强

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

.hidden-*-*

《爱吃螃蟹的前端:登上 Bootstrap 4.0 的大船》

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

新组件

Card

v4.0 去掉了 wellthumbnailpanel,用一个 card
解决所有问题。

《爱吃螃蟹的前端:登上 Bootstrap 4.0 的大船》

<div class="card">
  <img class="card-img-top" data-src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

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

《爱吃螃蟹的前端:登上 Bootstrap 4.0 的大船》

<div class="card card-inverse card-success text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-inverse card-info text-xs-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

card 实现的 well

工具 Class

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

Spacing Class

.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。

.center-block

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

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

使用 marginauto 值剧中块级元素。

.text-hide

 .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 图片的文字隐藏最好不过了。

.invisible

// Class
.invisible {
  visibility: hidden;
}

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

替开发者想的真是周到。

总结

《爱吃螃蟹的前端:登上 Bootstrap 4.0 的大船》

大国之重器,前端黑科技
我们啥都不缺!

—Bootstrap v4.0

    原文作者:Integ
    原文地址: https://segmentfault.com/a/1190000005014014
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞