Bootstrap v5.2.0总算安稳了!我们处理了更多的错误,改进了更多的文档,编写了新的攻略,建立了新的功用环境典范,还有更多!请继续阅览测试版和安稳版的亮点。
继续阅览,了解测试版和安稳版的亮点。
文档的从头规划
正如咱们在测试版中所预览的那样,文档已经被从头规划了从咱们的新主页开端,咱们对Bootstrap的功用有了更完好的表述,并更新了规划:
文档侧边栏的导航已被彻底修正,以使浏览更简略,一个全新的带有查找前史的DocSearch体验,以及在移动端侧边栏和导航栏的新的呼应式offcanvas抽屉:
咱们乃至更新了导航栏中的版别挑选器,以便在非必须版别之间进行交叉链接:
更新按钮和输入
随着咱们对文档的从头规划,咱们用修正过的padding
和border-radius
来刷新了按钮和输入。下面是咱们按钮的前后对比:
很多的新的CSS变量
咱们几乎一切的组件现在都有CSS变量,以完成真实的实时定制,更简略的主题化,以及(很快)从黑暗模式开端的色彩模式支持。你能够在每个文档页面上看到有哪些CSS变量,比如咱们的按钮:
--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$body-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
几乎每一个CSS变量的值都是经过Sass变量分配的,所以经过CSS和Sass的定制都得到很好的支持。此外,还包含一些组件经过CSS变量进行定制的比如:
新版别_maps.scss
Bootstrap v5.2.0引入了一个新的Sass文件与_maps.scss
,从_variables.scss
,以处理原始地图的更新没有使用到扩展它的二级地图的问题。这并不理想,但它处理了人们在运用定制地图时的一个长期存在的问题。
例如,对$theme-colors
的更新没有被使用到依靠$theme-colors
的其他地图上(如$utilities-colors
和更多),这就造成了定制工作流程的中断。总结一下这个问题,Sass有一个限制,一旦运用了一个默许的变量或地图,就不能更新。当CSS变量被用来组成其他的CSS变量时,也有一个类似的缺陷。
这也是为什么Bootstrap中的变量定制必须在@import "functions";
之后,而在@import "variables";
和其他导入栈之前。这相同适用于Sass地图–你必须在它们被运用之前掩盖默许值。以下地图已被移至新的_maps.scss
:
$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters
你的自定义Bootstrap CSS构建现在应该是这样的,有一个独自的地图导入:
// Functions come first
@import "functions";
// Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+ "custom": $custom-color
+ );
// Variables come next
@import "variables";
+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
// Rest of our imports
@import "mixins";
@import "utilities";
@import "root";
@import "reboot";
// etc
新的辅助工具和实用程序
咱们更新了咱们的帮手和工具,使其更简略快速构建和修正自定义组件:
-
增加了新的
.text-bg-{color}
辅助工具:你现在能够运用.text-bg-*
帮助器来设置一个具有对比前景的background-color
,而不是设置独自的.text-*
和.bg-*
实用程序,color
。 -
扩展了
font-weight
实用程序,包含用于半黑字体的.fw-semibold
。 -
扩展了
border-radius
实用程序,包含两个新的尺寸,.rounded-4
和.rounded-5
,以提供更多的挑选。
随着v5的继续发展,预计这儿会有更多的改进。
呼应性的offcanvas
咱们的Offcanvas组件现在有呼应式的变化。原始的.offcanvas
类坚持不变–它在一切视口中都躲藏了内容。要使其具有呼应性,请将.offcanvas
类改为任何.offcanvas-{sm|md|lg|xl|xxl}
类。
新的实例库和攻略
从测试版开端,咱们已经完全重写了咱们的Webpack攻略和Parcel攻略。咱们还增加了一个新的Vite攻略:
此外,咱们还在新的twbs/examplesrepo中把这些攻略中的每一个都变成了一个功用完全的比如。咱们乃至还在该库中增加了几个比如,并方案创立更多的比如:
- 启动器- 咱们的CSS和JS的CDN链接
- Sass & JS- 经过npm导入Sass、Autoprefixer、Stylelint和咱们的JS包。
- Sass & ESM JS- 经过npm导入Sass、Autoprefixer和Stylelint,然后用shim加载咱们的ESM JS。
- Webpack- 经过Webpack导入并绑缚Sass和JS
- Parcel- 经过Parcel导入Sass、JS
- Vite- 经过Vite导入Sass、JS
- Bootstrap图标字体- 经过图标字体导入Bootstrap图标
每个攻略都与该repo中的一个新比如相匹配,并且几乎一切的比如都能够在StackBlitz中立即运用。现在你乃至不需要在你的电脑上装备开发环境就能够开端运用Bootstrap。
咱们有没有提到,现在几乎一切的代码片段都有一个在StackBlitz中打开的按钮?
还有更多!
-
引入了新的
$enable-container-classes
选项:– 现在,当挑选实验性的CSS Grid布局时,.container-*
类仍将被编译,除非该选项被设置为false
。容器现在也坚持它们的沟槽值。 -
更厚的表格分隔线现在能够挑选参加:– 咱们删除了表格组之间较厚且较难掩盖的边框,并将其移至一个你能够使用的可选类,
.table-group-divider
。请看表格文档中的比如。 -
Scrollspy已经被重写以运用交叉点观察者API,这意味着你不再需要相对的父级包装器,废弃了
offset
装备,以及更多。期望你的Scrollspy完成能在导航高亮中更加精确和共同。 -
增加了
.form-check-reverse
修正器,以翻转标签和相关复选框/收音机的顺序。 -
经过新的
.table-striped-columns
类,增加了对表格的条纹列支持。 -
增加了一个新的实验性保留数据特点
data-bs-config
,能够将简略的组件装备作为JSON字符串寄存。 -
为Scrollspy添加了新的
smooth-scroll
。
获取版别
前往getbootstrap.com获取最新信息,它也被推送到了npm:
npm i bootstrap@v5.2.0