Bootstrap 5 Alpha发布啦！不再依赖jQuery，放弃支持IE-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

Bootstrap 5 的第一个 Alpha 版发布了！

几个月来我们一直在努力完善 v4 班中开始的各项工作，并对自己的进步感到很满意，但我们要做的事情还有很多。

我们一直在努力简化 v4 到 v5 的迁移过程，但也并不会驻足于那些已经过时或不再合适的内容上。因此，随着 v5 的发布我们很高兴地宣布，Bootstrap 不再依赖 jQuery，并且 我们放弃了对 Internet Explorer 的支持。我们的重心是构建面向未来的工具，虽然我们还没有完全做到这一点，但承诺带来 CSS 变量、更快的 JavaScript、更少的依赖项和更好的 API，对我们来说肯定是正确的选择。

在更新之前，请记住 v5 现在处于 Alpha 状态，在我们的第一个 Beta 版本发布之前还会有新的重大更改。我们还没有完成所有的增删工作，因此如果你有任何疑问或反馈，请检查 open issue 和 PR。

推荐学习：《bootstrap视频教程》

下面我们来深入探讨这个新版本的一些亮点！

新外观

我们以 v4.5.0 版本内文档首页的改进为基础，为其他文档带来了新的外观和体验。我们的文档页面不再以完整宽度呈现，以提高可读性，让我们的网站更像是内容风格而非应用风格。此外我们还升级了侧边栏，以使用可扩展的部分（由我们自己的 Collapse 插件提供支持）来实现更快的导航。

企业微信截图_15925382194879.png

我们还打造了一个全新的 Logo！详情在新版稳定下来后会进一步介绍，现在可以说的就是我们想给 Logo 来点新风貌。

企业微信截图_15925382249401.png

受一开始创建这个项目的 CSS 的启发，我们的 Logo 有一种规则集的感觉――由花括号包围的样式。我们很喜欢它，希望大家也能喜欢。随着我们不断完善和发布新版本，预期它会逐渐更新到我们的文档和博客中。

jQuery 和 JavaScript

在过去的十五年中，jQuery 为数以百万计（甚至数以十亿计？）的人们带来了对复杂 JavaScript 行为的强大支持。就我个人而言，我将永远感激它为我提供的能力和支持，它为我编写前端代码、学习新知识并利用社区中的插件提供了很多帮助。也许最重要的是，它永远改变了 JavaScript，而这也是 jQuery 成功的里程碑。感谢所有 jQuery 贡献者和维护者，他们为今天的这一切付出良多。

得益于前端开发工具和浏览器支持的进步，我们现在可以移除 jQuery 这个依赖项了，而用户并不会有什么感觉。我们的主要 JavaScript 维护者 @Johann-S 负责了这项艰巨的工作。它是这个框架多年来最大的变化之一，也意味着基于 Bootstrap 5 构建的项目将大幅缩减文件大小，并提升页面加载速度。

除了移除 jQuery 外，我们还对 v5 中的 JavaScript 做了其他一些更改和增强，主要侧重于提升代码质量并试图弥合 v4 和 v5 之间的鸿沟。我们的一大变化是放弃了 Button 插件的多数内容，而仅使用 HTML 和 CSS 来切换状态。现在，toggle 按钮由 checkbox 和 radio 按钮提供支持，并且更加可靠。

你可以在 GitHub 上的第一个 v5 alpha 项目中查看 JS 相关更改的完整列表。

1	`https://github.com/twbs/bootstrap/issues?q=label%3Ajs+project%3Atwbs%2Fbootstrap%2F11+is%3Aclosed`

CSS 自定义属性

如前所述，由于放弃了对 Internet Explorer 的支持，我们得以开始在 Bootstrap 5 中使用 CSS 自定义属性。在 v4 版中我们只包含了一些颜色和字体的根变量，现在我们加入了 CSS 自定义属性，让很多组件和布局选项受益。

以我们的.table 组件为例，其中添加了一些局部变量，让开发人员更容易做出 striped、hoverable 和 active 的表格样式：

.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};
  // Styles here...
}

我们正在努力利用 Sass 和 CSS 自定义属性的强大能力，以打造更加灵活的系统。你可以在 Tables 文档页面中查阅更多相关信息。不久的将来我们还会在按钮之类的组件中见到这些特性的应用。

1	`https://v5.getbootstrap.com/docs/5.0/content/tables/#how-do-the-variants-and-accented-tables-work`

改进的自定义文档

我们对文档做出了诸多改进，提供了更多解释，消除了歧义，并为 Bootstrap 的扩展提供了更多支持。首先要说的就是全新的“自定义”部分。

1	`https://v5.getbootstrap.com/docs/5.0/customize/overview/`

企业微信截图_15925382323106.png

v5 的“自定义”（Customize）文档在 v4 的“主题”（Theming）页面上进行了扩展，提供了更多内容和代码段，帮助开发人员基于 Bootstrap 的源 Sass 文件构建内容。我们在这里加入了更多内容，甚至提供了一个入门 npm 项目，帮助用户快速上手。它也是 GitHub 上的一个模板存储库，因此你可以自由 fork。

1	`https://github.com/twbs/bootstrap-npm-starter`

企业微信截图_15925382375768.png

我们也在 v5 中扩展了调色板。借助内置的丰富颜色系统，你可以更轻松地自定义应用的外观，过程中无需离开代码库。我们还做了一些工作来改善色彩对比度，甚至在色彩文档中提供了色彩对比度指标。希望这能为 Bootstrap 支持的站点带来更好的可访问性。

表单更新

除了新的“自定义”部分外，我们还对“表单”（Forms）文档和组件进行了全面修订。我们将所有表单样式合并到了一个新的“表单”部分（包括输入组组件），以给予它们应有的重视。

企业微信截图_15925382433785.png

除了新的文档页面外，我们还重新设计了所有表单控件，移除了重复内容。在 v4 版中，我们引入了一套丰富的自定义表单控件（check、radio、switch、file 等），但这些功能是对各款浏览器提供的默认设置的补充。在 v5 中，我们实现了完全自定义。

企业微信截图_15925382499835.png

如果你熟悉 v4 的表单标记，新内容接受起来也会很容易。表单控件合并为一组，并重新设计现有元素（而不是做新元素或伪元素）后，我们就能提供更加一致的外观和体验。

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