如何利用Bootstrap实现和设置加载效果
导读：这篇文章给大家分享的是“如何利用Bootstrap实现和设置加载效果”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“如何利用Bootstrap实现和设置加载效果”吧。...
这篇文章给大家分享的是“如何利用Bootstrap实现和设置加载效果”，文中的讲解内容简单清晰，对大家认识和了解都有一定的帮助，对此感兴趣的朋友，接下来就跟随小编一起了解一下“如何利用Bootstrap实现和设置加载效果”吧。Bootstrap中怎么实现加载效果？下面本篇文章就来给大家介绍一下Bootstrap5读取图标（Spinners）组件的用法，看看怎么读取图标来表示元件加载状态，希望对大家有所帮助！
1 简单的读取图标
使用Bootstrap读取图标以表示元件加载状态，这些读取图标完全使用HTML，CSS，而没有使用到JavaScript。它们的外观、对齐以及尺寸都可以通过通用类来自定义,但您仍需要客制JavaScript来切换它们的显示状况。
下面是一个简单的读取图标
!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>
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>
3 渐变读取图示
如果你不喜欢边框读取图标，可以切换到渐变读取图标。虽然技术上来说，它不会旋转，但它会反复渐变显示！ 渐变图标也支持不同的颜色。
div class="spinner-grow" role="status">
span class="visually-hidden">
Loading.../span>
/div>
同上，这个读取图标也使用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>
4 边距
使用margin utilities像m-5一样简单地增加间隔。
div class="spinner-border m-5" role="status">
span class="visually-hidden">
Loading.../span>
/div>
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>
靠右对齐
div class="d-flex align-items-center">
strong>
Loading.../strong>
div class="spinner-border ms-auto" role="status" aria-hidden="true">
/div>
/div>
5.2 Float
浮动实现靠右对齐
div class="clearfix">
div class="spinner-border float-end" role="status">
span class="visually-hidden">
Loading.../span>
/div>
/div>
5.3 文本通用类
文本通用类实现居中对齐
div class="text-center">
div class="spinner-border" role="status">
span class="visually-hidden">
Loading.../span>
/div>
/div>
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>
显示较大的图标
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>
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>
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实现和设置加载效果”的内容就介绍到这，感谢各位的阅读，相信大家对如何利用Bootstrap实现和设置加载效果已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何利用Bootstrap实现和设置加载效果
本文地址： https://pptw.com/jishu/654856.html