Bootstrap - Warnungen

In diesem Kapitel werden Warnungen und die Klassen erläutert, die Bootstrap für Warnungen bereitstellt. Warnungen bieten eine Möglichkeit, Nachrichten an den Benutzer zu formatieren. Sie bieten kontextbezogene Rückmeldungen für typische Benutzeraktionen.

Sie können ein optionales Schließsymbol hinzufügen, um eine Warnung zu erhalten. Verwenden Sie für die Inline-Entlassung das Alerts jQuery-Plugin .

Sie können eine grundlegende Warnung hinzufügen, indem Sie einen Wrapper <div> erstellen und eine Klasse von hinzufügen .alert und eine der vier Kontextklassen (z. .alert-success, .alert-info, .alert-warning, .alert-danger). Das folgende Beispiel zeigt dies -

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

Entlassungswarnungen

So erstellen Sie einen Entlassungsalarm -

Fügen Sie eine grundlegende Warnung hinzu, indem Sie einen Wrapper <div> erstellen und eine Klasse von hinzufügen .alert und eine der vier Kontextklassen (z. .alert-success, .alert-info, .alert-warning, .alert-danger)
Fügen Sie auch optional hinzu .alert-dismissable zur obigen <div> -Klasse.
Fügen Sie eine Schaltfläche zum Schließen hinzu.

Das folgende Beispiel zeigt dies -

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>

Stellen Sie sicher, dass Sie das Element <button> mit dem Datenattribut data-entlassen = "alert" verwenden.

Links in Warnungen

So erhalten Sie Links in Benachrichtigungen -

Fügen Sie eine grundlegende Warnung hinzu, indem Sie einen Wrapper <div> erstellen und eine Klasse von hinzufügen .alert und eine der vier Kontextklassen (z. .alert-success, .alert-info, .alert-warning, .alert-danger)
Verwenden Sie die .alert-link Utility-Klasse, um schnell farblich passende Links in jeder Warnung bereitzustellen.

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>