Bootstrap 5.1.0的新内容

迪鲁宾
301 阅读5分钟

简介

今年早些时候，Bootstrap团队宣布了一个重要版本。Bootstrap v5，其中有一些有趣的变化，比如从jQuery迁移到vanilla JavaScript，大量更新的组件和其他更新的实用类。

几周前，该团队再次宣布了Bootstrap 5的第一个小版本：v5.1.0。在这篇文章中，我们将探讨这个第一个小版本的新内容，以及与以前的版本相比，现在的工作情况如何。

Bootstrap 4 vs. 5.0

ICYMI，Bootstrap 4与最新的Bootstrap 5之间的一些明显变化包括。

  • 抛弃了jQuery --与之前依靠jQuery来运行JavaScript相关代码的版本相比，Bootstrap 5放弃了对jQuery的支持，转而支持vanilla JavaScript。
  • 不支持旧的浏览器--在v5中，Bootstrap团队还决定放弃对大量旧浏览器的支持，如IE 10和11、微软Edge遗留问题等。
  • 新的颜色 - 在v5中引入了一个新的颜色系统，所以你可以轻松地定制你的应用程序的外观和感觉，另外，现有的调色板也得到了改进，使其更容易使用。
  • 表单元素- 表单元素现在被设计成具有一致的外观，不管是浏览器还是操作系统。
  • 可扩展性 --Bootstrap现在可以让用户轻松修改、扩展或创建他们的实用类。

5.1.0的最新功能

如果你还不熟悉安装过程，你可以像下面这样在你的标记中包括其最小化的CSS和JavaScript CDN，从而开始使用Bootstrap。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <title>Bootstrap App</title>
  </head>
  <body>
    <div>
      <!-- main content here -->
    </div>
    <!-- Bootstrap bundled JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

更多的安装选项，请到官方下载页面查看。

CSS网格

这个较新版本的Bootstrap有一个实验性的选项，可以启用一个建立在CSS Grid基础上的独立网格系统。

在以前的Bootstrap版本中，在后台，网格系统是建立在CSSdisplay: flex; 属性之上的。在v5.1.0中的这个最新更新可以启用一个选项，让你使用传统的CSS网格系统（即display: grid; 属性）。

它是如何工作的

这个功能在默认情况下是不启用的，因为它是实验性的。要启用它，你需要首先在未编译的Bootstrap Sass文件中设置$enable-grid-classes: false ，禁用默认的网格系统，最后通过设置$enable-cssgrid: true ，启用新的CSS网格，然后你就可以重新编译你的Sass文件。

实现这个功能是非常简单的，你需要做的就是。

  • 将所有的.row 的实例替换为.grid
  • 用.g-col-* 替换所有实例.col-* 的类。

例如，创建一个双列网格系统，在所有视口中都有相同的宽度。

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

而为了响应性，仍然支持针对不同视口和设备的Bootstrap实用类 (xs, sm, md, lg, xl)。

<div class="grid">
  <div class="g-col-4 g-col-md-6">..</div>
  <div class="g-col-4 g-col-md-6">..</div>
  <div class="g-col-4 g-col-md-6">..</div>
</div>

占位符组件

Bootstrap 5.1.0引入了新的令人振奋的占位符组件（也称为骨架加载器），它是临时的灰色块，在加载块的内容之前用来描绘其结构。

这个新的组件是一个游戏规则的改变者，因为它有助于增强你的应用程序的体验，另外它只用HTML和CSS构建，（也就是说，你不需要任何JavaScript代码就可以开始整合它们，尽管你仍然需要编写一些自定义JavaScript代码来切换其内容的可见性）。

它是如何工作的

你可以通过将.placeholder 类添加到你想作为占位符显示的特定元素上，轻松创建占位符。

<h1 class="placeholder col-4"></h1>
<p class="placeholder col-6"></p>
<button
  class="col-3 btn btn-primary disabled placeholder"
  style="height: 40px"
