Sie können mehrere Gründe haben, die Aufmerksamkeit der Besucher auf
bestimmte Teile Ihrer Website zu lenken oder vielleicht möchten Sie
die Benutzer über einige Informationen
informieren oder Sie möchten die Benutzer über den Fortschritt einer Operation, die sie auf Ihrer Website initiieren, auf dem Laufenden halten.
Schauen wir uns einige verschiedene Mechanismen an, die
Bootstrap für diese Art von Operationen bietet.
Bootstrap hat viele verschiedene Komponenten, die es uns ermöglichen, Benutzer auf dem Laufenden zu halten.
Wir haben Badges, die es uns ermöglichen, die Aufmerksamkeit der
Nutzer auf aktuelle Aktualisierungen unserer Webseite zu lenken.
Wir haben Warn-,
Fehler- und Warnmeldungen, die den Benutzern zugestellt werden können,
wenn sie Vorgänge ausführen, die nicht zulässig sind.
Außerdem können wir Fortschrittsbalken verwenden, um Benutzer
über den Fortschritt der Vorgänge, die sie auf unserer Website initiieren, auf dem Laufenden zu halten.
Schauen wir uns das als nächstes ein bisschen genauer an.
Abzeichen sind eine einfache Möglichkeit, kleine Menge an
Informationen zu Ihrer Website hinzuzufügen, um die Aufmerksamkeit der Besucher zu erregen.
Als Beispiel können Sie sehen, dass wir ein paar Abzeichen zu
dieser Beschreibung des Gerichts hier auf unserer Hauptseite hinzugefügt haben, so dass Sie
sehen können, dass wir das rote Abzeichen haben, das die Aufmerksamkeit der Benutzer auf
die Tatsache lenkt, dass dies ein heißes Element auf der Speisekarte ist
und sie vielleicht sogar darüber informiert der Preis der Speisekarte.
Diese Art von kleinen Informationen können mit einem Abzeichen zu Ihrer Website hinzugefügt werden.
Ein Abzeichen zum Beispiel,
das rote hier wird erstellt, indem eine Spanne mit den Klassen Badge und Badge-Gefahr verwendet wird.
Sie können die verschiedenen anderen Farben verwenden, die in
das Bootstrap-Framework integriert sind, um Abzeichen in verschiedenen Farben zu erstellen.
In ähnlicher Weise können Sie eine Abzeichen-Pille verwenden, die ein abgerundetes Rechteck erstellt, wie Sie hier sehen,
und das kann getan werden, indem Sie die Abzeichen-,
Abzeichen-Pillen-Klasse zusammen mit der Badge-Klasse auf sie anwenden.
Alerts sind eine weitere Möglichkeit, Benutzer über Informationen zu informieren.
So kann zum Beispiel eine Warnung mit der Alert-Komponente erstellt werden,
die einfach erstellt werden kann, indem die Warnung mit Alert-Warnung angewendet wird, z. B.
in diesem Beispiel, dass Sie eine Warnung sehen, die einen gelben Alarm erzeugt.
Sie können dort wieder Gefahr primäre und andere Bootstrap-Farben anwenden.
Und dann Alert-Dismissible Klasse,
ermöglicht es Ihnen, eine Klasse dort einzuschließen, auf die der Benutzer klicken kann, um eine Warnung zu schließen.
Um diese Operation zu unterstützen,
müssen Sie auch eine Schaltfläche in Ihre Warnung einfügen, wie Sie in diesem div sehen können.
Wir haben diese Schaltfläche hier eingefügt.
Und der Inhalt der Warnung kann mit Standard-HTML formatiert werden, wie Sie hier sehen können.
Dies ermöglicht es uns, eine Warnung auf unserer Webseite zu erstellen.
Um zusammenzufassen, kann die Warnung durch eine Applizierung der Alert-Klasse
zusammen mit zusätzlichen qualifizierenden Warnungsklassen erstellt werden, mit
denen Sie Warnungen in verschiedenen Farben erstellen können.
Wir können auch Links in unsere Alerts aufnehmen.
Wir können die Warnung auch ablehnen, indem wir
die Alert-Klasse verwenden und einen Kreuzknopf in unserer Warnung einschließen.
Ebenso sind Fortschrittsbalken in Websites enthalten, um
Benutzer über den Fortschritt von allem, was wir auf der Website initiiert haben, auf dem Laufenden zu halten.
Wenn Sie beispielsweise eine Datei auf eine Website hochladen,
möchten Sie den Benutzer möglicherweise darüber informieren, wie viel der Datei den
Upload abgeschlossen hat, indem Sie einen Fortschrittsbalken auf der Website anzeigen.
Das Erstellen eines Fortschrittsbalkens in Bootstrap
erfolgt durch Anwenden der Fortschrittsklasse auf ein div und innerhalb dessen können wir ein
anderes inneres div mit der Klassenfortschrittsleiste anwenden und
auch erlauben, dass weiter gestylt wird, indem Sie Dinge wie
Fortschrittsbalken gestreift verwenden und dann können Sie die Farbe für
den Fortschrittsbalken, indem Sie die Farbe als BG Bindestrich und die Farbe angeben.
Also, in diesem Fall wird die bg-Gefahr auf diesen Fortschrittsbalken angewendet.
Wir können auch den Fortschrittsteil gestreift,
wir können auch den Fortschrittsbalken animieren
und auch angeben, wie viel von diesem Fortschrittsbalken in Form sein muss.
Indem Sie diesen Breitenwert
dynamisch ändern, können Sie einen Fortschrittsbalken erstellen, der sich ständig auf der Webseite aktualisiert.
Um zusammenzufassen, kann ein Fortschrittsbalken erstellt werden, indem
eine Fortschrittsklasse auf das div angewendet
wird und dort ein inneres div, auf das Sie die Fortschrittsbalkenklasse anwenden, ermöglicht es Ihnen, Fortschrittsbalken zu erstellen.
Sie können sogar mehrere Fortschrittsbalken zusammen stapeln, um
einen gestapelten Fortschrittsbalken zu erstellen und auch verschiedene Farben auf den Fortschrittsbalken anwenden und
können auch ein anderes Aussehen für den
Fortschrittsbalken mit der gestreiften Klasse und auch Fortschrittsbalken
animierte Klasse zum Animieren der Streifen auf unserem Fortschrittsbalken.
Nun, da wir uns verschiedene Möglichkeiten der Warnung von Benutzern angesehen haben,
lassen Sie uns als nächstes eine einfache Übung machen und Abzeichen auf
unserer Webseite verwenden, um die Aufmerksamkeit der Benutzer zu lenken.