Warnungen in Bootstrap 5 | Erklärt
Diese Warnmeldungen zu geben, ist auch wichtig, da dieser Stil eine wichtige Rolle bei der Vermittlung der Bedeutung hinter der Botschaft spielt. In Bootstrap 5 können Sie diese Aufgabe mit verschiedenen Klassen ausführen, die in diesem Bericht erörtert wurden.
Machen Sie Warnmeldungen mit Bootstrap 5
Um eine Warnmeldung in Bootstrap 5 zu erstellen, verwenden Sie die .Alarm Klasse in Kombination mit den Farbklassen, die zur Darstellung der Bedeutung der Warnmeldung angegeben sind. Die Farbkurse, die zusammen mit dem verwendet werden können .Alarmklasse sind unten aufgeführt.
1… Alarm-Primary
Bietet eine blaue Farbe, die eine wichtige Aufgabe darstellt.
2… Alarmsuccess
Bietet eine grüne Farbe, die den Erfolg darstellt.
3… Alarm-Info
Gibt eine hellblaue Farbe, die einige Informationen anzeigt.
4… Warnwarnung
Bietet eine gelbe Farbe, die eine Warnung darstellt.
5… Alarmdanger
Gibt eine rote Farbe, die Gefahr anzeigt.
6… Alarmsekundär
Bietet eine graue Farbe, die eine weniger wichtige Aufgabe darstellt.
7… Alarmlicht
Verleiht der Nachricht eine hellgraue Farbe.
8… Alarmdark
Bietet der Nachricht eine dunkelgraue Farbe.
Erstellen wir eine Warnmeldung mit Bootstrap 5.
So generieren Sie einen Bestätigungsmeldungalarm mit Bootstrap 5
Angenommen, Sie möchten eine Bestätigungsnachricht generieren, wenn eine Benutzeranforderung erfolgreich verarbeitet wird.
Html
Erfolgreich verarbeitet! Ihre Anfrage wurde erfolgreich bearbeitet.
Der obige Code generiert eine Bestätigungsalarm, die den Benutzer darüber informiert, dass die Anfrage erfolgreich bearbeitet wurde.
Ausgang
Eine Bestätigungsnachricht wurde erfolgreich erstellt.
So generieren Sie eine Fehlermeldungswarnung mit Bootstrap 5
Angenommen, Sie möchten eine Fehlermeldung generieren, wenn eine Benutzeranforderung abgelehnt wird.
Html
Ungültig! Ihre Anfrage wurde abgelehnt.
Beachten Sie im Code -Snippet, dass nicht die Nachricht die Nachricht zugewiesen wird .Alert-Danger-Klasse Wir zuweisen auch die .alarm-dismaktivierende Klasse zusammen mit einer Taste mit Unterricht .BTN-CLOSE und DATA-BS-DISMISS = "ALERT". Alle drei dieser Entitäten tragen dazu bei, eine Warnmeldung zu erstellen, die vom Benutzer geschlossen werden kann.
Ausgang
Eine abweisbare Fehlermeldung wurde generiert.
Erstellen von Warnungen als Links
Wenn Sie Ihre Warnmeldungen als Links erstellen und Ihre Benutzer über diese Links zu einer anderen Seite oder Quelle leiten möchten, verwenden Sie die .Alarmverknüpfung Klasse dazu.
Beispiel
Nehmen wir an, Sie möchten Ihren Benutzer zu einer anderen Webseite umleiten und dann dem Code -Snippet unten folgen.
Html
Schauen Sie sich unser an anderes Angebot.
Hier verwenden wir die .Alert-Info-Klasse, um einige Informationen anzugeben, die in der Warnmeldung enthalten sind. Darüber hinaus können wir feststellen, dass wir ein Stück der Nachricht mit einer anderen Webseite verknüpfen, indem wir die zuweisen .Alarm-Link-Klasse zum Anker-Tag.
Ausgang
Eine Warnmeldung wurde mit einer anderen Quelle verknüpft.
Animationswarnungen
Sie können Ihren Warnmeldungen auch Animationen hinzufügen, z. B. einen verblassenden Effekt mit der .verblassen Und .zeigen Klassen.
Beispiel
So können Sie Ihren Warnmeldungen einen verblassenden Effekt hinzufügen.
Html
Klicken Sie nicht auf den Link, während die Anfrage bearbeitet
Der obige Code besagt, dass die Warnmeldung eine Warnung ist und entlassen wird. Wenn der Benutzer die Nachricht schließt, hat sie außerdem einen verblassenden Effekt.
Ausgang
Die Warnung wurde erfolgreich animiert.
Abschluss
Warnungen sind im Grunde genommen Nachrichten oder bestimmte Informationen, die eine sofortige Aufmerksamkeit eines Benutzers erfordern. In Bootstrap 5 können Sie Warnungen mit dem erstellen .Alarm Die Klasse vermittelt seine Bedeutung über Farben mit den verfügbaren Farbklassen. Darüber hinaus können Sie mit den von Bootstrap 5 bereitgestellten Klassen Ihre Warnungen abweisbar machen oder animieren. In diesem Bericht werden Warnungen in Bootstrap 5 im Detail erläutert.