Bootstrap中怎么实现加载效果？读取图标（Spinners）组件_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: Django配合Bootstrap怎么制作计算... 下一篇:分享15个免费的Bootstrap5自定义...

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

发布时间：2022-05-19 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Bootstrap中怎么实现加载效果？读取图标（Spinners）组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Bootstrap中怎么实现加载效果？下面本篇文章就来给大家介绍一下Bootstrap5读取图标（Spinners）组件的用法，看看怎么读取图标来表示元件加载状态，希望对大家有所帮助！

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

1 简单的读取图标

使用Bootstrap读取图标以表示元件加载状态，这些读取图标完全使用HTML，CSS，而没有使用到JavaScript。它们的外观、对齐以及尺寸都可以通过通用类来自定义,但您仍需要客制JavaScript来切换它们的显示状况。【相关推荐：《bootstrap教程》】

下面是一个简单的读取图标

<!doctyPE html>
<html>
  <head>
    <;meta charset="utf-8">
    <meta name="viewport" content="width=device-width, inITial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>读取图标</title>
  </head>
  <body>
    <div>
        <br><br><br><br>
        <div role="status">
            <span>Loading...</span>
        </div>

      </div>
  </body>
</html>

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

2 颜色

边框读取图标使用currentColor来当作它的border-color，这代表你可以使用文字颜色通用类别来自定义它的颜色。你可以在标准的读取图标上使用任何通用类别中的颜色。

<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>

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

3 渐变读取图示

如果你不喜欢边框读取图标，可以切换到渐变读取图标。虽然技术上来说，它不会旋转，但它会反复渐变显示！渐变图标也支持不同的颜色。

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

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

同上，这个读取图标也使用currentColor，所以你可以轻易地使用文字颜色通用类别来改变它的外观。这边是蓝色，以及它所支持的颜色变化。

<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中怎么实现加载效果？读取图标（Spinners）组件

4 边距

使用M argin utilities像m-5一样简单地增加间隔。

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

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

5 对齐方式

使用flexbox通用类别、float通用类别，或是文字排版在任何情况下都可以将读取图标精确地放置在您需要的位置上。

5.1 Flex

以下是居中对齐

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

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

靠右对齐

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

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

5.2 Float

浮动实现靠右对齐

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

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

5.3 文本通用类

文本通用类实现居中对齐

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

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

6 大小

增加spinner-border-sm和spinner-grow-sm制作一个较小的读取图标，让它可以在其他元件中快速地被使用。

<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>

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

显示较大的图标

<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>

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

7 按钮

在按钮内使用读取图标是表示当前正在处理或正在进行操作。您也可以依照需求使用button text来更换读取图标的文字。

<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">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件

<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">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>

Bootstrap中怎么实现加载效果？读取图标（Spinners）组件