Bootstrap

Bootstrap 博客

关于 Bootstrap 的所有新闻和公告，包括新版本、Bootstrap 主题 和 Bootstrap 图标。

Bootstrap 5 alpha 发布！

@mdo 2020 年 6 月 16 日

Bootstrap 5 的第一个 alpha 版本已经发布！ 我们已经努力工作了几个月来完善我们在 v4 中开始的工作，虽然我们对我们的进展感到满意，但还有更多工作要做。

我们一直致力于使从 v4 迁移到 v5 更加容易，但我们也没有害怕放弃过时或不再合适的东西。因此，我们很高兴地说，在 v5 中，Bootstrap 不再依赖 jQuery，并且我们已经放弃了对 Internet Explorer 的支持。我们正在集中精力构建更面向未来的工具，虽然我们还没有完全实现，但 CSS 变量、更快的 JavaScript、更少的依赖项和更好的 API 的承诺对我们来说确实感觉很对。

在你开始更新之前，请记住 v5 现在处于 alpha 阶段——在我们的第一个 beta 版本发布之前，将会继续出现重大更改。我们还没有完成添加或删除所有内容，因此在你遇到问题或反馈时，请查看开放的问题和拉取请求。

现在让我们深入了解一些亮点！

全新外观和感觉

我们在 v4.5.0 中对文档主页进行了改进，并更新了其余文档的外观和感觉。我们的文档页面不再是全宽的，以提高可读性，使我们的网站感觉不那么像应用程序，而更像内容。此外，我们升级了侧边栏，使用可扩展部分（由我们自己的 Collapse 插件提供支持）以实现更快的导航。

New Bootstrap docs layout

我们还推出了全新的徽标！v5 稳定后会详细介绍，但可以肯定地说，我们想对圆角正方形中的旧 B 进行一些升级。

New Bootstrap logo

受创建此项目之初的 CSS 的启发，我们的徽标体现了规则集的感觉——由花括号包围的样式。我们非常喜欢它，相信您也会喜欢。随着我们不断完善和发布新版本，预计它会随着时间的推移推广到 v4 的文档、我们的博客等。

jQuery 和 JavaScript

在过去十多年中，jQuery 为数百万（数十亿？）人带来了对复杂 JavaScript 行为前所未有的访问权限。就我个人而言，我永远感谢它赋予我的力量和支持，让我继续编写前端代码、学习新事物并接受社区的插件。也许最重要的是，它永远改变了 JavaScript 本身，而这本身就是 jQuery 成功的一个纪念碑。感谢每一位为 jQuery 做出贡献的贡献者和维护者，使像我这样的人能够实现这一切。

由于前端开发工具和浏览器支持的进步，我们现在能够将 jQuery 作为依赖项删除，但您不会注意到任何不同。此迁移是我们当前的主要 JavaScript 维护者 @Johann-S 承担的一项重大任务。它标志着该框架多年来最大的变化之一，这意味着使用 Bootstrap 5 构建的项目在文件大小和页面加载方面将大大减轻。

除了删除 jQuery，我们还在 v5 中对 JavaScript 进行了一些其他更改和增强，这些更改和增强侧重于代码质量，并弥合了 v4 和 v5 之间的差距。我们另一个较大的更改是删除了大部分 Button 插件，转而采用仅 HTML 和 CSS 的方法来切换状态。现在，切换按钮由复选框和单选按钮提供支持，并且更加可靠。

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

有兴趣帮助 Bootstrap 的 JavaScript 吗？我们一直在寻找新的团队贡献者来帮助编写新的插件、审查拉取请求和修复错误。请告诉我们！

CSS 自定义属性

如前所述，由于不再支持 Internet Explorer，我们已开始在 Bootstrap 5 中使用 CSS 自定义属性。在 v4 中，我们只包含了一些用于颜色和字体的根变量，现在我们为一些组件和布局选项添加了它们。

以我们的.table组件为例，我们添加了一些局部变量，使条纹、可悬停和激活的表格样式更容易实现。

