Alertes en bootstrap 5 | Expliqué
Donner à ces messages d'alerte un certain style est également important car ce style joue un rôle important dans la transmission du sens derrière le message. Dans Bootstrap 5, vous pouvez effectuer cette tâche en utilisant diverses classes qui ont été discutées dans ce rapport.
Faire des messages d'alerte à l'aide de bootstrap 5
Pour créer un message d'alerte dans bootstrap 5, utilisez le .alerte classe en combinaison avec les classes de couleurs fournies pour représenter la signification du message d'alerte. Les classes de couleurs qui peuvent être utilisées avec le .La classe d'alerte est répertoriée ci-dessous.
1… Alerte-primaire
Fournit une couleur bleue représentant une tâche importante.
2… Alerte-succès
Fournit une couleur verte représentant le succès.
3… Alerte-info
Donne une couleur bleu clair indiquant certaines informations.
4… ALERGE
Fournit une couleur jaune représentant un avertissement.
5… Alerte-danger
Donne une couleur rouge indiquant un danger.
6… alerte-secrète
Fournit une couleur grise représentant une tâche moins importante.
7… lumière d'alerte
Donne une couleur gris clair au message.
8… Alerte-Dark
Fournit une couleur gris foncé au message.
Créons un message d'alerte à l'aide de bootstrap 5.
Comment générer une alerte de message de confirmation à l'aide de bootstrap 5
Supposons que vous souhaitiez générer un message de confirmation lorsqu'une demande utilisateur est traitée avec succès.
Html
Traité avec succès! Votre demande a été traitée avec succès.
Le code ci-dessus générera une alerte de confirmation informant l'utilisateur que la demande faite a été traitée avec succès.
Sortir
Un message de confirmation a été généré avec succès.
Comment générer une alerte de message d'erreur à l'aide de bootstrap 5
Supposons que vous souhaitiez générer un message d'erreur lorsqu'une demande utilisateur est refusée.
Html
Invalide! Votre demande a été refusée.
Dans l'extrait de code, notez qu'en plus d'attribuer le message le .classe d'alerte-danger, nous attribuons également le .Classe-alert-divisible avec un bouton ayant une classe .BTN-CLOSE ET DATA-BS-DISMISS = «ALERT». Ces trois entités contribuent à faire un message d'alerte qui peut être fermé par l'utilisateur.
Sortir
Un message d'erreur lisible a été généré.
Création d'alertes comme liens
Si vous souhaitez créer vos messages d'alerte en liens et diriger vos utilisateurs vers une autre page ou une autre source via ces liens, utilisez le .liaison d'alerte classe pour le faire.
Exemple
Supposons que vous souhaitiez rediriger votre utilisateur vers une autre page Web, puis suivez l'extrait de code ci-dessous.
Html
Découvrez notre Autre offre.
Ici nous utilisons le .Classe d'alerte pour indiquer certaines informations contenues dans le message d'alerte. De plus, comme vous pouvez remarquer que nous lions un élément du message à une autre page Web en attribuant le .Classe d'alerte-link sur la balise d'ancrage.
Sortir
Un message d'alerte a été lié à une autre source.
Animer les alertes
Vous pouvez également ajouter des animations à vos messages d'alerte tels qu'ils incluent un effet de décoloration à l'aide du .disparaître et .montrer Des classes.
Exemple
Voici comment vous pouvez ajouter un effet de décoloration à vos messages d'alerte.
Html
Ne cliquez pas sur le lien pendant que la demande est le traitement
Le code ci-dessus indique que le message d'alerte sera un avertissement et sera licenciable. De plus, lorsque l'utilisateur ferme le message, il aura un effet de décoloration.
Sortir
L'alerte a été animée avec succès.
Conclusion
Les alertes sont essentiellement des messages ou des éléments d'informations qui nécessitent une attention immédiate d'un utilisateur. Dans Bootstrap 5, vous pouvez créer des alertes en utilisant le .alerte classe, en outre, pour transmettre sa signification à travers des couleurs en utilisant les classes de couleurs disponibles. De plus, en utilisant les classes fournies par Bootstrap 5, vous pouvez rendre vos alertes liant ou les animer. Ce rapport traite des alertes dans Bootstrap 5 en détail.