1 00:00:03,460 --> 00:00:06,755 Im vorherigen Modul 2 00:00:06,755 --> 00:00:12,335 haben wir die Anzahl der Bootstrap-Komponenten untersucht, die rein auf CSS basieren. 3 00:00:12,335 --> 00:00:15,945 Indem wir also die CSS-Klassen für diese Komponenten anwenden, 4 00:00:15,945 --> 00:00:19,490 konnten wir sie auf unserer Webseite erstellen. 5 00:00:19,490 --> 00:00:26,500 In diesem Modul werden wir mehr von Bootstrap JavaScript-basierten Komponenten untersuchen. 6 00:00:26,500 --> 00:00:30,580 Zusammenfassend, wie wir im vorherigen Modul gesehen haben, 7 00:00:30,580 --> 00:00:34,755 unterstützt Bootstrap eine Reihe von CSS-Klassen, die auf 8 00:00:34,755 --> 00:00:43,260 Ihr HTML-Markup in Ihren Webseiten angewendet werden können, um diese CSS-Klassen zu aktivieren und zu nutzen. 9 00:00:43,260 --> 00:00:49,610 Sie konnten also sehen, wie die CSS-Klassen die generischen HTML-Tags modifizierten und 10 00:00:49,610 --> 00:00:56,365 Bootstrap's eigene Art bereitstellten, die gleichen Informationen darzustellen. 11 00:00:56,365 --> 00:01:02,180 So können die Komponenten, die rein auf CSS basieren, einfach aktiviert werden, 12 00:01:02,180 --> 00:01:04,260 indem die Bootstrap-CSS-Klassen auf 13 00:01:04,260 --> 00:01:09,270 die verschiedenen HTML-Tags angewendet werden, die sich auf Ihren Webseiten befinden. 14 00:01:09,270 --> 00:01:14,525 Bootstrap selbst kann rein für seine CSS-Klassen verwendet werden. 15 00:01:14,525 --> 00:01:19,500 Ein weiterer Aspekt von Bootstraps CSS-Klassen, die wir gesehen haben 16 00:01:19,500 --> 00:01:24,630 , war, dass die meisten dieser Komponenten mit einer Basisklasse begonnen haben, die Sie angewendet haben. 17 00:01:24,630 --> 00:01:27,660 Wie zum Beispiel, wenn Sie auf die Schaltfläche schauen, 18 00:01:27,660 --> 00:01:31,575 haben Sie gesehen, dass die Basisklasse die BTN-Klasse war. 19 00:01:31,575 --> 00:01:33,160 Dann würden Sie etwas wie 20 00:01:33,160 --> 00:01:38,160 ein BTN-Primär anwenden, das ihre Farben zum BTN hinzufügen würde, 21 00:01:38,160 --> 00:01:43,175 dann könnten Sie die Größe der Schaltfläche definieren, indem Sie BTN SM sagen. 22 00:01:43,175 --> 00:01:49,905 Dann könnten Sie die Schaltfläche auch als ganzer Block definieren, indem Sie die BTN-Blockklasse verwenden. 23 00:01:49,905 --> 00:01:56,260 Also, alle diese nachfolgenden Klassen und Modifikatoren an die Basis BTN Klasse. 24 00:01:56,260 --> 00:01:59,430 Also dieser Ansatz, Sie werden es immer 25 00:01:59,430 --> 00:02:03,330 und immer wieder in vielen der Bootstraps Komponenten sehen. 26 00:02:03,330 --> 00:02:07,925 Sie haben also eine Basisklasse und dann eine Reihe von Modifikatorklassen, die 27 00:02:07,925 --> 00:02:14,164 angewendet werden können, um das Verhalten der Basiskomponente zu ändern. 28 00:02:14,164 --> 00:02:20,210 Dies erleichtert das einfache Design Ihrer Webseite. Wenn wir 29 00:02:20,210 --> 00:02:24,260 ein anderes Beispiel nehmen, können wir uns die Nav-Klasse ansehen. 30 00:02:24,260 --> 00:02:28,020 Wir verwenden die Nav-Klasse in der NAV-Bar, die 31 00:02:28,020 --> 00:02:33,635 wir in unserer Webseite im vorherigen Modul enthalten. 32 00:02:33,635 --> 00:02:40,130 Die Nav-Klasse ändern wir, dass durch Anwenden der Nav-bar Nav-Klasse auf sie. 33 00:02:40,130 --> 00:02:45,660 Das bot uns also eine bestimmte Art, die Navigationsinformationen zu präsentieren. 34 00:02:45,660 --> 00:02:51,310 In diesem Modul werden wir NAV-Tabs und 35 00:02:51,310 --> 00:02:58,295 NAV-Pillen untersuchen, die eine weitere Möglichkeit sind, Navigationsinformationen für die Webseite zu präsentieren. 36 00:02:58,295 --> 00:03:04,180 Die Tabs und die Pillen, die wir präsentieren Navigation wieder, 37 00:03:04,180 --> 00:03:10,265 unterstützt mit einem JavaScript-Plugin, 38 00:03:10,265 --> 00:03:15,195 bietet eine erweiterte Möglichkeit, Navigation innerhalb Ihrer Inhalte. 39 00:03:15,195 --> 00:03:18,835 Also, wir werden das in diesem speziellen Modul untersuchen. 40 00:03:18,835 --> 00:03:23,620 Ich verwende dies als Beispiel, um Ihnen zu veranschaulichen, wie Sie von einer Basisklasse aus gestartet wurden, 41 00:03:23,620 --> 00:03:28,075 indem Sie die Modifikatorklassen auf die Basisklasse anwenden. 42 00:03:28,075 --> 00:03:30,640 Natürlich, wenn Sie 43 00:03:30,640 --> 00:03:35,285 den JavaScript-Teil Ihrer Bootstrap-Komponenten in Aktion bringen möchten, 44 00:03:35,285 --> 00:03:38,670 sollten Sie beginnen, die JavaScript-Klassen anzuwenden. 45 00:03:38,670 --> 00:03:41,725 Bootstrap unterstützt also eine Reihe von Komponenten, die 46 00:03:41,725 --> 00:03:44,970 durch JavaScript-Plugins unterstützt werden. 47 00:03:44,970 --> 00:03:47,880 Nun, wenn Sie diese Plugins in Ihrer Webseite verwenden, 48 00:03:47,880 --> 00:03:52,890 können Sie einzelne Plugins, die Sie tatsächlich in Ihrer Website verwenden, 49 00:03:52,890 --> 00:03:55,815 oder den gesamten Satz von Plugins. 50 00:03:55,815 --> 00:03:59,500 Nun, was wir in den Übungen tun werden, ist, 51 00:03:59,500 --> 00:04:03,495 die gesamte Reihe von Plugins, weil wir wollen nur erkunden alle von ihnen. 52 00:04:03,495 --> 00:04:05,870 Aber wenn Sie eine Website entwerfen, 53 00:04:05,870 --> 00:04:09,000 können Sie nur eine Teilmenge dieser Plugins, 54 00:04:09,000 --> 00:04:12,300 die Sie tatsächlich in Ihrer Website verwenden, einschließen, 55 00:04:12,300 --> 00:04:15,630 wodurch die Menge an JavaScript-Code reduziert 56 00:04:15,630 --> 00:04:21,470 wird, der an einen Benutzer gesendet werden muss, der Ihre Webseite betrachtet. 57 00:04:21,470 --> 00:04:27,590 Dies ist die Art und Weise, wie ich den Bootstrap-Ansatz zur Verwendung von JavaScript in 58 00:04:27,590 --> 00:04:33,905 seiner eigenen Unterstützung für Bootstrap-Komponenten betrachte, die mit JavaScript aktiviert sind. 59 00:04:33,905 --> 00:04:36,785 Wenn Sie JavaScript selbst betrachten, 60 00:04:36,785 --> 00:04:44,845 bietet es viel Flexibilität und ermöglicht Ihnen, viele interessante Dinge zu tun. 61 00:04:44,845 --> 00:04:46,695 Aber das beinhaltet auch das 62 00:04:46,695 --> 00:04:52,200 Schreiben von JavaScript-Code, der verwendet wird, wenn Sie Ihre Website entwerfen. 63 00:04:52,200 --> 00:04:58,730 Jetzt betrachte ich JavaScript als einen großen Sumo-Ringer mit viel Fähigkeit, 64 00:04:58,730 --> 00:05:02,670 viel Power, aber ungezähmt. 65 00:05:02,670 --> 00:05:09,875 Jetzt 66 00:05:09,875 --> 00:05:14,815 nimmt jQuery als Bibliothek, die auf JavaScript aufgebaut ist, im Wesentlichen den Sumo Wrestler und packt ihn dann besser, um 67 00:05:14,815 --> 00:05:23,790 diesen hundert Pfund Gorilla in eine überschaubare Größe zu 68 00:05:23,790 --> 00:05:28,235 machen, einfacher zu nähern und einfacher zu integrieren und in Ihrer Website zu verwenden Design. 69 00:05:28,235 --> 00:05:31,855 Also, wenn Sie die jQuery-Bibliothek direkt verwenden, 70 00:05:31,855 --> 00:05:34,510 können Sie auf jeden Fall viele 71 00:05:34,510 --> 00:05:40,175 der jQuery-Komponenten nutzen und sie in Ihrer Webseite verwenden. 72 00:05:40,175 --> 00:05:44,480 Nun, das ist ein Ansatz, den Sie immer annehmen können, da jQuery 73 00:05:44,480 --> 00:05:48,170 bereits in Ihrer Bootstrap-Webseite enthalten ist, 74 00:05:48,170 --> 00:05:52,910 wenn Sie die JavaScript-basierten Komponenten nutzen möchten. 75 00:05:52,910 --> 00:05:56,545 Bootstrap geht diesen einen Schritt weiter, 76 00:05:56,545 --> 00:05:59,145 und dann schauen Sie sich das Bild 77 00:05:59,145 --> 00:06:04,395 Bootstrap Ansatz ist, den Sumo-Ringer zu nehmen und ihn dann in eine Box zu legen. 78 00:06:04,395 --> 00:06:09,730 Im Wesentlichen stehen Sie dafür, 79 00:06:09,730 --> 00:06:18,935 Ihre JavaScript-Plugins in eine Komponente zu verpacken, die Sie einfacher in Ihren Webseiten verwenden können. 80 00:06:18,935 --> 00:06:24,775 Also, die Bootstrap JavaScript-basierten Komponenten nehmen im Wesentlichen jQuery-basierte Unterstützung, 81 00:06:24,775 --> 00:06:28,760 aber dann verpacken Sie sie so, dass Sie sie in 82 00:06:28,760 --> 00:06:34,390 Ihrer Webseite verwenden können, auch ohne eine einzige Zeile JavaScript-Code zu schreiben. 83 00:06:34,390 --> 00:06:38,955 Hier 84 00:06:38,955 --> 00:06:43,030 kann die Bootstrap JavaScript-Komponente verwendet werden, ohne eine einzige Codezeile zu schreiben. 85 00:06:43,030 --> 00:06:46,620 Die Art und Weise, wie es in Bootstrap unterstützt wird, ist, dass 86 00:06:46,620 --> 00:06:51,400 die JavaScript-Komponenten eine Reihe von 87 00:06:51,400 --> 00:06:56,940 Datenstrich-Stern-Attributen unterstützen, die Sie auf Ihre HTML-Tags anwenden können. 88 00:06:56,940 --> 00:07:00,120 Also, Sie werden sehen, wie ich Dinge wie Daten-Toggle, 89 00:07:00,120 --> 00:07:04,370 Daten-Spion, Data-Ziel und so weiter verwende. 90 00:07:04,370 --> 00:07:07,795 Wenn Sie sich erinnern, als wir die Nav-Bar entwarfen, 91 00:07:07,795 --> 00:07:11,120 hatten Sie tatsächlich ein paar dieser Attribute gesehen. 92 00:07:11,120 --> 00:07:15,660 Dort haben wir die Taste für die extra kleinen Bildschirme entworfen. 93 00:07:15,660 --> 00:07:21,550 Nun, es ist Zeit für uns, [unhörbar] warum wir es im vorherigen Modul getan haben. 94 00:07:21,550 --> 00:07:26,935 Daher werden wir diesen Ansatz in diesem Modul sehr detailliert untersuchen, indem wir uns 95 00:07:26,935 --> 00:07:33,000 mehrere Bootstrap-Komponenten ansehen, die JavaScript-Unterstützung nutzen. 96 00:07:33,000 --> 00:07:35,015 Natürlich können Sie 97 00:07:35,015 --> 00:07:38,650 die vollständige JavaScript-API nutzen, die 98 00:07:38,650 --> 00:07:42,945 für alle diese Komponenten verfügbar ist, indem Sie tatsächlich JavaScript-Code schreiben. 99 00:07:42,945 --> 00:07:46,130 Wir werden dies auf das nächste Modul verschieben, 100 00:07:46,130 --> 00:07:51,370 wo wir untersuchen, wie Sie einfachen JavaScript-Code basierend auf 101 00:07:51,370 --> 00:07:54,580 der jQuery-Syntax schreiben können, 102 00:07:54,580 --> 00:08:00,070 um Ihren JavaScript-basierten Bootstrap-Komponenten mehr Funktionalität hinzuzufügen.