Detaillierte Einführung in die Bootstrap-Warnbox-HTML-Tutorial-php.cn

Detaillierte Einführung in die Bootstrap-Warnbox

零下一度

Freigeben： 2017-07-18 13:51:33

Original

1980 Leute haben es durchsucht

Warnung Nachrichten werden hauptsächlich verwendet, um Endbenutzern Informationen wie Warnungen oder Bestätigungsmeldungen anzuzeigen. Mit dem Alert-Plugin können Sie allen Warnmeldungen eine Entlassungsfunktion hinzufügen.

Verwendung

Sie können die Entlassungsfunktion des Warnfelds auf die folgenden zwei Arten aktivieren:

Über das Datenattribut: Fügen Sie die Entlassungsfunktion über die Daten-API hinzu (Data API) Um die Funktion abzubrechen, fügen Sie einfach data-dismiss="alert" zur Schaltfläche „Schließen“ hinzu und die Schließfunktion wird automatisch zum Warnfeld hinzugefügt.

Standardverwendung

Die Alarmbox-Komponente stellt Feedback-Meldungen für häufige Benutzeraktionen bereit, indem sie einige flexible vordefinierte Nachrichten bereitstellt.

Sie kombiniert jeden Text und eine optionale Schaltfläche zum Schließen, um sie miteinander kombinieren zu können Bilden Sie eine Warnbox. Darüber hinaus müssen 4 Klassen mit speziellen Bedeutungen (z. B. .alert) angegeben werden, die unterschiedliche Warnmeldungen .alert-success

Das Warnfeld hat keine Standardklasse, nur eine Basisklasse und eine modifizierte Klasse. Das standardmäßige graue Warnfeld bedeutet nicht viel. Sie verwenden also eine sinnvolle Warnklasse. Derzeit werden Erfolg, Meldung, Warnung und Gefahr bereitgestellt

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}.alert h4 {
  margin-top: 0;
  color: inherit;
}.alert .alert-link {
  font-weight: bold;
}.alert > p,
.alert > ul {
  margin-bottom: 0;
}.alert > p + p {
  margin-top: 5px;
}

Nach dem Login kopieren

1. Feld „Erfolgswarnung“: Informieren Sie den Benutzer darüber, dass der Vorgang erfolgreich ist, und fügen Sie den Stil „Alert-Erfolg“ basierend auf dem Stil „Alert“ hinzu Zeigt insbesondere den Hintergrund, den Rand und den Text an.

2. Informationsalarmfeld: Stellen Sie dem Benutzer sofortige Informationen zur Verfügung und fügen Sie dem Stil „Alarm“ den Stil „Alert-Info“ hinzu. der Hintergrund, der Rahmen und der Text sind alle hellblau;

3. Warnfeld: Fordert den Benutzer auf, vorsichtig vorzugehen (Bereitstellung von Warninformationen) und fügt den Stil „Warnung-Warnung“ basierend auf dem Stil „Warnung“ hinzu , das speziell den Hintergrund, den Rahmen und den Text darstellt. Es ist hellgelb. 4. Fehlerwarnfeld: Fordert den Benutzer zu Bedienfehlern auf. Der Stil wird hinzugefügt. Insbesondere sind Hintergrund, Rahmen und Text alle hellrot dass einige Warnfelder über eine Schaltfläche zum Schließen verfügen. Der Benutzer kann die Anzeige automatisch schließen, sobald er auf die Schaltfläche „Benachrichtigung“ klickt (das heißt, das Warnfeld ausblenden und nicht anzeigen). Auch die Benachrichtigungsbox im Bootstrap-Framework verfügt über eine solche Funktion

Sie müssen der Standard-Benachrichtigungsbox lediglich eine Schaltfläche zum Schließen hinzufügen. Fahren Sie dann mit drei Schritten fort:

1. Sie müssen den Stil „alert-dismissable“ auf der Grundlage des grundlegenden Warnfelds „alert“ hinzufügen.

2. Fügen Sie class="close" zum Schaltflächen-Tag hinzu, um den Stil der Schaltfläche zum Schließen der Warnbox zu implementieren.

3. Stellen Sie sicher, dass das benutzerdefinierte Attribut für das Schaltflächenelement „Schließen“ festgelegt ist: data-dismiss="alert" (da das schließbare Warnfeld Javascript benötigt, um dieses Attribut zu erkennen, um das Schließen des Warnfelds zu steuern)

<div class="alert" role="alert">基类</div><div class="alert alert-success" role="alert">成功</div><div class="alert alert-info" role="alert">信息提示</div><div class="alert alert-warning" role="alert">警告</div><div class="alert alert-danger" role="alert">错误</div>

Nach dem Login kopieren

Link

Manchmal möchten Sie möglicherweise eine Linkadresse in das Benachrichtigungsfeld einfügen, um Benutzer anzuweisen, zu einem bestimmten Ort oder einer neuen Seite zu springen. Zu diesem Zeitpunkt möchte ich, dass Benutzer klar erkennen können, dass es sich um die Linkadresse handelt. Im Bootstrap-Framework wird der Linkstil im Warnfeld hervorgehoben. Die Links in verschiedenen Arten von Warnfeldern werden fett dargestellt und die Farben werden entsprechend vertieft.

Das Bootstrap-Framework fügt über „alert-link“ einen Klassennamen namens „alert-link“ zu den Links im Warnfeld hinzu. Der Stil ermöglicht die Hervorhebung von Links

.alert-dismissable {
  padding-right: 35px;
}.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Bootstrap-Warnbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!