Bootstrap 微调器
在本教程中，您将学习如何使用 Bootstrap 微调器组件。
使用 Bootstrap 创建微调器
Bootstrap 引入了新的微调器组件，您可以使用它来显示应用程序中的加载状态。 微调器通常加载图标，它们仅使用 HTML 和 CSS 构建。 但是，您需要一些自定义 JavaScript 来在网页上显示或隐藏它们。
此外，您可以使用预定义的实用程序类轻松自定义微调器的外观、对齐方式和大小。 现在，让我们看看如何创建它们。
创建边框微调器
您可以创建边框微调器或轻量级加载指示器，如下所示：
<div class="spinner-border">
<span class="visually-hidden">Loading...</span>
</div>— 上面示例的输出将如下所示：
特殊的 .visually-hidden 类对除屏幕阅读器以外的所有设备隐藏元素。
创建彩色微调器
您可以使用文本颜色实用程序类来自定义微调器的颜色。
<div class="spinner-border text-primary">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light">
<span class="visually-hidden">Loading...</span>
</div>— 上面示例的输出将如下所示：
创建不断增长的微调器
您还可以创建反复增长和淡出的不断增长的微调器，如下所示：
<div class="spinner-grow">
<span class="visually-hidden">Loading...</span>
</div>— 上面示例的输出将如下所示：
同样，与边框微调器一样，您还可以使用 Bootstrap 的 文本颜色实用程序类自定义不断增长的微调器的颜色，如下所示 例子：
<div class="spinner-grow text-primary">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark">
<span class="visually-hidden">Loading...</span>
</div>— 上面示例的输出将如下所示：
微调器尺寸
您可以使用 .spinner-border-sm 和 .spinner-grow-sm 类来制作一个较小的微调器，以便在其他组件（例如按钮）中快速使用。
<div class="spinner-border spinner-border-sm">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm">
<span class="visually-hidden">Loading...</span>
</div>— 上面示例的输出将如下所示：
或者，您可以使用自定义 CSS 或内联样式根据需要更改大小。
<div class="spinner-border" style="width: 40px; height: 40px;">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 40px; height: 40px;">
<span class="visually-hidden">Loading...</span>
</div>— 上面示例的输出将如下所示：
在按钮中使用微调器
您还可以在按钮中使用微调器来指示当前正在处理或正在执行的操作。
这是一个示例，我们将微调器放置在禁用的按钮内。
<!-- 按钮内的边框微调器 -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
<!-- 按钮内增长的微调器 -->
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading...
</button>— 上面示例的输出将如下所示：
微调器的对齐方式
您可以使用 flexbox、文本对齐或浮动实用程序类轻松地将微调器对齐到左、右或居中。 让我们试试下面的例子，看看它是如何工作的：
<!-- 使用 flex 实用程序居中对齐微调器 -->
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<!-- 使用文本对齐实用程序居中对齐微调器 -->
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>Advertisements