></button>

这就产生了下面的输出。

Placeholder Component Bootstrap

宽度和大小

占位符的宽度可以通过使用Bootstrap网格列类（如上面的例子）、宽度工具（w-50、w-75）或内联样式来调整。

默认情况下，占位符的大小是基于父元素的排版风格或内容。然而，我们可以使用内置的尺寸修改器实用类来定制它的尺寸：.placeholder-lg ，.placeholder-sm ，或.placeholder-xs 。

占位符动画

你也可以给占位符添加动画，让用户更好地了解一些东西正在被主动加载。目前，只有两个支持占位符动画的类：.placeholder-glow 和.placeholder-wave.

下面是一个例子。

<p class="placeholder-glow">
  <span class="placeholder col-4"></span>
</p>
<p class="placeholder-wave">
  <span class="placeholder col-4"></span>
</p>

Placeholder Component Animation Bootstrap

水平塌陷

一段时间以来，Bootstrap只支持垂直折叠，但在这个最新版本中，团队增加了对水平折叠的支持。

它是如何工作的

如果你过去曾使用过Bootstrap collapse，那么你要让水平折叠工作，只需要在你的可折叠元素上添加.collapse-horizontal 修改器类，当你切换折叠时，这个新类将过渡这个元素的宽度（而不是高度）。

下面是一个代码示例。

<p>
  <button
    class="btn btn-primary"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#horizontalCollapseExample"
    aria-expanded="false"
    aria-controls="horizontalCollapseExample"
  >
    Toggle Horizontal Collapse
  </button>
</p>
<div style="min-height: 120px">
  <div class="collapse collapse-horizontal" id="horizontalCollapseExample">
    <div class="card card-body" style="width: 300px">
      Placeholder content here, this is hidden by default.
    </div>
  </div>
</div>

而当我们运行这个时，我们有以下输出。

Horizontal Collapse Bootstrap

更新的实用类（。bg-* 和.text-*)

较新的.text-opacity-* 和.bg-opacity-* 类也被引入，以方便调整文本和背景元素的不透明度。不过，在你能让这个新的实用类工作之前，元素（取决于你想调整的属性）必须有一个先前的.text-* 或.bg-* 实用类。

text-opacity 例子

<div class="text-success">Default success text</div>
<div class="text-success text-opacity-75">75% opacity success text</div>
<div class="text-success text-opacity-50">50% opacity success text</div>
<div class="text-success text-opacity-25">25% opacity success text</div>

这将产生。

Text Opacity in Bootstrap

bg-opacity 例子

<div class="bg-danger p-2 text-white">Default danger background</div>
<div class="bg-danger p-2 text-white bg-opacity-75">
  75% opacity danger background
</div>
<div class="bg-danger p-2 text-dark bg-opacity-50">
  50% opacity danger background
</div>
<div class="bg-danger p-2 text-dark bg-opacity-25">
  25% opacity danger background
</div>
<div class="bg-danger p-2 text-dark bg-opacity-10">
  10% opacity danger background
</div>

这将产生。

Background Opacity Bootstrap

较新的CSS变量

在这个最新的小版本中，:root 变量已经被更新，包括一个新的灰色调色板和新的RGB颜色主题变量。此外，CSS变量现在可以控制<body> 标签，以及其他一些标签和自定义实用类。这将使定制和扩展默认的Bootstrap样式变得更加容易。

总结

在这篇文章中，我们介绍了Bootstrap 5.1.0中引入的一些新变化，这是Bootstrap 5的第一个小版本。我们还研究了区别Bootstrap v4和v5的变化，以及如何开始使用新的Bootstrap 5.1.0。

关于所有新变化的完整参考，请查看Bootstrap创建者Mark Otto的官方公告。

The postWhat's new in Bootstrap 5.1.0appeared first onLogRocket Blog.

avatar
文章
阅读
粉丝