[MUSIC]
Lassen Sie uns jetzt über ein sehr nützliches Plugin in Bootstrap sprechen, das als Collapse bezeichnet wird.
Wir haben seine Anwendung in der Navigationsleiste früher gesehen.
Wir werden diesen Code nochmals besuchen und ihn genauer betrachten.
Eine verwandte Komponente wird als Akkordeon bezeichnet.
Das Akkordeon nutzt das Collapse-Plugin für seine Funktion.
Und wir werden das im Detail in der folgenden Übung sehen.
Das Collapse-Plugin bietet eine einfache Möglichkeit,
Inhalte auf Ihrer Webseite zu enthüllen und auszublenden.
Dieses Ein- und Ausblenden der Inhalte wird in der Regel
dadurch ausgelöst, dass der Benutzer auf eine Schaltfläche oder einen Link in Ihrer Webseite klickt.
Jetzt werden Sie viele Orte sehen, an denen die Art von Collapse
Verhalten sehr gut genutzt wird, um Inhalte anzuzeigen.
Wir werden unsere navbar erneut besuchen, um das Collapse-Plugin in Aktion zu betrachten, und
dann sehen wir auch ein Akkordeon-Beispiel als nächstes. Wenn Sie
auf unsere Webseite zurückgehen, werden Sie sich erinnern, dass, als wir die Navigationsleiste
in unserer Webseite für extra kleine Bildschirme erstellt haben, die Navbar zusammengebrochen wurde und
dann wurde es aufgedeckt, als wir hier auf die Schaltfläche klickten.
Nun ist dies ein Beispiel für die Verwendung des Collapse-Plugins hier.
Wenn wir uns den Code ansehen, werden wir sehen, dass wir tatsächlich das Collapse-Plugin auf
das div anwenden, das diese Navigationsleiste enthält.
Wenn Sie sich den Code für
unsere Navigationsleiste ansehen, den wir zuvor entworfen haben, haben Sie gesehen, dass
wir hier, innerhalb des Containers, diese Schaltfläche erstellt haben, die für
die extra kleinen Bildschirmgrößen mit der navbar-toggler-Klasse angezeigt wird.
Schauen Sie sich das div an, das dieser Schaltfläche folgt.
Für das div, das dieser Schaltfläche folgt, haben wir die Collapse-Klasse verwendet.
Dies ist also die Verwendung des Collapse-Plugins in unserer navbar.
Was das schafft, ist, dass dieser spezielle Inhalt,
unsere Navigationsleiste, die in diesem div eingeschlossen ist, für
die extra kleinen Bildschirmgrößen zusammengebrochen wird.
Und dann, zusammen mit dem Collapse-Plugin,
wird dieser Button, der dort erscheint, das Ein- und Ausblenden dieser Navbar hier auslösen.
Deshalb, wenn Sie auf die Schaltfläche schauen, werden Sie sehen, dass
wir genau dort das Daten-Toggle-Attribut mit dem Zusammenbruch hier
und dann das Datenziel als #Navbar hier bereitstellen.
Und beachten Sie, dass die ID für dieses div, das wir hier angewendet haben, Navbar ist.
Also spezifizieren wir im Wesentlichen, dass dieser Knopf als
Auslösemechanismus für dieses Collapse-Plugin fungieren wird, um an diesem div hier zu arbeiten.
Dies ist also eine Verwendung des Collapse-Plugins in Ihrer Webseite.
Außerdem werden wir uns die andere Komponente ansehen, die das Akkordeon in Bootstrap ist.
Wie verhält sich ein Akkordeon?
Dies ist also ein Beispiel für ein Akkordeon, das wir in der
folgenden Übung konstruieren werden.
Hier werden Sie sehen, dass ich die Tabbed Navigation ersetzt habe, die wir
in der vorherigen Übung gemacht haben, indem Sie hier ein Akkordeon verwenden.
Die Art und Weise, wie das Akkordeon funktioniert, ist, dass ein Stück Inhalt enthüllt wird und
die restlichen drei verborgen sind.
Dies verwendet also das Collapse-Plugin für diesen Zweck.
Wenn Sie also auf einen der Namen dieser anderen Unternehmensleiter klicken,
dann werden die Details dieses Unternehmensleiters enthüllt und
die restlichen drei verborgen.
Das ist also das Akkordeon-Verhalten hier.
Wenn Sie mit einem Akkordeon,
dem Musikinstrument, vertraut sind, wissen Sie, wie der Balg des Akkordeons funktioniert.
So verhält sich das in gewissem Sinne wie der Balg des Akkordeons.
Das ist also der Grund, warum diese Komponente in Bootstrap als Akkordeon bezeichnet wird.
Ein weiteres Beispiel für das verwendete Collapse-Plugin ist auf Ihrer eigenen Kurs-Website.
Wenn Sie also auf Ihre Kurs-Website
gehen und dann in den Inhalt Ihrer Kurs-Website
gehen und den Inhalt hier ansehen, werden Sie feststellen, dass
Sie auf der linken Seite eine Navigation haben, die auf der linken Seite ins Bild kommt.
Das ist also die Navigation dort.
Wenn du also auf jeden einzelnen klickst, merkst du, wie der Inhalt hier
versteckt und offenbart wird, indem du auf jeden dieser Links klickst.
Das ist also wie das Collapse-Plugin, das wir in Bootstrap gesehen haben.
Obwohl natürlich die Coursera-Seite Bootstrap nicht verwendet.
Wir gehen zur nächsten Übung, wo wir sehen werden, wie wir
das Akkordeon konstruieren, um unsere Informationen über die Unternehmensführung zu zeigen.
( MUSIK)