都 Bootstrap 5 了,你还在用几?

12,097 阅读2分钟

千呼万唤的 Bootstrap 5 alpha 终于出来了!其中最大的改变就是 Bootstrap 不再依赖 jQuery,不再支持 IE。注意:不是不支持 jQuery,是不再依赖!v5 将更多的聚焦未来,虽然未来未来。期许已久的 CSS 变量,更快的 JavaScript,更少的依赖,更好的 API,都将出现在 Bootstrap 5。

Logo 改进

设计灵感来自 Bootstrap 最初的 CSS 版本,新 Logo 两端是 CSS 中最常用的一对花括号。我个人很喜欢 :)

jQuery 与 JavaScript

伟大的 jQuery 使复杂多变的 JavaScript 变得更容易使用,赋予更多的人参与前端编程,为 Bootstrap 生态提供了大量的插件。 但随着前端开发工具和浏览器的飞速发展,使得 v5 可以放弃对 jQuery 的依赖。这是许多年以来 Bootstrap 最大的改变,也意味着基于 Bootstrap 5 构建的项目,文件更小,页面加载更快。所有有关 JS 的改动可以在此查阅

CSS 自定义属性

由于不再支持 IE,Bootstrap 5 开始使用 CSS 自定义属性。在 v4 中只包含了少量 root 变量定义颜色和字体,现在 v5 已经把它们添加到组件和布局选项中了。 v5 正在同时使用 Sass 和 CSS 的自定义属性,创建一个更灵活的系统。

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};
}

可以查阅更多关于这方面的信息,以 Table 的文档为例

自定义文档的改进

v5 在文档方面做了很多工作:更多的说明、去除含糊不清的地方、更多的扩展支持。一切都从这个全新的板块开始。在自定义主题方面,v5 充实了更多内容,甚至提供了一个 npm 的初始项目 可以更快更容易地开始,同时也方便以此为 GitHub 中的一个模板 repo 去 fork。

v5 也扩展了调色盘,内置扩展的颜色系统可以让你更容易地定义 APP 的外观,尤其是对比色的改进,甚至在颜色文档页面提供了对比色的度量标准。

表单的改进

v5 全面梳理了表单文档和表单组件,整合所有的表单样式,创建了全新的表单板块(包括 input group 组件)。重新设计了所有的表单控件,在 v4 引入了表单控件套装——checks、radios、switches、files 和其它——但这只是针对浏览器默认表单控件的扩展。现在,在 v5 中表单控件已经彻底实现重定义,统一了各个浏览器默认的表单控件外观

这一改进统一了表单控件在不同 OS 和浏览器下的表现和交互。需要强调的是,改进兼顾了语意化,保持标准的原生,并没有引入额外的标签,用的依然是原生的控件标签

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

可以到表单文档这里看个究竟

Utilities API

喜闻乐见地是,在过去的十几年,总有开发者用新的 CSS 库和工具包来挑战 Bootstrap 原有的方式。它们耳目一新,也赋予 v5 更多的机会去探讨和迭代。比如,v5 引入了一个全新的 utility API

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);

强化的 Grid 系统

设计 v5 并不是要彻底脱离 v4,而是希望每一个人都可以很容易地升级,不再重演从 v3 升级到 v4 的艰难。v5 保留大量的 Grid 系统原有的设计,在此基础上添加一些改动,而不是用新的潮流的做法完全去取代。变化明细如下:

  • 引入新的 Grid 层级:xxl
  • .gutter 替换为 .g*,更多有关 gutter 信息,详见 v5.getbootstrap.com/docs/5.0/la…
  • 表单布局使用全新的 Grid 系统
  • 添加了竖向间隔的 class
  • 列默认不再使用 position: relative

还有哪些布局细节被重新设计和构建了,详见 v5.getbootstrap.com/docs/5.0/la…

文档

v5 的文档生成工具由 Jekyll 替换为 Hugo gohugo.io/

TODO:RTL,offcanvas 以及更多

  • RTL 布局将由官方彻底解决
  • 应用 offcanvas 菜单 github.com/twbs/bootst…
  • 正在评估:Sass 模块系统、增加 CSS 自定义属性、嵌入 SVG 到 HTML 中(而不是嵌入到 CSS 中)......

现在就开始!

一头扎进 v5.getbootstrap.com/ 探寻去吧!或者,如果你总是充满好奇地喜欢“一顿操作猛如虎”,可以执行: npm i bootstrap@next

怎么,学不动了?