Im vorherigen Modul
haben wir die Anzahl der Bootstrap-Komponenten untersucht, die rein auf CSS basieren.
Indem wir also die CSS-Klassen für diese Komponenten anwenden,
konnten wir sie auf unserer Webseite erstellen.
In diesem Modul werden wir mehr von Bootstrap JavaScript-basierten Komponenten untersuchen.
Zusammenfassend, wie wir im vorherigen Modul gesehen haben,
unterstützt Bootstrap eine Reihe von CSS-Klassen, die auf
Ihr HTML-Markup in Ihren Webseiten angewendet werden können, um diese CSS-Klassen zu aktivieren und zu nutzen.
Sie konnten also sehen, wie die CSS-Klassen die generischen HTML-Tags modifizierten und
Bootstrap's eigene Art bereitstellten, die gleichen Informationen darzustellen.
So können die Komponenten, die rein auf CSS basieren, einfach aktiviert werden,
indem die Bootstrap-CSS-Klassen auf
die verschiedenen HTML-Tags angewendet werden, die sich auf Ihren Webseiten befinden.
Bootstrap selbst kann rein für seine CSS-Klassen verwendet werden.
Ein weiterer Aspekt von Bootstraps CSS-Klassen, die wir gesehen haben
, war, dass die meisten dieser Komponenten mit einer Basisklasse begonnen haben, die Sie angewendet haben.
Wie zum Beispiel, wenn Sie auf die Schaltfläche schauen,
haben Sie gesehen, dass die Basisklasse die BTN-Klasse war.
Dann würden Sie etwas wie
ein BTN-Primär anwenden, das ihre Farben zum BTN hinzufügen würde,
dann könnten Sie die Größe der Schaltfläche definieren, indem Sie BTN SM sagen.
Dann könnten Sie die Schaltfläche auch als ganzer Block definieren, indem Sie die BTN-Blockklasse verwenden.
Also, alle diese nachfolgenden Klassen und Modifikatoren an die Basis BTN Klasse.
Also dieser Ansatz, Sie werden es immer
und immer wieder in vielen der Bootstraps Komponenten sehen.
Sie haben also eine Basisklasse und dann eine Reihe von Modifikatorklassen, die
angewendet werden können, um das Verhalten der Basiskomponente zu ändern.
Dies erleichtert das einfache Design Ihrer Webseite. Wenn wir
ein anderes Beispiel nehmen, können wir uns die Nav-Klasse ansehen.
Wir verwenden die Nav-Klasse in der NAV-Bar, die
wir in unserer Webseite im vorherigen Modul enthalten.
Die Nav-Klasse ändern wir, dass durch Anwenden der Nav-bar Nav-Klasse auf sie.
Das bot uns also eine bestimmte Art, die Navigationsinformationen zu präsentieren.
In diesem Modul werden wir NAV-Tabs und
NAV-Pillen untersuchen, die eine weitere Möglichkeit sind, Navigationsinformationen für die Webseite zu präsentieren.
Die Tabs und die Pillen, die wir präsentieren Navigation wieder,
unterstützt mit einem JavaScript-Plugin,
bietet eine erweiterte Möglichkeit, Navigation innerhalb Ihrer Inhalte.
Also, wir werden das in diesem speziellen Modul untersuchen.
Ich verwende dies als Beispiel, um Ihnen zu veranschaulichen, wie Sie von einer Basisklasse aus gestartet wurden,
indem Sie die Modifikatorklassen auf die Basisklasse anwenden.
Natürlich, wenn Sie
den JavaScript-Teil Ihrer Bootstrap-Komponenten in Aktion bringen möchten,
sollten Sie beginnen, die JavaScript-Klassen anzuwenden.
Bootstrap unterstützt also eine Reihe von Komponenten, die
durch JavaScript-Plugins unterstützt werden.
Nun, wenn Sie diese Plugins in Ihrer Webseite verwenden,
können Sie einzelne Plugins, die Sie tatsächlich in Ihrer Website verwenden,
oder den gesamten Satz von Plugins.
Nun, was wir in den Übungen tun werden, ist,
die gesamte Reihe von Plugins, weil wir wollen nur erkunden alle von ihnen.
Aber wenn Sie eine Website entwerfen,
können Sie nur eine Teilmenge dieser Plugins,
die Sie tatsächlich in Ihrer Website verwenden, einschließen,
wodurch die Menge an JavaScript-Code reduziert
wird, der an einen Benutzer gesendet werden muss, der Ihre Webseite betrachtet.
Dies ist die Art und Weise, wie ich den Bootstrap-Ansatz zur Verwendung von JavaScript in
seiner eigenen Unterstützung für Bootstrap-Komponenten betrachte, die mit JavaScript aktiviert sind.
Wenn Sie JavaScript selbst betrachten,
bietet es viel Flexibilität und ermöglicht Ihnen, viele interessante Dinge zu tun.
Aber das beinhaltet auch das
Schreiben von JavaScript-Code, der verwendet wird, wenn Sie Ihre Website entwerfen.
Jetzt betrachte ich JavaScript als einen großen Sumo-Ringer mit viel Fähigkeit,
viel Power, aber ungezähmt.
Jetzt
nimmt jQuery als Bibliothek, die auf JavaScript aufgebaut ist, im Wesentlichen den Sumo Wrestler und packt ihn dann besser, um
diesen hundert Pfund Gorilla in eine überschaubare Größe zu
machen, einfacher zu nähern und einfacher zu integrieren und in Ihrer Website zu verwenden Design.
Also, wenn Sie die jQuery-Bibliothek direkt verwenden,
können Sie auf jeden Fall viele
der jQuery-Komponenten nutzen und sie in Ihrer Webseite verwenden.
Nun, das ist ein Ansatz, den Sie immer annehmen können, da jQuery
bereits in Ihrer Bootstrap-Webseite enthalten ist,
wenn Sie die JavaScript-basierten Komponenten nutzen möchten.
Bootstrap geht diesen einen Schritt weiter,
und dann schauen Sie sich das Bild
Bootstrap Ansatz ist, den Sumo-Ringer zu nehmen und ihn dann in eine Box zu legen.
Im Wesentlichen stehen Sie dafür,
Ihre JavaScript-Plugins in eine Komponente zu verpacken, die Sie einfacher in Ihren Webseiten verwenden können.
Also, die Bootstrap JavaScript-basierten Komponenten nehmen im Wesentlichen jQuery-basierte Unterstützung,
aber dann verpacken Sie sie so, dass Sie sie in
Ihrer Webseite verwenden können, auch ohne eine einzige Zeile JavaScript-Code zu schreiben.
Hier
kann die Bootstrap JavaScript-Komponente verwendet werden, ohne eine einzige Codezeile zu schreiben.
Die Art und Weise, wie es in Bootstrap unterstützt wird, ist, dass
die JavaScript-Komponenten eine Reihe von
Datenstrich-Stern-Attributen unterstützen, die Sie auf Ihre HTML-Tags anwenden können.
Also, Sie werden sehen, wie ich Dinge wie Daten-Toggle,
Daten-Spion, Data-Ziel und so weiter verwende.
Wenn Sie sich erinnern, als wir die Nav-Bar entwarfen,
hatten Sie tatsächlich ein paar dieser Attribute gesehen.
Dort haben wir die Taste für die extra kleinen Bildschirme entworfen.
Nun, es ist Zeit für uns, [unhörbar] warum wir es im vorherigen Modul getan haben.
Daher werden wir diesen Ansatz in diesem Modul sehr detailliert untersuchen, indem wir uns
mehrere Bootstrap-Komponenten ansehen, die JavaScript-Unterstützung nutzen.
Natürlich können Sie
die vollständige JavaScript-API nutzen, die
für alle diese Komponenten verfügbar ist, indem Sie tatsächlich JavaScript-Code schreiben.
Wir werden dies auf das nächste Modul verschieben,
wo wir untersuchen, wie Sie einfachen JavaScript-Code basierend auf
der jQuery-Syntax schreiben können,
um Ihren JavaScript-basierten Bootstrap-Komponenten mehr Funktionalität hinzuzufügen.