.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 自定义属性的强大功能，以构建更灵活的系统。您可以在表格文档页面中了解更多关于此内容的信息，并期待在不久的将来看到更多类似按钮组件的应用。

改进的自定义文档

我们已经深入研究并改进了几个地方的文档，提供了更多解释，消除了歧义，并为扩展 Bootstrap 提供了更多支持。这一切都始于一个全新的自定义部分。

Bootstrap 5 customize docs

v5 的自定义文档扩展了 v4 的主题页面，包含更多内容和代码片段，用于在 Bootstrap 的源 Sass 文件的基础上进行构建。我们在这里完善了更多内容，甚至提供了一个入门 npm 项目，让您更快、更轻松地开始使用。它也可以作为 GitHub 上的模板仓库使用，因此您可以自由地 fork 并使用它。

Bootstrap 5 color palette

我们在 v5 中也扩展了我们的调色板。内置了一个广泛的色彩系统，您可以更轻松地自定义应用程序的外观，而无需离开代码库。我们还做了一些工作来改善颜色对比度，甚至在我们的颜色文档中提供了颜色对比度指标。希望这将继续帮助使 Bootstrap 支持的网站更容易被全世界的人访问。

更新的表单

除了新的自定义部分之外，我们还彻底改造了我们的表单文档和组件。我们将所有表单样式整合到一个新的表单部分（包括输入组组件），以给予它们应有的重视。

New Bootstrap 5 forms docs

除了新的文档页面之外，我们还重新设计并去除了所有表单控件的重复内容。在 v4 中，我们引入了一套广泛的自定义表单控件——复选框、单选按钮、开关、文件等等——但这些控件是在每个浏览器提供的默认控件之外的。在 v5 中，我们已经完全自定义了这些控件。

New Bootstrap 5 checks

如果您熟悉 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>

每个复选框、单选按钮、选择框、文件、范围等等都包含自定义外观，以统一表单控件在操作系统和浏览器之间的样式和行为。这些新的表单控件都是基于完全语义的标准表单控件构建的——不再有冗余的标记，只有表单控件和标签。

请务必探索新的表单文档，并告诉我们您的想法。

实用程序 API

我们很高兴看到有这么多人正在构建新的、有趣的 CSS 库和工具包，挑战着我们过去十多年来在网络上构建的方式。至少可以说，这令人耳目一新，并为我们所有人提供了一个讨论和迭代的机会。因此，我们在 Bootstrap 5 中实施了一个全新的实用程序 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);

自从实用程序成为构建的首选方式以来，我们一直在努力找到在 Bootstrap 中实施它们的正确平衡，同时提供控制和定制。在 v4 中，我们通过全局 $enable-* 类来实现这一点，并且我们甚至在 v5 中延续了这种做法。但是，通过基于 API 的方法，我们在 Sass 中创建了一种语言和语法，可以动态创建您自己的实用程序，同时还可以修改或删除我们提供的实用程序。这一切都要感谢 @MartijnCuppens，他也是 RFS 项目 的维护者，并且负责初始 PR 和后续改进。

我们认为这将改变那些通过我们的源文件构建 Bootstrap 的人的游戏规则，如果您还没有以这种方式构建 Bootstrap 驱动的项目，那么您一定会大吃一惊。

注意！ 我们已将一些以前的 v4 实用程序移至新的“帮助程序”部分。这些帮助程序是代码片段，比我们实用程序中常见的 property-value 配对更长。这只是我们以更易于命名的方式重新组织内容并改进文档的方法。

增强的网格系统

从设计上来说，Bootstrap 5 并不是对 v4 的完全背离。我们希望每个人都能更轻松地升级到这个未来的版本，因为我们已经听说了从 v3 到 v4 的升级路径的困难。出于这个原因，我们保留了大部分构建系统（减去 jQuery），并且我们还在现有的网格系统上进行了构建，而不是用更新、更酷的东西来替换它。

