Bootstrap

Bootstrap 博客

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

Bootstrap 4.5.2

@mdo 2020 年 8 月 6 日

今天的补丁版本旨在解决 Bootstrap 4 的最后几个版本中引入的一些小问题。继续阅读以了解详细信息，并在准备好时更新。

从 v4.4.0 中添加响应式容器到最近的行和列调整，我们一直在对网格系统进行增量更改。虽然我们的更改解决了一些问题，但它们也破坏了其他行为并引入了新的复杂性。

今天的发布回滚并恢复了一些内容

  • #31438 恢复了 make-container-max-widths 混合。 我们自己不会使用这个混合，但它将在今天的发布中保留在代码库中，直到 v4 的剩余部分。我们也添加了弃用通知。

  • #31439 从 .row 中删除了 flex: 1 0 100%。 这是为了解决在 v4.4.0 中添加响应式容器后，导航栏组件内部缩小的行问题。删除它将我们恢复到预期的网格和弹性行为——不幸的是，您的行在没有进一步更改的情况下会缩小。我们可以添加额外的自定义 CSS 来解决这个问题，但这似乎过于仓促。相反，将 .flex-fill 应用于 .row，您的行将像往常一样工作。

类似地，v4.5.1 已经删除了 .col 上的 min-width: 0。 此更改是为了解决 <pre> 元素不适合列的问题。这是弹性盒工作方式的一个问题，其中弹性容器不能缩小到其子元素的内容之外。我们建议您根据需要使用自定义实用程序应用此设置，而不是强制将其应用于每个列。（我们还将在 v5 中添加此设置作为新的实用程序。）

我们知道这种小问题会让你退步，所以请接受我们对这些错误的道歉。请务必阅读上面提到的拉取请求，以了解发生了什么以及我们如何修复它。 这个 CodePen 演示 包含了所有已知的网格问题和修复。

Bootstrap 4.5.1

@mdo 2020 年 8 月 4 日

我们今天发布了最新的补丁版本，以修复 Bootstrap 4 中的一些错误。虽然我们的重点仍然是 v5 的第二个 alpha 版本（将在接下来的几周内发布），但我们希望 v4 尽可能稳定可靠。

我们接下来的几个 Bootstrap 4 版本将继续这种趋势，专注于错误修复、文档改进，以及（稍后）帮助弥合与 v5 之间差距的功能。

更改

也提供在 GitHub 上的 v4.5.1 版本 中。

CSS

  • #30808: 简化卡片中的 list-group 边框
  • #30810: 为 .custom-check 添加 z-index 以修复它们在 CSS 列中的渲染
  • #30817: 为 .card-img-overlay 添加 border-radius
  • #30830: 避免与具有类的组件发生冲突
  • #30922: 修复自定义控件禁用选中状态的颜色
  • #30932: 在 .text-break 实用程序中恢复 word-break: break-word;。
  • #30940: 阻止 .row 在弹性容器中缩小
  • #30957: 使自定义表单状态的 box-shadow 无效
  • #30959: IE11 中的吐司
  • #30960: 修复 IE11 中输入组中验证工具提示的对齐方式
  • #30965: 改善 IE 中的浮动标签示例
  • #30966: 改善 Edge 和通用重构的浮动标签
  • #30969: 删除编译后的 CSS 中重复的容器断点
  • #30999: 由于意外的副作用，恢复 .col 上的 min-width: 0
  • #31148: 删除自定义控件上的重复属性
  • #31165: 从文档子导航和吐司中删除 backdrop-filter
  • #31339: 添加链接以在 GitHub 上查看文档页面
  • #31347: 关闭手风琴的滚动锚定
  • #31381: 从吐司中删除 overflow: hidden

JavaScript

  • #30326: 阻止溢出的静态背景模态动画
  • #30936: 通过 JavaScript 在模态中添加 role="dialog"
  • #30992: 避免阻止输入事件 onclick
  • #31155: 在显示吐司之前清除超时

构建

  • #30797: 修复发布脚本文档
  • #31011: 更新 Babel 配置
  • #31296: 更新到 Ruby 2.7 和 Bundler 2.x

文档

  • #30809: 更新响应式 SVG 图像的文档说明
  • #30813: 在 extend/icons.md 页面中提及 Bootstrap 图标
  • #30896: 改善下载页面上的措辞
  • #30897: 阻止跳过链接在文档中与标题重叠
  • #30973: 通过从 .nav-link 中删除 .nav-item 来更新一些导航示例，以保持一致性
  • #31070: 修复一些损坏的示例和错别字
  • #31135: 将颜色实用程序调用移至页面开头
  • #31234: 清理文档表单以提高可访问性
  • #31344: 在“需要 JavaScript 的组件”页面中提及 Toast

