Bootstrap 5.2.0 beta 发布

Bootstrap v5.2.0-beta1 现已发布,这是自 v5 以来最大的一次发布更新。这个版本的特点是重新设计的文档、所有组件的 CSS 变量、响应式的 offcanvas、新的 helpers 和 utilities、改进的按钮和输入,以及许多底层改进。

具体更新内容如下:

重新设计的文档

开发团队重写了整个主页,以更好地展示 Bootstrap 的所有功能。

变化包括简化了导航栏,取消了子导航,并更改了侧边栏以始终显示每个页面链接以提高可发现性。上面显示的也是更新后的快速入门指南,它现在是通过 CDN 使用 Bootstrap 的分步指导指南。

更新后的导航栏还有一个新版本选择器,适用于 v5.2.0 及更高版本。在任何页面上,单击版本并查看选项以导航到同一页面的先前次要版本。当一个页面不存在于旧版本时,你会在下拉列表中看到禁用的版本。官方表示,其目前没有计划跨主要版本链接页面。

文档搜索现在由最新版本的 Algolia DocSearch 提供支持,带来了改进的设计,甚至可以显示你最近的搜索。

设计调整

为了配合文档的重新设计,开发团队给我们的按钮和输入法做了一些细化的边框半径值的更新。前后对比如下:

以及 inputs 的前后对比:

组件 CSS 变量

在此版本中,所有的组件现在都包含 CSS 变量,以实现实时自定义、更轻松的主题化以及(很快)从 dark 模式开始的颜色模式支持。每个组件页面都已更新,包括相关 CSS 变量的参考指南。以 buttons 为例:

--#{$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-beta1 引入了一个新的 Sass 文件_maps.scss,该文件从_variables.scss中提取了几个 Sass maps,以解决对 original map 的更新未应用于扩展它的 secondary maps 的问题。“这并不理想,但它解决了人们在使用自定义地图时长期存在的问题。”

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

New helpers and utilities

  • 添加了新的.text-bg-{color}helpers。现在可以使用 .text-bg-* helpers 来设置具有对比前景色的背景色,而不是设置单独的 .text-* 和 .bg-* utilities。

  • 扩展了font-weightutilities,包括用于 semibold fonts 的.fw-semibold

  • 扩展了 border-radius utilities ,包括两个新的尺寸:.rounded-4 和 .rounded-5,以提供更多选择。

响应式 offcanvas

Offcanvas 组件现在有了响应式的变化。原始的 .offcanvas 类保持不变--它在所有视口都隐藏内容。要使其具有响应性,需将该 .offcanvas 类改为任何 .offcanvas-{sm|md|lg|xl|xxl} 类。

更多详情可查看官方博客

优秀的个人博客,低调大师

微信关注我们

原文链接:https://www.oschina.net/news/195938/bootstrap-5-2-0-beta-released

转载内容版权归作者及来源网站所有!

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

相关文章

发表评论

资源下载

更多资源
优质分享Android(本站安卓app)

优质分享Android(本站安卓app)

近一个月的开发和优化,本站点的第一个app全新上线。该app采用极致压缩,本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario,低调大师唯一一个Java游戏作品

Mario,低调大师唯一一个Java游戏作品

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤,还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色。

Eclipse(集成开发环境)

Eclipse(集成开发环境)

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。幸运的是,Eclipse 附带了一个标准的插件集,包括Java开发工具(Java Development Kit,JDK)。

Java Development Kit(Java开发工具)

Java Development Kit(Java开发工具)

JDK是 Java 语言的软件开发工具包,主要用于移动设备、嵌入式设备上的java应用程序。JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+Java系统类库)和JAVA工具。