Comment obtenir un effet de chargement dans
Bootstrap ? L'article suivant vous présentera l'utilisation du composant d'icône de lecture Bootstrap5 (Spinners) et verra comment lire l'icône pour indiquer l'état de chargement du composant. J'espère que cela vous sera utile !
Utilisez Bootstrap pour lire les icônes afin d'indiquer l'état de chargement des composants. Ces icônes de lecture utilisent entièrement HTML et CSS sans utiliser JavaScript. Leur apparence, leur alignement et leur taille peuvent être personnalisés via des classes communes, mais vous avez toujours besoin de JavaScript personnalisé pour basculer leur affichage. [Recommandation associée : "Tutoriel bootstrap"]
Ce qui suit est une icône de lecture simple
<!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>L'icône de lecture de bordure utilise currentColor comme couleur de bordure, ce qui signifie que vous pouvez utiliser la couleur du texte catégorie générale pour personnaliser sa couleur. Vous pouvez utiliser des couleurs de n’importe quelle catégorie commune sur l’icône de lecture standard.
<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>
Si vous n'aimez pas l'icône de lecture de bordure, vous pouvez passer à l'icône de lecture dégradée. Bien que techniquement, il ne tourne pas, il s'efface encore et encore ! Les icônes dégradées prennent également en charge différentes couleurs.
<div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div>
Comme ci-dessus, cette icône de lecture utilise également currentColor, vous pouvez donc facilement modifier son apparence à l'aide de la catégorie universelle de couleur du texte. Ici, c'est le bleu et les variations de couleurs qu'il prend en charge.
<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>
Utilisez les utilitaires de marge pour augmenter simplement l'espacement comme m-5.
<div class="spinner-border m-5" role="status"> <span class="visually-hidden">Loading...</span> </div>
Utilisez les catégories universelles flexbox, les catégories universelles flottantes ou la disposition du texte pour placer l'icône de lecture exactement là où vous en avez besoin dans tous les cas.
5.1 Flex
Ce qui suit est l'alignement central
<div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
alignement à droite
<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 Alignement flottant
à droite
<div class="clearfix"> <div class="spinner-border float-end" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
5.3 Texte général class
La classe générale de texte implémente l'alignement central
<div class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
Ajoutez spinner-border-sm et spinner-grow-sm pour créer une icône de lecture plus petite afin qu'elle puisse être affichée à d'autres endroits. Les composants sont utilisé rapidement.
<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>
Afficher une icône plus grande
<div class="spinner-border" style="max-width:90%" 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>
L'utilisation de l'icône de lecture dans le bouton signifie qu'il est en cours de traitement ou qu'une opération est en cours. Vous pouvez également utiliser le texte du bouton pour modifier le texte de l'icône de lecture en fonction de vos besoins.
<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>
Pour plus de connaissances sur le bootstrap, veuillez visiter : tutoriel de base du bootstrap ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment se connecter à la base de données en VB
Comment ouvrir le panneau de configuration Win11
clé vs2010
Tendance du marché des devises
Qu'est-ce que l'optimisation de la topologie
Comment résoudre le problème selon lequel Tomcat ne peut pas afficher la page
Méthode BigDecimal pour comparer les tailles
Supprimer le champ du tableau
 "163913466050885Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913466620244Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913467239610Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913467758018Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913468163927Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913468664185Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913468913696Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913469457450Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913469981221Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913470394754Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913470774160Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
 "163913471279683Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)")
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
