Bootstrap-Warnungen

Im Allgemeinen ist eine Warnung eine Warnung vor einem Problem. Warnungen liefern Informationen zu Sicherheitsproblemen, Schwachstellen und Exploits. Warnmeldungen werden häufig verwendet, um die Aufmerksamkeit der Endbenutzer zu lenken, z. B. Warnmeldungen, Bestätigungsmeldungen, Fehlermeldungen usw. Mithilfe von Warnmeldungen können wir allen Warnmeldungen eine Funktion zum Verwerfen hinzufügen. Bootstrap bietet verschiedene Möglichkeiten, Nachrichten für den Benutzer zu formatieren.

Wir können eine Warnmeldung erstellen, indem wir sie mit einem div-Element umschließen .Alarm Klasse und Verwendung einer der vier kontextuellen Klassen. Im Folgenden sind die vier kontextbezogenen Klassen aufgeführt, mit denen verschiedene Arten von Warnmeldungen erstellt werden Bootstrap:

  • Alert-Erfolg: Zur Anzeige einer Erfolgsmeldung.
  • Alarm-Info: Zur Definition einer Informationsnachricht.
  • Warnung-Warnung: Zur Anzeige einer Warnmeldung.
  • Alarm-Gefahr: Um eine Fehlermeldung anzugeben.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Das folgende Beispiel zeigt die Verwendung verschiedener Techniken zur Implementierung der Warnungen in Bootstrap. Wenn Sie Fragen dazu haben Bootstrap-Warnungenschreiben Sie es bitte in den Kommentarbereich.

Beispiel für einen Bootstrap-Alarm

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Alert Messages</h2>
<div  >Success! message sent successfully.</div>
<div  >Info! Please read carefully.</div>
<div  >Warning! It will delete all the files.</div>
<div  >Error! There is error in downloading file. Please try again.</div>
</div>
</body>
</html>
  • Führen Sie die Beispieldemo für Bootstrap Basic Alert Messages aus

Beispiel für grundlegende Bootstrap-Warnmeldungen

Bootstrap-Entlassungswarnungen

Durch die Verwendung der oben genannten vier kontextbezogenen Klassen können wir Entlassungsalarmmeldungen erstellen, indem wir sie zusammen mit in das div-Element einschließen .Alarm Basisklasse. Um diese Aufgabe auszuführen, fügen Sie einfach die hinzu .alert-dismissable class zum div-Element hinzufügen, wie im folgenden Beispiel gezeigt:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Dismissal Alert Messages</h2>
<div  >
   <button type="button"   data-dismiss="alert" aria-hidden="true">&times;</button>
   Success! message sent successfully.
</div>
<div  >
   <button type="button"   data-dismiss="alert" aria-hidden="true">&times;</button>
   Info! Please read carefully.
</div>
<div  >
   <button type="button"   data-dismiss="alert" aria-hidden="true">&times;</button>
   Warning! It will delete all the files.
</div>
<div  >
   <button type="button"   data-dismiss="alert" aria-hidden="true">&times;</button>
   Error! There is error in downloading file. Please try again.
</div>
</div>
</body>
</html>
  • Führen Sie eine Beispieldemo für Bootstrap-Dismissal-Warnmeldungen aus

Beispiel für Warnmeldungen zur Bootstrap-Entlassung

Bootstrap-Warnungen in Links

Durch die Verwendung der oben genannten vier Kontextklassen können wir Links in Warnmeldungen erstellen, indem wir sie zusammen mit in das div-Element einschließen .Alarm Basisklasse. Einfach hinzufügen .alert-link Klasse, um Links innerhalb jeder Warnung bereitzustellen, wie im folgenden Beispiel gezeigt:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Links in Alert Messages</h2>
<div  >
   Success! <a href="#"  >click to see message.</a>
</div>
<div  >
   Info! <a href="#"  >click to see information message.</a>
</div>
<div  >
   Warning! <a href="#"  >click to see warning message.</a>
</div>
<div  >
   Error! <a href="#"  >click to see an error message.</a>
</div>
</div>
</body>
</html>
  • Führen Sie eine Beispieldemo für Bootstrap-Links-Warnmeldungen aus

Beispiel für Bootstrap-Links-Warnmeldungen

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen