1 00:00:03,650 --> 00:00:08,240 Sie können mehrere Gründe haben, die Aufmerksamkeit der Besucher auf 2 00:00:08,240 --> 00:00:11,890 bestimmte Teile Ihrer Website zu lenken oder vielleicht möchten Sie 3 00:00:11,890 --> 00:00:16,370 die Benutzer über einige Informationen 4 00:00:16,370 --> 00:00:22,150 informieren oder Sie möchten die Benutzer über den Fortschritt einer Operation, die sie auf Ihrer Website initiieren, auf dem Laufenden halten. 5 00:00:22,150 --> 00:00:25,840 Schauen wir uns einige verschiedene Mechanismen an, die 6 00:00:25,840 --> 00:00:30,750 Bootstrap für diese Art von Operationen bietet. 7 00:00:30,750 --> 00:00:38,810 Bootstrap hat viele verschiedene Komponenten, die es uns ermöglichen, Benutzer auf dem Laufenden zu halten. 8 00:00:38,810 --> 00:00:42,440 Wir haben Badges, die es uns ermöglichen, die Aufmerksamkeit der 9 00:00:42,440 --> 00:00:46,550 Nutzer auf aktuelle Aktualisierungen unserer Webseite zu lenken. 10 00:00:46,550 --> 00:00:48,365 Wir haben Warn-, 11 00:00:48,365 --> 00:00:52,010 Fehler- und Warnmeldungen, die den Benutzern zugestellt werden können, 12 00:00:52,010 --> 00:00:56,470 wenn sie Vorgänge ausführen, die nicht zulässig sind. 13 00:00:56,470 --> 00:01:01,870 Außerdem können wir Fortschrittsbalken verwenden, um Benutzer 14 00:01:01,870 --> 00:01:08,135 über den Fortschritt der Vorgänge, die sie auf unserer Website initiieren, auf dem Laufenden zu halten. 15 00:01:08,135 --> 00:01:11,455 Schauen wir uns das als nächstes ein bisschen genauer an. 16 00:01:11,455 --> 00:01:15,800 Abzeichen sind eine einfache Möglichkeit, kleine Menge an 17 00:01:15,800 --> 00:01:21,085 Informationen zu Ihrer Website hinzuzufügen, um die Aufmerksamkeit der Besucher zu erregen. 18 00:01:21,085 --> 00:01:24,710 Als Beispiel können Sie sehen, dass wir ein paar Abzeichen zu 19 00:01:24,710 --> 00:01:30,890 dieser Beschreibung des Gerichts hier auf unserer Hauptseite hinzugefügt haben, so dass Sie 20 00:01:30,890 --> 00:01:37,480 sehen können, dass wir das rote Abzeichen haben, das die Aufmerksamkeit der Benutzer auf 21 00:01:37,480 --> 00:01:40,495 die Tatsache lenkt, dass dies ein heißes Element auf der Speisekarte ist 22 00:01:40,495 --> 00:01:44,605 und sie vielleicht sogar darüber informiert der Preis der Speisekarte. 23 00:01:44,605 --> 00:01:51,455 Diese Art von kleinen Informationen können mit einem Abzeichen zu Ihrer Website hinzugefügt werden. 24 00:01:51,455 --> 00:01:52,960 Ein Abzeichen zum Beispiel, 25 00:01:52,960 --> 00:02:00,400 das rote hier wird erstellt, indem eine Spanne mit den Klassen Badge und Badge-Gefahr verwendet wird. 26 00:02:00,400 --> 00:02:04,495 Sie können die verschiedenen anderen Farben verwenden, die in 27 00:02:04,495 --> 00:02:11,945 das Bootstrap-Framework integriert sind, um Abzeichen in verschiedenen Farben zu erstellen. 28 00:02:11,945 --> 00:02:18,075 In ähnlicher Weise können Sie eine Abzeichen-Pille verwenden, die ein abgerundetes Rechteck erstellt, wie Sie hier sehen, 29 00:02:18,075 --> 00:02:21,700 und das kann getan werden, indem Sie die Abzeichen-, 30 00:02:21,700 --> 00:02:26,000 Abzeichen-Pillen-Klasse zusammen mit der Badge-Klasse auf sie anwenden. 31 00:02:26,000 --> 00:02:30,655 Alerts sind eine weitere Möglichkeit, Benutzer über Informationen zu informieren. 32 00:02:30,655 --> 00:02:37,245 So kann zum Beispiel eine Warnung mit der Alert-Komponente erstellt werden, 33 00:02:37,245 --> 00:02:45,370 die einfach erstellt werden kann, indem die Warnung mit Alert-Warnung angewendet wird, z. B. 34 00:02:45,370 --> 00:02:50,285 in diesem Beispiel, dass Sie eine Warnung sehen, die einen gelben Alarm erzeugt. 35 00:02:50,285 --> 00:02:57,075 Sie können dort wieder Gefahr primäre und andere Bootstrap-Farben anwenden. 36 00:02:57,075 --> 00:02:59,955 Und dann Alert-Dismissible Klasse, 37 00:02:59,955 --> 00:03:06,190 ermöglicht es Ihnen, eine Klasse dort einzuschließen, auf die der Benutzer klicken kann, um eine Warnung zu schließen. 38 00:03:06,190 --> 00:03:08,140 Um diese Operation zu unterstützen, 39 00:03:08,140 --> 00:03:14,625 müssen Sie auch eine Schaltfläche in Ihre Warnung einfügen, wie Sie in diesem div sehen können. 40 00:03:14,625 --> 00:03:16,740 Wir haben diese Schaltfläche hier eingefügt. 41 00:03:16,740 --> 00:03:23,505 Und der Inhalt der Warnung kann mit Standard-HTML formatiert werden, wie Sie hier sehen können. 42 00:03:23,505 --> 00:03:27,490 Dies ermöglicht es uns, eine Warnung auf unserer Webseite zu erstellen. 43 00:03:27,490 --> 00:03:32,320 Um zusammenzufassen, kann die Warnung durch eine Applizierung der Alert-Klasse 44 00:03:32,320 --> 00:03:37,585 zusammen mit zusätzlichen qualifizierenden Warnungsklassen erstellt werden, mit 45 00:03:37,585 --> 00:03:40,560 denen Sie Warnungen in verschiedenen Farben erstellen können. 46 00:03:40,560 --> 00:03:43,145 Wir können auch Links in unsere Alerts aufnehmen. 47 00:03:43,145 --> 00:03:46,110 Wir können die Warnung auch ablehnen, indem wir 48 00:03:46,110 --> 00:03:51,260 die Alert-Klasse verwenden und einen Kreuzknopf in unserer Warnung einschließen. 49 00:03:51,260 --> 00:03:55,360 Ebenso sind Fortschrittsbalken in Websites enthalten, um 50 00:03:55,360 --> 00:03:59,680 Benutzer über den Fortschritt von allem, was wir auf der Website initiiert haben, auf dem Laufenden zu halten. 51 00:03:59,680 --> 00:04:04,100 Wenn Sie beispielsweise eine Datei auf eine Website hochladen, 52 00:04:04,100 --> 00:04:08,105 möchten Sie den Benutzer möglicherweise darüber informieren, wie viel der Datei den 53 00:04:08,105 --> 00:04:12,780 Upload abgeschlossen hat, indem Sie einen Fortschrittsbalken auf der Website anzeigen. 54 00:04:12,780 --> 00:04:16,780 Das Erstellen eines Fortschrittsbalkens in Bootstrap 55 00:04:16,780 --> 00:04:22,155 erfolgt durch Anwenden der Fortschrittsklasse auf ein div und innerhalb dessen können wir ein 56 00:04:22,155 --> 00:04:26,265 anderes inneres div mit der Klassenfortschrittsleiste anwenden und 57 00:04:26,265 --> 00:04:30,695 auch erlauben, dass weiter gestylt wird, indem Sie Dinge wie 58 00:04:30,695 --> 00:04:34,890 Fortschrittsbalken gestreift verwenden und dann können Sie die Farbe für 59 00:04:34,890 --> 00:04:40,180 den Fortschrittsbalken, indem Sie die Farbe als BG Bindestrich und die Farbe angeben. 60 00:04:40,180 --> 00:04:44,910 Also, in diesem Fall wird die bg-Gefahr auf diesen Fortschrittsbalken angewendet. 61 00:04:44,910 --> 00:04:47,150 Wir können auch den Fortschrittsteil gestreift, 62 00:04:47,150 --> 00:04:49,395 wir können auch den Fortschrittsbalken animieren 63 00:04:49,395 --> 00:04:54,100 und auch angeben, wie viel von diesem Fortschrittsbalken in Form sein muss. 64 00:04:54,100 --> 00:04:58,015 Indem Sie diesen Breitenwert 65 00:04:58,015 --> 00:05:04,925 dynamisch ändern, können Sie einen Fortschrittsbalken erstellen, der sich ständig auf der Webseite aktualisiert. 66 00:05:04,925 --> 00:05:08,350 Um zusammenzufassen, kann ein Fortschrittsbalken erstellt werden, indem 67 00:05:08,350 --> 00:05:14,260 eine Fortschrittsklasse auf das div angewendet 68 00:05:14,260 --> 00:05:18,800 wird und dort ein inneres div, auf das Sie die Fortschrittsbalkenklasse anwenden, ermöglicht es Ihnen, Fortschrittsbalken zu erstellen. 69 00:05:18,800 --> 00:05:22,450 Sie können sogar mehrere Fortschrittsbalken zusammen stapeln, um 70 00:05:22,450 --> 00:05:28,325 einen gestapelten Fortschrittsbalken zu erstellen und auch verschiedene Farben auf den Fortschrittsbalken anwenden und 71 00:05:28,325 --> 00:05:32,865 können auch ein anderes Aussehen für den 72 00:05:32,865 --> 00:05:36,570 Fortschrittsbalken mit der gestreiften Klasse und auch Fortschrittsbalken 73 00:05:36,570 --> 00:05:41,375 animierte Klasse zum Animieren der Streifen auf unserem Fortschrittsbalken. 74 00:05:41,375 --> 00:05:45,515 Nun, da wir uns verschiedene Möglichkeiten der Warnung von Benutzern angesehen haben, 75 00:05:45,515 --> 00:05:50,925 lassen Sie uns als nächstes eine einfache Übung machen und Abzeichen auf 76 00:05:50,925 --> 00:05:58,090 unserer Webseite verwenden, um die Aufmerksamkeit der Benutzer zu lenken.