In dieser Übung untersuchen wir Bootstrap Tab-basierte Navigation,
Bootstrap Unterstützung für Tabs
und wie Tabs verwendet werden können, um Inhalte auf Ihrer Webseite zu organisieren.
Und wie Sie von einer Registerkarte zu einer anderen Registerkarte navigieren
und dann Inhalte in jedem dieser Registerkarten auf der Webseite anzeigen können.
Jetzt werden Sie hier sehen, wie ich die nav-Klasse verwende
und sie dann mit der nav tabs Klasse weiter qualifizieren kann.
Der gleiche Ansatz kann auch mit den Nav-Pillen verwendet werden
, die wir in der vorherigen Vorlesung angesehen haben.
Um mit dieser Übung zu beginnen,
werden wir in aboutus.html Seite gehen.
Und dann genau da,
wo wir die Corporate Leadership Inhalte dort haben,
nach dem h2, werde ich die Tabbed Navigation vorstellen.
Also, hier werde ich die ul mit der Klasse nav nav-tabs verwenden.
Sie haben also gesehen, dass wir früher, als wir die Navigationsleiste konstruierten,
auch die ul innerhalb der Navigationsleiste verwendet haben, um die Navigationselemente dort anzugeben.
Ähnlicher Ansatz hier, außer dass wir hier
die ul mit dem nav und den nav Tabs hier verwenden werden.
Also, innerhalb dieser ul,
werden wir die Navigationsstruktur für diese Registerkartennavigation hier konstruieren.
Also, dort werde ich das Listenelement mit dem Klasse nav-item verwenden
und die Navigation um dieses Listenelement erstellen.
Also, dies führt das erste Element in meine Navigations-Tabs ein.
Gleich danach werde ich da drinnen ein A mit der Klasse nav-link aktiv einführen.
Also, diese, wie Sie sehen,
wenn Sie sich von der Art erinnern, wie wir die ul mit dem nav Element und nav Link verwenden.
In der Navigationsleiste
sehen wir hier einen ähnlichen Ansatz.
Also, nav-item aktiv, und dann href.
Dies wäre also ein Verweis auf den Registerkartenbereich später,
der die ID von Peter dort haben würde,
und Rolle ist Registerkarte für diesen
und Data-toggle Tab.
So können Sie sehen, dass die JavaScript-Komponente des Bootstrap hier ins Bild kommt.
Und dann werde ich Peter Pan sagen,
und dann das a Tag dort abschließen.
Dies würde also unseren ersten Tab in unserer Tab-Navigation vervollständigen.
Lassen Sie mich den Rest des Codes vervollständigen,
und dann kommen wir zurück und überprüfen den Rest des Codes dort.
So, hier können Sie sehen, dass ich diese Navigationsstruktur hier abgeschlossen habe.
Ebenso definiere ich hier die Listenpositionen für die verbleibenden freien Unternehmensleiter.
Jetzt lassen Sie mich die Änderung speichern.
Und dann gehen wir und werfen einen kurzen Blick auf die Webseite. Wenn Sie
auf die Webseite wechseln,
sehen Sie jetzt, wie wir mit den Navigationsregisterkarten
diese Navigationsstruktur direkt unter der Unternehmensführung hier erstellt haben.
Also, diese Navigationsstruktur bedeutet, dass ich
in der Lage sein sollte, zu navigieren und jeden einzelnen von ihnen detaillierter zu sehen, indem ich darauf klicke.
So funktioniert die Navigation mit Registerkarten hier.
Nun, offensichtlich, sollte der Inhalt jedes einzelnen von ihnen
angemessen nur die Details dieser Person hier zeigen.
Dies ist also, wo die Verwendung von Registerinhalten
und den Registerkartenklassen in Kraft treten.
Und wir werden diesen Inhalt mit dem einschließen.
Und dann binden Sie dies an die Navigation,
Tab-Navigation hier oben,
so dass nur eine einzelne Unternehmensleiter Informationen
auf dem Bildschirm gleichzeitig angezeigt werden.
Sobald wir das Einrichten dieser Registerkartennavigation abgeschlossen
haben, gehen wir nach unten in den eigentlichen Inhalt hier.
Und jetzt werde ich diesen Inhalt in vier separate Registerkarten reorganisieren,
von denen jeder angezeigt wird, wenn
der entsprechende Registerkartenbereich in der Registernavigation ausgewählt wird.
Also, um loszulegen,
ist das erste, was wir tun werden, zu gehen und
jeden dieser vier Unternehmensleiter in die vier Teile dort zu trennen,
so dass es für mich leicht ist zu sehen, was ich tue.
Also, am h3,
schneide ich sie in vier verschiedene Teile,
und dann werden wir in der Lage sein, mit diesen zu arbeiten.
Also, jetzt habe ich eins, zwei, drei, vier.
Also, dieser Inhalt muss jetzt in ein div
mit der Klasse tab-content eingeschlossen werden.
Also, all diese Inhalte, die wir für
die vier verschiedenen Unternehmensleiter haben, sollten in einem tab-inhalt-div dort eingeschlossen sein.
Also, jetzt habe ich das in den Tab-Kontakt eingeschlossen.
Jetzt
muss ich für jeden von ihnen ein anderes div mit dem Registerkartenfenster Klassen und einigen zusätzlichen Klassen erstellen.
Und dann organisieren Sie diesen Kontakt.
Also, fangen wir mit dem ersten an.
Also, für den ersten Unternehmensleiter,
werde ich ein neues div mit Rolle als Tabpanel vorstellen.
Dies dient also als Registerkartenfeld, das angezeigt wird,
wenn die erste Registerkartennavigation ausgewählt wird.
Und die entsprechende Klasse, die ich anwenden muss, ist ein Tab-Fenster.
Dies ist also der Registerkartenbereich,
der eigentliche Inhalt, der darin enthalten ist.
Und dann ist eine andere Klasse, die ich anwende, verblassen.
Die Fade-Klasse ermöglicht also, dass dieser Inhalt eingeblendet wird.
Dies ist eine Animationsklasse, die Bootstrap unterstützt.
Außerdem wende ich diese Klasse namens show an.
Die show Klasse gibt im Wesentlichen an
, dass dieser bestimmte Inhalt angezeigt werden soll, wenn die Seite zum ersten Mal gerendert wird.
Es wird also die Showklasse nur auf den ersten Registerkartenbereich angewendet, auf
den verbleibenden Registerkarten wird die Showklasse nicht angewendet.
Und die letzte Klasse, die ich anwenden werde, ist aktiv, da dies
der Registerkartenbereich ist, der auf der Seite angezeigt wird, wenn die Seite zum ersten Mal gerendert wird.
Darüber hinaus, damit die Navigation funktioniert,
muss ich dies eine und ID geben,
und da ich Hashtag Peter für den Tab-Navigationsinhalt verwendet habe,
also werde ich die ID als Peter hier anwenden.
Und wenn dies in einem Link mit Hashtag Peter erwähnt wird,
ist dies der entsprechende Bereich, auf den ich mich beziehe.
Nun, was ich tun werde, ist, dass ich dieses div von dort kopieren werde.
Und dann werde ich dieses div auf die Informationen des zweiten Unternehmensleiters anwenden,
außer dass ich für diesen nur den Registerkartenbereich anwenden und passen sollte.
Die Show und die aktive sollte nicht für die restlichen drei angewendet werden.
Und der Ausweis hier sollte Danny für die zweite sein.
Ich werde diesen Code einfach kopieren
und dann für den dritten Unternehmensleiter hier einfügen.
Und dann ist das Registerkartenfeld und das dritte Agumbe.
Und der letzte,
wieder, füge ich das ein,
und dann sollte die ID in Alberto geändert werden,
und schließen Sie dieses div hier.
Also, dieses div für das letzte sollte an diesem Punkt geschlossen werden.
Und das sollte sich um die vier Registerkarten kümmern, die ich brauche.
Eingehen und Einrücken dieser Inhalte,
so dass ich zufrieden bin,
meine Obsession ist dort zufrieden.
Okay, damit ist die Organisation des Tab-Inhalts abgeschlossen.
Nun, speichern wir die Änderung und gehen und werfen
einen kurzen Blick auf, was die Webseite jetzt mag. Wenn Sie
auf unserer Webseite gehen,
sehen Sie jetzt, dass unsere Webseite nur die Inhalte angezeigt wird, die ihrem CEO entsprechen.
Wenn Sie zu einem der anderen wechseln,
sehen Sie, dass die entsprechenden Informationen angezeigt werden.
Beachten Sie, wie diese Informationen eingeblendet werden, wenn Sie diesen bestimmten Benutzer auswählen.
Aber natürlich, wenn Sie damit zufrieden sind,
dann ist das in Ordnung, wir können an dieser Stelle aufhören.
Aber ich möchte eine echte Registerkarte um diese herum schön definieren.
Also, hier werde ich ein paar CSS-Attribute,
Eigenschaften auf diese spezielle Registerkarte hier anwenden,
so dass es eine schöne,
saubere Tab-Struktur ist, die dort definiert wird.
Also, lassen Sie uns ein paar CSS-Eigenschaften dafür erstellen.
Der letzte Schritt, um zu styles.css zu wechseln.
Nach der Navbar-Inverse
werde ich die CSS-Klassen für den Tab-Inhalt vorstellen,
also gebe ich für den Tab-Inhalt
border-left an: 1px solid DDD.
Und ich werde das gleiche für die Grenze rechts und unten anwenden.
Ich muss mich nicht oben bewerben, da der obere Teil
bereits von der Tab-Navigation gesteuert wird.
Und dann lassen Sie mich eine Polsterung von 10 Pixeln überall geben
und dann die Änderungen speichern.
Werfen wir einen Blick auf unsere Webseite danach. Wenn Sie
zurück zu unserer Seite wechseln,
sehen Sie jetzt eine nette,
saubere tab-ähnliche Struktur erstellt wird.
So dass, wenn Sie zu jedem von ihnen navigieren
, diese entsprechenden Informationen entsprechend in einer eigenen Registerkarte angezeigt werden.
Dies schließt diese Übung ab, in der wir uns
die Verwendung der Tabbed Navigation für unsere Webseite angesehen haben.
Und dann haben wir gesehen, wie wir Tab-Navigation erstellen und andere Inhalte einschließen können.
Dies ist auch ein guter Zeitpunkt für Sie, einen Git-Kommentar mit den Nachrichten-Tabs zu machen.