@julien-deramond 2024 年 2 月 20 日
Bootstrap v5.3.3 现已发布,包含错误修复、文档改进以及更多针对颜色模式的后续增强功能。继续阅读以了解亮点!
亮点
- 修复了颜色模式引入的一个重大更改,该更改要求在使用 Sass 构建 Bootstrap 时手动导入
variables-dark.scss
。现在,_variables.scss
将自动导入 _variables-dark.scss
。如果您之前已经手动导入 _variables-dark.scss
,您应该继续这样做,因为它不会造成任何问题,并且将在 v6 中成为首选方法。
- 修复了选择器引擎中的一个回归问题,该问题无法再处理多个 ID。
颜色模式
- 徽章现在使用
.text-bg-*
文本实用程序来确保文本始终可读(尤其是在浅色和深色模式下自定义颜色不同时)。
- 修复了我们的 `color-modes.js` 脚本,以处理操作系统设置为浅色模式且网站使用自动颜色模式的情况。如果您从我们的文档中复制了脚本,您应该将 此更改 应用到您自己的脚本中。
- 修复了颜色模式文档中的颜色方案描述,以显示 `color-scheme()` 仅接受 `light` 和 `dark` 值作为参数。
其他
- 在消毒器中允许 `<dl>`、`<dt>` 和 `<dd>`。
- 取消了模态和画布标题的均匀项目分配。
- 修复了手风琴 CSS 选择器,以避免在嵌套手风琴时出现继承问题。
- 修复了验证状态表单控件的焦点框阴影。
- 修复了已选中按钮的焦点环。
- 修复了产品示例移动导航栏切换器。
- 更改了轮播控件图标的 RTL 处理。
文档
- 删除了示例代码块不必要的右边距。
- 修复了 背景实用程序示例 部分中强调文本实用程序的使用。
- 添加了有关如何呈现默认展开的手风琴的技术说明。
- 更改了 Vite 指南中的 Vite 配置路径导入。
- 增强了 `card-img-*` 类别的卡片图像描述。
- 在 Sass 自定义页面中提到了 `shift-color()` 函数,位于 `tint-color()` 和 `shade-color()` 之间。
- 在备忘单示例导航按钮中添加了缺少的 `type="button"` 属性。
- 更新了自定义页面中的颜色表,使其具有响应性。
获取发布
前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm
阅读 GitHub v5.3.3 变更日志,以获取此版本中所有更改的完整列表。
支持团队
访问我们的 Open Collective 页面 或我们的 团队成员 的 GitHub 个人资料,以帮助支持为 Bootstrap 做出贡献的维护者。
@julien-deramond 2023 年 9 月 14 日
Bootstrap v5.3.2 现已发布,其中包含错误修复、文档改进以及更多针对颜色模式的后续增强功能。继续阅读以了解亮点!
亮点
- 将百分比单位传递给全局 `abs()` 自 Dart Sass v1.65.0 起已弃用。在使用 Dart Sass 编译 Bootstrap 时,会导致弃用警告。通过更改传递给 `divide()` 函数的值,已在内部修复此问题。`divide()` 函数本身尚未修复,以便我们能够继续支持 node-sass 的跨平台兼容性。在 v6 中,这将不再是一个问题,因为我们计划放弃对 node-sass 的支持。
- 在折叠目标中使用多个 ID 之前不再起作用,现已修复。
颜色模式
- 提高了浅色和深色模式下表单范围轨道背景的颜色对比度。
- 修复了表格状态渲染,重点关注深色模式下的条纹表格,以提高颜色对比度。
- 允许为颜色模式自定义 `<mark>` 颜色。
文档
获取发布
前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm
阅读 GitHub v5.3.2 变更日志 以获取此版本中所有更改的完整列表。
支持团队
访问我们的 Open Collective 页面 或我们的 团队成员 的 GitHub 个人资料,以帮助支持为 Bootstrap 做出贡献的维护者。
@mdo 2023 年 9 月 12 日
Bootstrap 图标 v1.11.0 已发布,包含 100 个新图标,包括新的软盘图标、更多品牌图标、新的用户图标、新的表情符号、一些生日蛋糕、一些新的科学图标等等。我们现在拥有 **超过 2000 个图标**!
100 个新图标
以下是 v1.11.0 中所有新图标的快速浏览。
查看拉取请求 以获取有关添加和更新的图标的详细信息。
我还在此版本中开始为图标页面添加新的 added
标签。到目前为止,我只标记了 v1.10.0 和 v1.11.0 版本,但更多版本将会陆续添加。一旦所有版本都标记完毕,您就可以搜索每个版本中添加的图标。敬请期待!
想要更多新图标?前往 问题跟踪器 查看开放请求或提交新的请求。
安装
要开始使用,请通过 npm 安装或更新
或 Composer
composer require twbs/bootstrap-icons
您也可以 从 GitHub 下载版本,或 仅下载 SVG 和字体(不包含其他存储库文件)。
Figma
Figma 文件现已发布到 Figma 社区!它与您在以前版本中看到的 Bootstrap 图标 Figma 文件 相同,只是对于使用该应用程序的用户来说更容易访问。
@mdo 2023 年 7 月 26 日
Bootstrap v5.3.1 已发布,包含错误修复、文档改进以及更多针对颜色模式的后续增强功能。继续阅读以了解亮点!
- 颜色模式
- 通过将
$gray-500
替换为 $gray-300
作为主体颜色,提高了深色模式的颜色对比度。
- 将我们的颜色模式切换器 JavaScript 添加到我们的示例 ZIP 下载中。
- 组件
- 改进了所有
.nav-link
的禁用样式,提供了 .disabled
和 :disabled
用于锚点和按钮。
- 添加了对
Home
和 End
键的支持,以便通过键盘导航选项卡。
- 在没有修饰符类的情况下,为切换按钮添加了一些基本样式。
- 修复了深色模式下的轮播颜色。
- 表单
- 实用程序
.text-bg-*
实用程序现在使用 CSS 变量
- Sass
- 添加新的
$navbar-dark-icon-color
Sass 变量
- 删除重复的
$alert
Sass 变量
- 添加一个新的变量
$vr-border-width
用于自定义垂直规则辅助宽度
- 文档
- 在我们的主页添加搜索功能
- 改进仪表板示例的响应式行为
- 改进备忘单示例的暗模式渲染
获取发布
前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm
阅读 GitHub v5.3.1 变更日志 以获取此版本中所有更改的完整列表。
支持团队
访问我们的 Open Collective 页面 或我们的 团队成员 的 GitHub 个人资料,以帮助支持为 Bootstrap 做出贡献的维护者。
@mdo 2023 年 5 月 30 日
正式宣布,v5.3.0 的最终稳定版本已经发布!为了重构我们的代码库以支持 CSS 变量和颜色模式,我们付出了巨大的努力,这将带来持续的更改,最终将导致 Bootstrap 6 的发布。我们非常高兴终于发布它!
除了对这个版本的所有工作之外,自从我们发布预发布版本以来,幕后发生了很多事情。继续阅读以了解 v5.3.0 中的所有新内容。
新增功能
继续阅读以深入了解所有顶级新功能。
暗模式
Bootstrap 的核心已重写,以提供对暗模式的一流支持。此外,Bootstrap 现在支持任意数量的颜色模式,允许您构建自己的自定义主题或更细致的颜色模式。让我们先看看我们的新暗模式是如何工作的。
Bootstrap 的新暗黑模式默认情况下是选择加入的,这意味着您需要在根 <html>
元素上设置 data-bs-theme
属性来更改整个页面的设计。这样做是为了更好地支持除亮色和暗色之外的自定义颜色模式——稍后会详细介绍。它还有助于那些在自己的设计中还没有准备好使用暗黑模式的人。
<!doctype html>
<html lang="en" data-bs-theme="dark">
<!-- ... -->
</html>
需要更隔离的暗黑模式?您也可以在父元素(如下面显示的 .dropdown
)上设置颜色模式。这只会影响下拉菜单及其子元素,而不是整个页面。
<div class="dropdown" data-bs-theme="light">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown" data-bs-theme="dark">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
Dark dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
新的 color-mode()
混合器
暗黑模式样式使用新的 color-mode()
Sass 混合器 编写和生成。混合器允许您编写特定于特定颜色模式(如暗黑模式)的样式。
@include color-mode(dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
结合新的 $color-mode-type
Sass 变量,您还可以更改颜色模式在 Bootstrap 中的行为方式。默认值为 data
,它告诉 Bootstrap 生成 CSS 选择器,将颜色模式的样式范围限定在您上面看到的 data
属性中。
另一个支持的值是 media-query
,它会生成媒体查询选择器。这对于那些想要自动使用亮色和暗色模式,并且不需要用户覆盖的人来说非常有用。
$color-mode-type: media-query;
@include color-mode(dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
输出到
@media (prefers-color-scheme: dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
阅读新的颜色模式文档 以了解更多信息。
切换颜色模式
虽然我们没有为切换颜色模式编写新的 JavaScript 插件,但我们在文档中编写了一个很棒的脚本,用于 通过 data-bs-theme
切换颜色模式。我们的实现默认使用用户的操作系统颜色模式(自动),但也允许用户使用特定模式(亮色或暗色)覆盖它,该模式会记录在本地存储中,以便在将来加载页面时轻松参考。您可以根据需要使用和调整此脚本。
新的颜色模式变量
还有一个新的 _variables-dark.scss
样式表,其中包含特定于暗黑模式的 Sass 变量。在这里,我们修改了大多数全局值,以及一些特定于组件的值,以适应暗黑模式。我们建议为其他自定义颜色模式创建单独的 Sass 样式表(例如,蓝色主题可能具有 _variables-blue.scss
)。我们预计此样式表将在我们的下一个主要版本中简化,因为我们继续简化代码库。)
暗黑模式颜色都源自我们的主题颜色,这意味着您可以通过更新原始主题颜色轻松更改颜色模式调色板。这意味着我们没有使用我们已经着色和阴影的颜色(例如,shade-color($danger, 60%)
而不是 red-800
用于新的危险强调颜色)。
Bootstrap v5.3.0 默认启用深色模式,但您可以通过更新布尔型 $enable-dark-mode
Sass 变量来禁用它。
在新的颜色模式文档中了解更多信息。
启用深色模式
如果您使用的是 CDN 或入门模板,使用新的颜色模式非常简单。在 <html>
元素中添加 data-bs-theme
属性,并使用 light
或 dark
值,您将使用浅色或深色主题。
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
自定义颜色模式
当我们着手为 Bootstrap 添加深色模式支持时,我们并不想仅仅添加一个深色模式。我们希望构建一个颜色模式系统的基础,该系统可用于创建任意数量的主题和颜色模式。这就是我们以 data-bs-theme
属性和新的 color-mode()
Sass 混合器为先,以及为什么我们在这些最新版本中添加了如此多的新 CSS 变量的原因。
要添加自定义颜色模式,请使用自定义值作为颜色模式名称创建自己的 data-bs-theme
选择器,然后根据需要修改任何 Sass 和 CSS 变量。我们创建了一个单独的 _variables-dark.scss
样式表来存放 Bootstrap 的深色模式专用 Sass 变量,但这对于您来说不是必需的。
例如,您可以使用选择器 data-bs-theme="blue"
创建一个“蓝色主题”。在您的自定义 Sass 或 CSS 文件中,添加新的选择器并根据需要覆盖任何全局或组件 CSS 变量。如果您使用的是 Sass,您也可以在 CSS 变量覆盖中使用 Sass 的函数。
注意!将颜色模式应用于不是 <html>
或 <body>
元素的元素需要使用 .text-body
和 .bg-body
等类。这是因为许多 HTML 元素在您自己添加之前没有设置 color
或 background
来进行样式设置。我们在这里为您提供了它们,以防万一。
[data-bs-theme="blue"] {
// CSS variable overrides and styles
}
<div data-bs-theme="blue">
...
</div>
更新的颜色调色板
我们已经重新设计了我们的颜色调色板,以包含所有新的 Sass 变量、CSS 变量和用于设置 color
、background-color
和 border-color
的实用程序。我们的前景和背景颜色已扩展到包括新的次要、三次和强调颜色,而我们的主题颜色已扩展到包括其微妙的背景颜色、微妙的边框颜色和更深的文本颜色。
查看新的颜色文档。
我们已经重建了一些组件(如列表组和警报),以在其源 Sass 和编译的 CSS 中使用这些新变量,以便它们响应颜色模式更改。
新的链接助手和实用程序
链接样式在 v5.3.0 中有了无限的改进,并提供了一系列全新的链接助手和实用程序。首先,我们添加了样式,以便使用 Bootstrap 图标 以及使用 新的图标链接助手 的链接。
<a class="icon-link" href="#">
<svg class="bi" aria-hidden="true"><use xlink:href="#archive"></use></svg>
Icon link
</a>
<a class="icon-link" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg>
</a>
我们另一个新的助手是 新的焦点环助手,用于移除默认的 outline
并设置自定义的 box-shadow
焦点环。
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
Custom focus ring
</a>
在工具方面,我们有新的类用于设置链接颜色不透明度、下划线偏移量、下划线颜色和下划线不透明度。 探索新的链接工具。
<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
<p><a href="#">Default link</a></p>
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Custom link</a></p>
最后,我们添加了一个新的 .link-body-emphasis
助手,与我们的 彩色链接 一起使用。这将使用我们的颜色模式响应式强调颜色创建一个彩色链接。
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
新的导航下划线
有一个新的 .nav
变体和修饰符类,带有 .nav-underline
。将 .nav-underline
添加到 .nav
中,可以在活动导航链接下方获得一个更简单的底部边框。 查看文档以获取示例。
<ul class="nav nav-underline">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
还有更多!
除了所有颜色模式更新、新的助手和新的工具之外,我们还在此版本中进行了一些质量改进。以下是亮点的简要概述
-
导航现在具有新的 :focus-visible
样式,更好地匹配我们的自定义按钮焦点样式。
-
基于 CSS 变量的 border-width
工具已恢复为直接设置其属性(如 v5.2.0 之前所做的那样)。这避免了嵌套元素(包括表格)之间的继承问题。
-
添加了新的 .border-black
工具,以匹配我们的 .text-black
和 .bg-black
工具。
-
弃用了 .text-muted
工具和 $text-muted
Sass 变量。它已被 .text-body-secondary
和 $body-secondary-color
替换。
-
添加了对插值变量的检查,以在使用 Sass 变量在 calc()
函数中时捕获 Node Sass 的编译错误。
-
开始在更多组件中使用 --bs-border-radius
变量。
-
添加了 .d-inline-grid
工具类。
-
修复了在 fallbackPlacements
中使用变体时 .tooltip-inner
的放置。
-
修复了在使用 $color-mode-type: media-query
编译时,暗模式轮播覆盖的选取器。
-
更新了浮动标签在“浮动”时的样式,包括 background-color
,以帮助 textarea
中的多行文本。这也修复了表单元素在浮动表单中禁用时的颜色。
-
更新 RFS 到 v10.0.0。
接下来
我们将在未来几周内发布一些 v5.3.x 的补丁版本,以解决出现的任何问题。我们还将致力于 v5.4.0,它将主要关注我们工具 API 和相关代码的改进。敬请关注更多更新!
从早期 Alpha 版本迁移
如果您刚开始使用 v5.3.0,请阅读第一个 Alpha 版本的迁移指南或发布公告的博文。
获取发布
前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm
阅读 GitHub v5.3.0 变更日志,以获取此版本中所有更改的完整列表。
支持团队
访问我们的 Open Collective 页面 或我们的 团队成员 的 GitHub 个人资料,以帮助支持为 Bootstrap 做出贡献的维护者。