recherche

Maison >interface Web >Tutoriel d'amorçage >Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

青灯夜游
青灯夜游avant
2021-12-10 19:18:184340parcourir

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 !

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

1 Icône de lecture simple

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>

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

2 Couleur

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>

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

3 Icône de lecture dégradée

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>

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

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>

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

4 Marges

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>

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

5 Alignement

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>

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

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>

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

5.2 Alignement flottant

à droite 

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

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

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>

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

6 Taille

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>

Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

Afficher une icône plus grande 

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

1Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

7 Boutons

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>

1Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (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>

1Comment obtenir un effet de chargement dans Bootstrap ? Lire le composant icône (Spinners)

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!

JavaScript css bootstrap html Float margin border flex
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Partagez 15 générateurs de composants personnalisés Bootstrap5 gratuits pour améliorer la vitesse de développement !Article suivant：Partagez 15 générateurs de composants personnalisés Bootstrap5 gratuits pour améliorer la vitesse de développement !

Articles Liés

Voir plus