Bootstrap Alerts

Dieses Kapitel erklärt Alerts und die Klassen, die Bootstrap für Alerts bereitstellt. Alerts bieten eine Möglichkeit, Meldungen für Benutzer zu gestalten. Sie liefern kontextbezogenes Feedback für typische Benutzeraktionen.

Sie können einer Alert-Box eine optionale Schließen-Schaltfläche hinzufügen. Um eine Inline-schließbare Alert-Box zu erstellen, verwenden SieAlerts jQuery Plugin。

Sie können eine grundlegende Alert-Box erstellen, indem Sie ein <div> erstellen und ihm eine.alert-Klasse und eine der vier Kontextklassen (d. h. .alert-success、.alert-info、.alert-warning、.alert-danger) hinzufügen. Das folgende Beispiel demonstriert dies:

Beispiele

<div class="alert alert-success">Erfolg! Die Übermittlung wurde erfolgreich abgeschlossen.</div> <div class="alert alert-info">Info! Bitte beachten Sie diese Information.</div> <div class="alert alert-warning">Warnung! Bitte nicht absenden.</div> <div class="alert alert-danger">Fehler! Bitte nehmen Sie einige Änderungen vor.</div>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

警告（Alerts）

Schließbare Alerts (Dismissal Alerts)

Die Schritte zum Erstellen eines schließbaren Alerts (Dismissal Alert) sind wie folgt:

  • Durch das Erstellen eines <div> und Hinzufügen einer.alert-Klasse sowie einer der vier Kontextklassen (d. h. .alert-success、.alert-info、.alert-warning、.alert-danger), um eine grundlegende Alert-Box hinzuzufügen.
  • Fügen Sie außerdem das optionale ... zur obigen <div>-Klasse hinzu..alert-dismissable。
  • Fügen Sie eine Schließen-Schaltfläche hinzu.

Das folgende Beispiel demonstriert dies:

Beispiele

<div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>Erfolg! Die Übermittlung wurde erfolgreich abgeschlossen.</div> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>Info! Bitte beachten Sie diese Information.</div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>Warnung! Bitte nicht absenden.</div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>Fehler! Bitte nehmen Sie einige Änderungen vor.</div>

Bitte stellen Sie sicher, dass Siedata-dismiss="alert"ein <button>-Element mit dem Datenattribut verwenden.
Ausprobieren »

Das Ergebnis wird unten angezeigt:

可取消的警告（Dismissal Alerts）

Links in Alerts

Die Schritte zum Erstellen von Links in Alerts sind wie folgt:

  • Durch das Erstellen eines <div> und Hinzufügen einer.alert-Klasse sowie einer der vier Kontextklassen (d. h. .alert-success、.alert-info、.alert-warning、.alert-danger), um eine grundlegende Alert-Box hinzuzufügen.
  • Verwenden Sie die.alert-link-Klasse, um Links schnell mit passenden Farben zu versehen.

Beispiele

<div class="alert alert-success"> <a href="#" class="alert-link">Erfolg! Die Übermittlung wurde erfolgreich abgeschlossen.</a> </div> <div class="alert alert-info"> <a href="#" class="alert-link">Info! Bitte beachten Sie diese Information.</a> </div> <div class="alert alert-warning"> <a href="#" class="alert-link">Warnung! Bitte nicht absenden.</a> </div> <div class="alert alert-danger"> <a href="#" class="alert-link">Fehler! Bitte nehmen Sie einige Änderungen vor.</a> </div>

Ausprobieren »

Das Ergebnis wird unten angezeigt:

警告（Alerts）中的链接
Andere Erweiterungen