Bootstrap - Spinners

欢迎，有抱负的网页开发者们！今天，我们将深入Bootstrap旋转加载器的精彩世界。作为你友好的邻居电脑老师，我将引导你一步一步地走过这段旅程。所以，拿起你最喜欢的饮料，舒服地坐下来，让我们一起进入这个教程！

工作原理

Bootstrap中的旋转加载器用于在您的网络应用程序中指示加载状态。它们就像网站加载内容时您看到的那些旋转的小圆圈。这些小巧的组件通过提供后台发生某些事情的视觉反馈，帮助改善用户体验。

Bootstrap旋转加载器是用HTML、CSS和一点JavaScript魔法构建的。它们使用自定义CSS来创建旋转动画，确保在不同浏览器和设备上都有平滑且一致的外观。

边框旋转加载器

我们从最基本的旋转加载器开始：边框旋转加载器。这是Bootstrap中的默认旋转加载器样式。

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

在这个例子中，我们有一个带有两个类的div元素：spinner-border和role="status"。spinner-border类应用旋转动画，而role="status"帮助屏幕阅读器理解这是一个状态指示器。

在div内部，我们有一个带有visually-hidden类的span。这段文本在屏幕上不可见，但可以被屏幕阅读器读取，提高了视障用户的可访问性。

颜色

就像变色龙改变颜色一样，我们的旋转加载器也可以适应不同的主题！Bootstrap允许您使用文本颜色工具来自定义旋转加载器的颜色。

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

这个例子中的每个旋转加载器都有一个额外的类，如text-primary、text-secondary等。这些类将旋转加载器的颜色更改为匹配Bootstrap的颜色方案。

生长旋转加载器

如果边框旋转加载器不符合您的口味，Bootstrap提供了另一种风格：生长旋转加载器。这种旋转加载器会增长和缩小，而不是旋转。

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

结构与边框旋转加载器相似，但我们使用spinner-grow类而不是spinner-border。

对齐

使用Bootstrap的Flexbox工具，对齐旋转加载器就像馅饼一样简单。让我们看一些例子：

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

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

在第一个例子中，我们使用justify-content-center来水平居中旋转加载器。在第二个例子中，我们使用align-items-center将旋转加载器与一些文本垂直对齐。

边距

需要在旋转加载器周围留出一些空间吗？Bootstrap的边距工具来帮忙！

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

m-5类在旋转加载器的所有边周围添加了5（通常是3rem）大小的边距。

定位

旋转加载器可以放置在各种其他元素内。下面是如何将旋转加载器放入按钮中的方法：

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

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

在这些例子中，我们将旋转加载器放入按钮中，并使用spinner-border-sm使其变小。

Flex

Flexbox工具可以帮助您使用旋转加载器创建更复杂的布局：

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

这会将旋转加载器水平居中于其容器内。

浮动

在需要旋转加载器浮动时，Bootstrap的浮动工具在这里帮助您：

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

float-end类使旋转加载器浮动到其容器的右侧。

文本对齐

文本对齐工具也可以与旋转加载器一起使用：

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

这使用文本对齐将旋转加载器在其容器中居中。

大小

有时候，大小确实很重要！您可以使用Bootstrap的大小类来调整旋转加载器的大小：

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

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

使用spinner-border-sm或spinner-grow-sm来创建较小的旋转加载器。对于自定义大小，您可以使用内联样式来设置特定的尺寸。

按钮

最后但并非最不重要的是，让我们看看如何在按钮中使用旋转加载器：

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

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

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

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

这些例子展示了如何将边框和生长旋转加载器融入按钮中，带有或不带有伴随文本。

就这样，伙计们！你现在是一个Bootstrap旋转加载器专家了。记住，熟能生巧，所以不要害怕在你的项目中尝试这些组件。快乐编码，愿你的网页总是旋转得有风格！

方法	描述
spinner-border	创建一个旋转边框的旋转加载器
spinner-grow	创建一个生长和缩小的旋转加载器
text-[color]	更改旋转加载器的颜色（例如，text-primary，text-secondary）
spinner-border-sm	创建一个小边框旋转加载器
spinner-grow-sm	创建一个小生长旋转加载器
m-[size]	在旋转加载器周围添加边距（例如，m-5）
d-flex	创建一个flexbox容器
justify-content-center	在flexbox容器中水平居中内容
align-items-center	在flexbox容器中垂直居中内容
float-[direction]	使旋转加载器浮动（例如，float-end）
text-center	使用文本对齐来居中旋转加载器
visually-hidden	在视觉上隐藏内容，但保持对屏幕阅读器的可访问性

Credits: Image by storyset