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