Akkordeons sind eines dieser lästigen Instrumente, die einige von euch vielleicht schon gesehen haben.
Es hat einen dieser Blasebalg mit einer Tastatur unten
hier unten und dann blasen Sie und spielen Sie dann die Musik mit den Tasten dort.
Und nicht jeder genießt es.
Ich bin mir ziemlich sicher. Aber nichts für ungut Akkordeonspieler.
Akkordeons in Bootstrap sind sicher sehr interessant.
Wir werden uns ansehen, wie wir Akkordeons anwenden, um
in dieser Übung Inhalte auf unserer Webseite ein- und ausblenden zu können.
Zurück zu Über uns auf HTML-Seite, wo wir die Informationen über die Unternehmensführung hatten.
Jetzt werde ich die obere Navigation durch eine Akkordeon-basierte Navigation ersetzen.
Ich werde diese UL entfernen, die den Begriff Navigation vollständig definiert.
Und dann entwerfen wir das Akkordeon um den Inhalt, den wir bereits haben.
Also, lassen Sie uns diese UL löschen, die die Tab-Navigation enthält, so dass sie
nur mit diesem Teil, der innerhalb des oberen Bereichs und den oberen Inhalt eingeschlossen ist.
Also, wir werden gehen und das ändern.
Wenn ich hier zu diesem div
gehe, werde ich diese Klasse von dort entfernen und dann die ID als Akkordeon anwenden.
Wir brauchen diese ID später, um das Akkordeon erstellen zu können, dass div,
das diesen Inhalt enthält, noch dort vorhanden ist.
So wird der Top-Inhalt jetzt in Akkordeon geändert.
Nun, jeder dieser Inhalte hier, werden
wir diese in eine
karten-basierte Struktur konvertieren, so dass sie den Inhalt in
jeder dieser Karten offenbaren können, so dass Sie sehen, wie ich die Karte und
die Kartenklassen dort verwenden, um diesen Inhalt beizufügen.
Jetzt, in den eigentlichen Inhalt hier gehe,
werde ich anfangen, die Kartenklasse hier mit dem div dort anzuwenden.
Also, wir werden sagen, „div class card“ und
dann schließen Sie das div dort und dann geht dieser Inhalt in das div dort.
Jetzt, hier drin, werden wir hineingehen und
ein div mit der Klasse „Kartenkopf“ erstellen.
Ich werde Ihnen für einen von ihnen zeigen, und dann werden wir
diesen Prozess auch für die restlichen drei wiederholen.
Also, wir werden sagen, „Karte Header Roll Tab“ und dann „id Peterhead.“
Ich werde dieses h3 von unten hier unten nehmen,
es ausschneiden und dann in die Kartentafel einfügen.
Also, diese h3, die den Namen
der Corporate Leadership Person definiert, wird von
innerhalb des Registerkartenbereichs geschnitten und dann in den Kartenkopf hier verschoben.
Dies wird als meine Navigationshilfe fungieren.
Nun, zu diesem h3, werde ich eine Klasse namens mb-0 anwenden.
Also, das ist mb-0 hier.
Nun, dieser Name selbst,
ich werde das in und eine einschließen,
also werde ich zur nächsten Zeile gehen und dann sagen,
„ein Datenumschalter“ und
der Datenumschalter wird sagen, „kollabieren“.
Also, jetzt sehen Sie, dass Sie das Collapse-Plugin verwenden.
Also, wir haben diese Schließung h3 dort.
Also, ich werde es in die nächste Zeile
hier verschieben und dann werde ich das A Tag genau dort schließen.
Damit umgibt das A Tag nun den Namen des CEO hier drin.
Und dann schließt das h3-Tag natürlich das h3 oben und dann ist dies
innerhalb des div, das der Klassenkarten-Header ist.
Das bildet also die Header-Struktur für mein Akkordeon div.
Gehen Sie jetzt in die Registerkarte unten,
Ich werde diese Klasse von Registerkarte Panel Fade zu reduzieren ändern.
Dies wäre also ein Collapse-Plugin, das für unser Akkordeon nützlich sein
wird und auch ich werde
diese aktive Klasse dafür entfernen und die ID wird als Peter dafür gelassen.
Und dann werden Sie sagen, „Daten Eltern“ und Sie würden Akkordeon angeben.
Sie sehen, warum wir die ID des Akkordeons an das div gegeben haben, das all diese Inhalte umschließt. Auf
diese Weise können Sie angeben, dass dies
Teil des Akkordeons sein wird, das Sie dort konstruieren.
Also, das ist, warum Daten Eltern-Akkordeon.
Nun, der Inhalt in diesem Tab-Panel,
werde ich es in das div mit
dem Klassenkarten-Körper
einschließen und dieses div hier schließen
und dann diesen Inhalt einrücken.
Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf unsere Webseite in diesem Moment. Wenn Sie
auf unsere Webseite gehen, stellen Sie nun fest, dass in der Unternehmensführung
der Name des CEO hier im Kartenkopf hervorgehoben wird.
Und dann ist der Inhalt unten hier unten.
Jetzt werden wir die verbleibenden drei unten erstellen und dann alle darin einschließen.
Ich werde die gleiche Struktur für die restlichen wiederholen.
Also, ich werde die Karte mit dem Kartenkopf haben,
und der Kartenkopf wird den Namen der Person so umschließen.
Also, Sie werden so ziemlich
die gleiche Struktur für die verbleibenden drei Teile des Inhalts folgen.
Also, lassen Sie uns die Änderungen vornehmen und dann kommen wir zurück und überprüfen den Code. Wenn Sie
zum Code zurückkommen,
sehen Sie jetzt, dass
Sie für die restlichen drei bemerken, dass ich die Karte hier immer noch
mit dem Kartenkopf hier und h3 mit dem mb-0 benutze.
Dies ist innerhalb der Kartenkopfklasse div dort und dann unten unter
der Klasse nur als Zusammenbruch und dann mit der ID
und dann dem Kartenkörper, der das P umschließt.
Dasselbe mit den restlichen beiden auch.
Mit dieser Änderung
werden diese drei verbleibenden Informationen der Unternehmensleiter
zusammengebrochen, aber Peter Pans verkrümmerte Informationen
werden beim ersten Rendern der Webseite enthüllt.
Also, mit dieser Änderung, jetzt,
ist dieses Code-Snippet offensichtlich in
den Anweisungen, die hier folgen, so dass Sie sich keine Sorgen zu viel machen müssen.
Sie können sich immer darauf beziehen, um sicherzustellen, dass Sie es richtig gemacht haben.
Also, lassen Sie uns die Änderungen speichern.
Wenn Sie auf unsere Webseite zurückkehren,
sehen Sie jetzt das Akkordeon hier konstruiert.
So sehen Sie, dass die ersten Informationen über Unternehmensleiter hier angezeigt werden.
Die restlichen drei sind in diesem Moment zusammengebrochen.
Also, das ist der Grund für die Verwendung des Collapse-Plugins und auch der Grund,
den Namen des Unternehmensführers in den Kartentitel zu verschieben.
Sehen Sie, wie Sie gesehen haben, dass es so angezeigt wird. Wenn Sie
nun auf einen von ihnen klicken, stellen Sie fest, dass, wenn Sie
darauf klicken, dieser Inhalt angezeigt wird, aber die restlichen drei sind ausgeblendet.
Also, das ist das Akkordeonverhalten hier.
Damit schließen wir diese Übung ab.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht Akkordeon zu machen.