前往 v4.5 文档 查看最新版本。完整版本已发布到 npm，并将很快出现在 BootstrapCDN 和 Rubygems 上。

接下来

我们将在未来几周内发布 v5 的第二个 Alpha 版本。由于我们在这段前所未有的时期专注于自身，并且都抽出了一些时间休息，所以发布进度略有延迟。对于让大家等待 v5，我们深感抱歉，希望您能理解。

在 v5 的第二个 Alpha 版本之后，我们将针对第一个 Beta 版本发布最终的 Alpha 版本，以及更多针对 v4 的补丁。我们还将很快发布 Bootstrap 图标。敬请期待！

支持团队

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

Bootstrap 图标 Alpha 5

@mdo 2020 年 6 月 26 日

今天，我们发布了 Bootstrap 图标 的第五个也是最后一个 Alpha 版本。在今天的 Alpha 版本发布之后，我们将继续对现有图标进行最后的润色，完成更多请求，并为稳定的 v1 版本做好准备。敬请期待！

1,000+ 个图标

此版本新增近 300 个新字形，使我们的图标总数突破 1,000 个。我们完善了所有日历图标以添加范围和事件，添加了一套新的电话图标，添加了大量新的设备和硬件图标，数十个徽章等等。

All Bootstrap Icons

与我们之前的 Alpha 版本一样，我们不仅拥有大量全新的图标，而且还对现有图标进行了数十项修复和改进。我们改进了路径以减小图标文件大小，花费更多时间使图标像素完美，并在 Figma 文件中减少了矢量技巧。此外，我们更新了图标处理脚本，以单独读取每个 SVG 的 `viewBox` 尺寸以设置其 `width` 和 `height`。在未来的更新中，这将使我们能够创建不同尺寸的图标，而不是我们默认的 16x16。

新的 SVG 精灵

除了数百个新图标外，我们还添加了一个新的 `bootstrap-icons.svg` 精灵。对于那些不熟悉 SVG 精灵的人来说，它允许您加载单个资产并在整个项目中引用其片段，而无需插入 SVG 的整个 HTML。

以下是导入后它如何工作的简要说明

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

我们希望在未来包含一些围绕此方面的优化，因为这是我们首次尝试使用 SVG 精灵系统。欢迎您在我们的问题中提供反馈和想法！

即将推出 v1 稳定版

v1 稳定版中最大的功能将是 图标 Web 字体。目前正在进行一个 PR，需要进一步清理 SVG 路径，以及一些工具改进。总的来说，感觉非常有希望！

虽然图标字体在实现方面有很多优势，但请注意，它们本身并不是访问者最易访问的选择。SVG 提供了更多控制和样式选项，并允许您从一开始就通过 `aria` 角色和 `<title>` 来实现可访问性。

如果您有关于如何改进我们的图标、文档或工具以使其更易于访问和使用的方法，请随时分享。

除此之外，我们将继续清理和改进现有图标，然后目标是添加一些新的图标。

下载

Alpha 5 已发布到 GitHub 和 npm（包名为 `bootstrap-icons`）。您可以从 GitHub 获取它，通过更新到 `v1.0.0-alpha5`，或通过从 Figma 获取图标。

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 作为依赖项，但你不会注意到任何区别。这次迁移是 @Johann-S（我们现在的主要 JavaScript 维护者）完成的一项巨大工作。它标志着该框架多年来最大的变化之一，这意味着使用 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 做出贡献的维护者。

Bootstrap 图标 Alpha 4

@mdo 2020年5月21日

随着今天发布的 Alpha 4 版本，Bootstrap Icons 即将突破 700 个图标！我们花了一些时间改进构建流程，添加了大量新图标，并修复了一些错误和不一致之处。

我们发布了大量新的电商图标，满足您所有购物车需求，还添加了大量日历选项（我无法决定一个设计），大量新的形状箭头等等。

约 700 个图标！

本版本新增 140 个图标，我们已经接近 700 个图标。我们很可能在下个版本中突破这个数字，但在此之前，您可以自己看看图标的广度。每个图标都经过重新处理，以解决 SVGO 问题，这些问题导致它们无法在某些应用程序中打开。

All Bootstrap Icons

下载

Alpha 4 已经发布到 GitHub 和 npm（包名 bootstrap-icons）。您可以从 GitHub 获取它，更新到 v1.0.0-alpha4，或从 Figma 获取图标。