以下是我们网格中发生变化的概述

  • 我们添加了一个新的网格层级！欢迎 xxl。
  • .gutter 类已被 .g* 实用程序替换，就像我们的边距/填充实用程序一样。我们还添加了 网格间距选项，与您已经熟悉的间距实用程序相匹配。
  • 表单布局选项已被新的网格系统取代。
  • 添加了垂直间距类。
  • 列不再默认情况下为position: relative。

以下是如何使用新的网格间距类的快速示例

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

查看重新设计和重构的布局文档以了解更多信息。

CSS 的网格布局越来越适合黄金时段，虽然我们还没有在这里使用它，但我们正在不断地进行实验和学习。期待 v5 的未来版本以更多方式拥抱它。

文档

我们将文档静态站点生成器从Jekyll切换到Hugo。Jekyll 长期以来一直是我们选择的生成器，因为它易于启动和运行，并且在部署到 GitHub Pages 时非常简单。

不幸的是，这些年来我们在 Jekyll 中遇到了两个主要问题

  1. Jekyll 需要安装 Ruby
  2. 站点生成速度非常慢

另一方面，Hugo 是用 Go 编写的，因此它没有外部运行时依赖项，并且速度更快。我们构建当前的 master 分支站点，包括文档的 Sass -> CSS，大约需要 1.6 秒。我们的本地服务器在几毫秒内重新加载，而不是 8-12 秒，因此再次在文档上工作变得愉快。

如果没有 Hugo 的主要开发人员 Bjørn Erik Pedersen (@bep) 的帮助，Hugo 的切换是不可能的，他进行了一些代码库更改，使过渡成为可能并顺利进行！

还要感谢@xhmikosr，他领导了这项工作，转换了数百个文件，并与 Hugo 开发人员合作，确保我们的本地开发快速、高效且可维护。

即将推出：RTL、画布外和更多

在我们的第一个 alpha 版本中，我们没有时间处理很多事情，这些事情仍然在未来 alpha 版本的待办事项列表中。我们想在这里表达一下我们的爱，这样你就可以知道在 v5 的开发过程中我们关注的是什么。

  • RTL 即将到来！我们已经使用 RTLCSS 进行了尝试，并且正在继续探索逻辑属性。就我个人而言，对于我们花了这么长时间才正式解决这个问题，我感到抱歉，因为我知道社区付出了多少努力，以及对该项目的拉取请求。希望等待是值得的。

  • 我们有一个分叉版本的模态，它实现了画布外菜单。我们仍然需要做一些工作才能做到这一点，而不会增加太多开销，但拥有一个画布外包装器来放置任何值得侧边栏的内容——导航、购物车等——的想法非常棒。就我个人而言，我知道我们在这一点上落后于时代，但它仍然应该很棒。

  • 我们正在评估对代码库的许多其他更改，包括 Sass 模块系统、更多使用 CSS 自定义属性、将 SVG 嵌入 HTML 而不是 CSS 等等。

还有很多东西要来，包括更多文档改进、错误修复和生活质量改进。请务必查看我们的公开问题和 PR，看看您可以在哪里提供反馈、测试社区 PR 或分享您的想法。

入门

前往 https://v5.getbootstrap.com 探索新版本。 我们也已将此更新发布为 npm 预发布版本，因此如果您感觉大胆或对新功能感到好奇，您可以通过这种方式获取最新版本。

npm i bootstrap@next

下一步

我们仍然需要在 v5 中做更多工作，包括一些重大更改，但我们对这个版本感到非常兴奋。让我们尽情反馈，我们会尽力跟上大家的步伐。我们的目标是在 3-4 周内发布另一个 alpha 版本，之后可能还会发布几个版本。我们还将发布 v4.5.1 版本来修复一些回归问题，并继续缩小 v4 和 v5 之间的差距。

除此之外，请关注 Bootstrap 图标 项目、我们的 RFS 项目（现在在 v5 中默认启用）以及 npm 启动项目 的更多更新。

支持团队

访问我们的 Open Collective 页面 或我们的 团队成员 的 GitHub 个人资料，以帮助支持为 Bootstrap 做出贡献的维护者。

相关帖子