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

lidashuang 发布于2019-08-30 13:00 / 3398人阅读

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

Bootstrap 这个号称世界第一的 responsive 和 mobile 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 的栅格系统和组件，直接进入未来模式。

去掉了 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 的类，还有很多新的工具类。

Alpha 2 vs Alpha 1

再来看看 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 的新特性。

Reboot

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

hidden 属性



[hidden] { display: none !important; }

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

优化触摸屏的点击延时

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

响应式增强

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

.hidden-*-*

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

新组件 Card

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.
      Someone famous in Source Title
    
  


  
    
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      Someone famous in Source Title

用 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;
}

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

.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 v4.0

idc机房托管云服务器销毁的云服务器怎么再登上 bootstrap的 bootstrap的按钮 bootstrap的框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115228.html

12个前端开发应该知道的终端命令

摘要：是一个用于通过，以及其他协议发出请求的命令行工具，它可以下载文件，检查响应标题和访问远程数据。每个有若干个，每个又可以分成多个窗格是一个终端复用软件，协议发布。熟练掌握一些常见的终端命令，减少重复的输入输出，会大大提高工作效率，本文总结了12个常见的命令，有些是内置的，有些只需要不到一分钟即可安装体验。 Curl Curl是一个用于通过HTTP（s），FTP以及其他协议发出请求的命令...

waterc 2019-07-31 14:35 评论0 收藏0
12个前端开发应该知道的终端命令

摘要：是一个用于通过，以及其他协议发出请求的命令行工具，它可以下载文件，检查响应标题和访问远程数据。每个有若干个，每个又可以分成多个窗格是一个终端复用软件，协议发布。熟练掌握一些常见的终端命令，减少重复的输入输出，会大大提高工作效率，本文总结了12个常见的命令，有些是内置的，有些只需要不到一分钟即可安装体验。 Curl Curl是一个用于通过HTTP（s），FTP以及其他协议发出请求的命令...

khlbat 2019-06-27 17:38 评论0 收藏0
12个前端开发应该知道的终端命令

摘要：是一个用于通过，以及其他协议发出请求的命令行工具，它可以下载文件，检查响应标题和访问远程数据。每个有若干个，每个又可以分成多个窗格是一个终端复用软件，协议发布。熟练掌握一些常见的终端命令，减少重复的输入输出，会大大提高工作效率，本文总结了12个常见的命令，有些是内置的，有些只需要不到一分钟即可安装体验。 Curl Curl是一个用于通过HTTP（s），FTP以及其他协议发出请求的命令...

TesterHome 2019-06-21 14:26 评论0 收藏0
Sublime text 前端开发插件安装和配置

摘要：前端开发配置此文件目录中文件主要是关于的插件配置，快捷键配置，主题和字体配置。插件列表所有插件都可以使用安装，具体的安装方法可以自行谷歌安装，不在本文的介绍范围之内。这两个插件主要是平时使用或者是这些预编译语言有用，支持语法高亮。前端开发sublimeconfig mac配置此文件目录中文件主要是关于sublime的插件配置，快捷键配置，主题和字体配置。插件列表所有插件都可以使...

glumes 2019-08-19 17:20 评论0 收藏0
es6/es7之Decorator装饰器

摘要：装饰器顾名思义就是装饰某种东西的方法，可以用来装饰属性变量函数类实例方法本质上是个函数。以符开头，函数名称自拟。爱吃苹果装饰器装饰类爱吃苹果结果是这个类本身就可以通过修改类的属性增加属性被装饰的对象可以使用多个装饰器。 @Decorator 装饰器是es7的语法，这个方法对于面向切面编程有了更好的诠释，在一些情境中可以使用，比如路人A的代码实现了一需求，路人B希望用A的方法来实现一个新...

yanest 2019-08-26 10:41 评论0 收藏0