Bootstrap V5.3 : Spinners 加载状态中文翻译版

使用 Bootstrap 微调器指示组件或页面的加载状态，完全使用 HTML、CSS 构建，没有 JavaScript。

大约

Bootstrap“微调器”可用于显示项目中的加载状态。它们仅使用 HTML 和 CSS 构建，这意味着您不需要任何 JavaScript 来创建它们。但是，您将需要一些自定义 JavaScript 来切换它们的可见性。它们的外观、对齐方式和大小可以使用我们令人惊叹的实用程序类轻松自定义。

出于可访问性目的，此处的每个加载器都包含和嵌套的 .role="status"<span class="visually-hidden">Loading...</span>

此组件的动画效果取决于媒体查询。请参阅我们的辅助功能文档的减少运动部分。prefers-reduced-motion

边框微调器

使用边框微调器作为轻量级加载指示器。

[HTML全文]

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

颜色

边框微调器用于其，这意味着您可以使用文本颜色实用程序自定义颜色。您可以在标准微调器上使用我们的任何文本颜色实用程序。currentColorborder-color

[HTML全文]

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

为什么不使用边框颜色实用程序？每个边框微调器至少为一侧指定一个边框，因此实用程序将覆盖该边框。transparent.border-{color}

生长微调器

如果您不喜欢边框微调器，请切换到生长微调器。虽然从技术上讲它不会旋转，但它确实会反复生长！

[HTML全文]

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

再一次，这个微调器是用构建的，因此您可以使用文本颜色实用程序轻松更改其外观。这里它是蓝色的，以及支持的变体。currentColor

[HTML全文]

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

对准

Bootstrap 中的微调器是用 s、和构建的。这意味着它们可以轻松调整大小、重新着色和快速对齐。remcurrentColordisplay: inline-flex

边缘

使用边距实用程序，例如轻松间隔。.m-5

[HTML全文]

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

放置

使用 flexbox 实用程序、浮点实用程序或文本对齐实用程序在任何情况下将微调器准确地放置在您需要的位置。

屈

[HTML全文]

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

装载。。。

[HTML全文]

<div class="d-flex align-items-center">
  <strong role="status">Loading...</strong>
  <div class="spinner-border ms-auto" aria-hidden="true"></div>
</div>

浮

[HTML全文]

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

文本对齐

[HTML全文]

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

大小

添加和以制作一个较小的微调器，该微调器可以在其他组件中快速使用。.spinner-border-sm.spinner-grow-sm

[HTML全文]

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

或者，根据需要使用自定义 CSS 或内联样式更改尺寸。

[HTML全文]

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

按钮

在按钮中使用微调器来指示当前正在处理或正在发生的作。您还可以将文本从微调器元素中交换出来，并根据需要使用按钮文本。

[HTML全文]

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

[HTML全文]

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

CSS系统

变量

在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，微调器现在使用本地 CSS 变量来增强实时自定义。CSS 变量的值是通过 Sass 设置的，因此仍然支持 Sass 自定义。.spinner-border.spinner-grow

边框微调器变量：

scss/_spinners.scss

--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border;

增长微调器变量：

scss/_spinners.scss

--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;

对于这两个微调器，使用小型微调器修饰符类来根据需要更新这些 CSS 变量的值。例如，该类执行以下作：.spinner-border-sm

scss/_spinners.scss

--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass 变量

scss/_variables.scss

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

关键帧

用于为微调器创建 CSS 动画。包含在 .scss/_spinners.scss

scss/_spinners.scss

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

scss/_spinners.scss

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

Spinners 加载状态

大约

边框微调器

颜色

生长微调器

对准

边缘

放置

屈

浮

文本对齐

大小

按钮

CSS系统

变量

Sass 变量

关键帧