1 00:00:03,670 --> 00:00:09,835 In dieser Übung untersuchen wir Bootstrap Tab-basierte Navigation, 2 00:00:09,835 --> 00:00:11,920 Bootstrap Unterstützung für Tabs 3 00:00:11,920 --> 00:00:17,310 und wie Tabs verwendet werden können, um Inhalte auf Ihrer Webseite zu organisieren. 4 00:00:17,310 --> 00:00:21,165 Und wie Sie von einer Registerkarte zu einer anderen Registerkarte navigieren 5 00:00:21,165 --> 00:00:26,235 und dann Inhalte in jedem dieser Registerkarten auf der Webseite anzeigen können. 6 00:00:26,235 --> 00:00:30,115 Jetzt werden Sie hier sehen, wie ich die nav-Klasse verwende 7 00:00:30,115 --> 00:00:34,560 und sie dann mit der nav tabs Klasse weiter qualifizieren kann. 8 00:00:34,560 --> 00:00:38,065 Der gleiche Ansatz kann auch mit den Nav-Pillen verwendet werden 9 00:00:38,065 --> 00:00:42,740 , die wir in der vorherigen Vorlesung angesehen haben. 10 00:00:43,470 --> 00:00:46,440 Um mit dieser Übung zu beginnen, 11 00:00:46,440 --> 00:00:49,200 werden wir in aboutus.html Seite gehen. 12 00:00:49,200 --> 00:00:50,545 Und dann genau da, 13 00:00:50,545 --> 00:00:53,690 wo wir die Corporate Leadership Inhalte dort haben, 14 00:00:53,690 --> 00:00:59,290 nach dem h2, werde ich die Tabbed Navigation vorstellen. 15 00:00:59,290 --> 00:01:07,960 Also, hier werde ich die ul mit der Klasse nav nav-tabs verwenden. 16 00:01:07,960 --> 00:01:12,070 Sie haben also gesehen, dass wir früher, als wir die Navigationsleiste konstruierten, 17 00:01:12,070 --> 00:01:17,215 auch die ul innerhalb der Navigationsleiste verwendet haben, um die Navigationselemente dort anzugeben. 18 00:01:17,215 --> 00:01:20,270 Ähnlicher Ansatz hier, außer dass wir hier 19 00:01:20,270 --> 00:01:24,235 die ul mit dem nav und den nav Tabs hier verwenden werden. 20 00:01:24,235 --> 00:01:26,120 Also, innerhalb dieser ul, 21 00:01:26,120 --> 00:01:33,395 werden wir die Navigationsstruktur für diese Registerkartennavigation hier konstruieren. 22 00:01:33,395 --> 00:01:41,850 Also, dort werde ich das Listenelement mit dem Klasse nav-item verwenden 23 00:01:41,850 --> 00:01:48,965 und die Navigation um dieses Listenelement erstellen. 24 00:01:48,965 --> 00:01:53,770 Also, dies führt das erste Element in meine Navigations-Tabs ein. 25 00:01:53,770 --> 00:02:03,605 Gleich danach werde ich da drinnen ein A mit der Klasse nav-link aktiv einführen. 26 00:02:03,605 --> 00:02:05,960 Also, diese, wie Sie sehen, 27 00:02:05,960 --> 00:02:10,670 wenn Sie sich von der Art erinnern, wie wir die ul mit dem nav Element und nav Link verwenden. 28 00:02:10,670 --> 00:02:12,995 In der Navigationsleiste 29 00:02:12,995 --> 00:02:14,970 sehen wir hier einen ähnlichen Ansatz. 30 00:02:14,970 --> 00:02:19,150 Also, nav-item aktiv, und dann href. 31 00:02:19,970 --> 00:02:24,895 Dies wäre also ein Verweis auf den Registerkartenbereich später, 32 00:02:24,895 --> 00:02:28,695 der die ID von Peter dort haben würde, 33 00:02:28,695 --> 00:02:33,310 und Rolle ist Registerkarte für diesen 34 00:02:33,310 --> 00:02:39,560 und Data-toggle Tab. 35 00:02:39,560 --> 00:02:45,540 So können Sie sehen, dass die JavaScript-Komponente des Bootstrap hier ins Bild kommt. 36 00:02:45,540 --> 00:02:49,500 Und dann werde ich Peter Pan sagen, 37 00:02:49,700 --> 00:02:54,405 und dann das a Tag dort abschließen. 38 00:02:54,405 --> 00:03:01,435 Dies würde also unseren ersten Tab in unserer Tab-Navigation vervollständigen. 39 00:03:01,435 --> 00:03:03,310 Lassen Sie mich den Rest des Codes vervollständigen, 40 00:03:03,310 --> 00:03:07,255 und dann kommen wir zurück und überprüfen den Rest des Codes dort. 41 00:03:07,255 --> 00:03:13,630 So, hier können Sie sehen, dass ich diese Navigationsstruktur hier abgeschlossen habe. 42 00:03:13,630 --> 00:03:23,635 Ebenso definiere ich hier die Listenpositionen für die verbleibenden freien Unternehmensleiter. 43 00:03:23,635 --> 00:03:26,305 Jetzt lassen Sie mich die Änderung speichern. 44 00:03:26,305 --> 00:03:30,160 Und dann gehen wir und werfen einen kurzen Blick auf die Webseite. Wenn Sie 45 00:03:30,840 --> 00:03:33,070 auf die Webseite wechseln, 46 00:03:33,070 --> 00:03:37,260 sehen Sie jetzt, wie wir mit den Navigationsregisterkarten 47 00:03:37,260 --> 00:03:42,400 diese Navigationsstruktur direkt unter der Unternehmensführung hier erstellt haben. 48 00:03:42,400 --> 00:03:47,110 Also, diese Navigationsstruktur bedeutet, dass ich 49 00:03:47,110 --> 00:03:51,815 in der Lage sein sollte, zu navigieren und jeden einzelnen von ihnen detaillierter zu sehen, indem ich darauf klicke. 50 00:03:51,815 --> 00:03:54,830 So funktioniert die Navigation mit Registerkarten hier. 51 00:03:54,830 --> 00:03:58,525 Nun, offensichtlich, sollte der Inhalt jedes einzelnen von ihnen 52 00:03:58,525 --> 00:04:02,700 angemessen nur die Details dieser Person hier zeigen. 53 00:04:02,700 --> 00:04:06,145 Dies ist also, wo die Verwendung von Registerinhalten 54 00:04:06,145 --> 00:04:10,630 und den Registerkartenklassen in Kraft treten. 55 00:04:10,630 --> 00:04:13,925 Und wir werden diesen Inhalt mit dem einschließen. 56 00:04:13,925 --> 00:04:17,200 Und dann binden Sie dies an die Navigation, 57 00:04:17,200 --> 00:04:18,660 Tab-Navigation hier oben, 58 00:04:18,660 --> 00:04:22,580 so dass nur eine einzelne Unternehmensleiter Informationen 59 00:04:22,580 --> 00:04:25,380 auf dem Bildschirm gleichzeitig angezeigt werden. 60 00:04:25,380 --> 00:04:28,910 Sobald wir das Einrichten dieser Registerkartennavigation abgeschlossen 61 00:04:28,910 --> 00:04:31,755 haben, gehen wir nach unten in den eigentlichen Inhalt hier. 62 00:04:31,755 --> 00:04:36,505 Und jetzt werde ich diesen Inhalt in vier separate Registerkarten reorganisieren, 63 00:04:36,505 --> 00:04:38,840 von denen jeder angezeigt wird, wenn 64 00:04:38,840 --> 00:04:44,010 der entsprechende Registerkartenbereich in der Registernavigation ausgewählt wird. 65 00:04:44,010 --> 00:04:45,830 Also, um loszulegen, 66 00:04:45,830 --> 00:04:50,755 ist das erste, was wir tun werden, zu gehen und 67 00:04:50,755 --> 00:04:55,680 jeden dieser vier Unternehmensleiter in die vier Teile dort zu trennen, 68 00:04:55,680 --> 00:04:58,815 so dass es für mich leicht ist zu sehen, was ich tue. 69 00:04:58,815 --> 00:05:01,180 Also, am h3, 70 00:05:01,180 --> 00:05:04,355 schneide ich sie in vier verschiedene Teile, 71 00:05:04,355 --> 00:05:08,610 und dann werden wir in der Lage sein, mit diesen zu arbeiten. 72 00:05:08,610 --> 00:05:13,395 Also, jetzt habe ich eins, zwei, drei, vier. 73 00:05:13,395 --> 00:05:19,055 Also, dieser Inhalt muss jetzt in ein div 74 00:05:19,055 --> 00:05:28,540 mit der Klasse tab-content eingeschlossen werden. 75 00:05:28,540 --> 00:05:32,845 Also, all diese Inhalte, die wir für 76 00:05:32,845 --> 00:05:40,055 die vier verschiedenen Unternehmensleiter haben, sollten in einem tab-inhalt-div dort eingeschlossen sein. 77 00:05:40,055 --> 00:05:44,455 Also, jetzt habe ich das in den Tab-Kontakt eingeschlossen. 78 00:05:44,455 --> 00:05:46,090 Jetzt 79 00:05:46,090 --> 00:05:52,235 muss ich für jeden von ihnen ein anderes div mit dem Registerkartenfenster Klassen und einigen zusätzlichen Klassen erstellen. 80 00:05:52,235 --> 00:05:56,430 Und dann organisieren Sie diesen Kontakt. 81 00:05:56,430 --> 00:05:58,680 Also, fangen wir mit dem ersten an. 82 00:05:58,680 --> 00:06:02,215 Also, für den ersten Unternehmensleiter, 83 00:06:02,215 --> 00:06:07,955 werde ich ein neues div mit Rolle als Tabpanel vorstellen. 84 00:06:07,955 --> 00:06:12,250 Dies dient also als Registerkartenfeld, das angezeigt wird, 85 00:06:12,250 --> 00:06:17,235 wenn die erste Registerkartennavigation ausgewählt wird. 86 00:06:17,235 --> 00:06:22,440 Und die entsprechende Klasse, die ich anwenden muss, ist ein Tab-Fenster. 87 00:06:22,440 --> 00:06:24,090 Dies ist also der Registerkartenbereich, 88 00:06:24,090 --> 00:06:26,430 der eigentliche Inhalt, der darin enthalten ist. 89 00:06:26,430 --> 00:06:29,805 Und dann ist eine andere Klasse, die ich anwende, verblassen. 90 00:06:29,805 --> 00:06:32,920 Die Fade-Klasse ermöglicht also, dass dieser Inhalt eingeblendet wird. 91 00:06:32,920 --> 00:06:37,090 Dies ist eine Animationsklasse, die Bootstrap unterstützt. 92 00:06:37,090 --> 00:06:40,340 Außerdem wende ich diese Klasse namens show an. 93 00:06:40,340 --> 00:06:43,770 Die show Klasse gibt im Wesentlichen an 94 00:06:43,770 --> 00:06:48,425 , dass dieser bestimmte Inhalt angezeigt werden soll, wenn die Seite zum ersten Mal gerendert wird. 95 00:06:48,425 --> 00:06:52,870 Es wird also die Showklasse nur auf den ersten Registerkartenbereich angewendet, auf 96 00:06:52,870 --> 00:06:56,640 den verbleibenden Registerkarten wird die Showklasse nicht angewendet. 97 00:06:56,640 --> 00:07:00,910 Und die letzte Klasse, die ich anwenden werde, ist aktiv, da dies 98 00:07:00,910 --> 00:07:07,190 der Registerkartenbereich ist, der auf der Seite angezeigt wird, wenn die Seite zum ersten Mal gerendert wird. 99 00:07:07,190 --> 00:07:10,095 Darüber hinaus, damit die Navigation funktioniert, 100 00:07:10,095 --> 00:07:12,760 muss ich dies eine und ID geben, 101 00:07:12,760 --> 00:07:19,340 und da ich Hashtag Peter für den Tab-Navigationsinhalt verwendet habe, 102 00:07:19,340 --> 00:07:23,705 also werde ich die ID als Peter hier anwenden. 103 00:07:23,705 --> 00:07:31,680 Und wenn dies in einem Link mit Hashtag Peter erwähnt wird, 104 00:07:31,680 --> 00:07:34,740 ist dies der entsprechende Bereich, auf den ich mich beziehe. 105 00:07:34,740 --> 00:07:39,885 Nun, was ich tun werde, ist, dass ich dieses div von dort kopieren werde. 106 00:07:39,885 --> 00:07:49,010 Und dann werde ich dieses div auf die Informationen des zweiten Unternehmensleiters anwenden, 107 00:07:49,010 --> 00:07:55,255 außer dass ich für diesen nur den Registerkartenbereich anwenden und passen sollte. 108 00:07:55,255 --> 00:07:58,730 Die Show und die aktive sollte nicht für die restlichen drei angewendet werden. 109 00:07:58,730 --> 00:08:03,820 Und der Ausweis hier sollte Danny für die zweite sein. 110 00:08:03,820 --> 00:08:08,190 Ich werde diesen Code einfach kopieren 111 00:08:08,190 --> 00:08:13,460 und dann für den dritten Unternehmensleiter hier einfügen. 112 00:08:13,460 --> 00:08:20,955 Und dann ist das Registerkartenfeld und das dritte Agumbe. 113 00:08:20,955 --> 00:08:23,795 Und der letzte, 114 00:08:23,795 --> 00:08:27,235 wieder, füge ich das ein, 115 00:08:27,235 --> 00:08:31,640 und dann sollte die ID in Alberto geändert werden, 116 00:08:31,640 --> 00:08:34,280 und schließen Sie dieses div hier. 117 00:08:34,280 --> 00:08:39,580 Also, dieses div für das letzte sollte an diesem Punkt geschlossen werden. 118 00:08:39,580 --> 00:08:45,355 Und das sollte sich um die vier Registerkarten kümmern, die ich brauche. 119 00:08:45,355 --> 00:08:50,725 Eingehen und Einrücken dieser Inhalte, 120 00:08:50,725 --> 00:08:53,490 so dass ich zufrieden bin, 121 00:08:53,490 --> 00:08:56,245 meine Obsession ist dort zufrieden. 122 00:08:56,245 --> 00:09:01,805 Okay, damit ist die Organisation des Tab-Inhalts abgeschlossen. 123 00:09:01,805 --> 00:09:04,600 Nun, speichern wir die Änderung und gehen und werfen 124 00:09:04,600 --> 00:09:09,030 einen kurzen Blick auf, was die Webseite jetzt mag. Wenn Sie 125 00:09:09,330 --> 00:09:11,480 auf unserer Webseite gehen, 126 00:09:11,480 --> 00:09:19,680 sehen Sie jetzt, dass unsere Webseite nur die Inhalte angezeigt wird, die ihrem CEO entsprechen. 127 00:09:19,680 --> 00:09:22,825 Wenn Sie zu einem der anderen wechseln, 128 00:09:22,825 --> 00:09:26,415 sehen Sie, dass die entsprechenden Informationen angezeigt werden. 129 00:09:26,415 --> 00:09:32,290 Beachten Sie, wie diese Informationen eingeblendet werden, wenn Sie diesen bestimmten Benutzer auswählen. 130 00:09:32,290 --> 00:09:35,400 Aber natürlich, wenn Sie damit zufrieden sind, 131 00:09:35,400 --> 00:09:37,890 dann ist das in Ordnung, wir können an dieser Stelle aufhören. 132 00:09:37,890 --> 00:09:45,360 Aber ich möchte eine echte Registerkarte um diese herum schön definieren. 133 00:09:45,360 --> 00:09:50,370 Also, hier werde ich ein paar CSS-Attribute, 134 00:09:50,370 --> 00:09:53,540 Eigenschaften auf diese spezielle Registerkarte hier anwenden, 135 00:09:53,540 --> 00:09:55,660 so dass es eine schöne, 136 00:09:55,660 --> 00:09:58,290 saubere Tab-Struktur ist, die dort definiert wird. 137 00:09:58,290 --> 00:10:03,590 Also, lassen Sie uns ein paar CSS-Eigenschaften dafür erstellen. 138 00:10:03,590 --> 00:10:06,855 Der letzte Schritt, um zu styles.css zu wechseln. 139 00:10:06,855 --> 00:10:09,555 Nach der Navbar-Inverse 140 00:10:09,555 --> 00:10:15,530 werde ich die CSS-Klassen für den Tab-Inhalt vorstellen, 141 00:10:15,530 --> 00:10:18,010 also gebe ich für den Tab-Inhalt 142 00:10:18,010 --> 00:10:29,565 border-left an: 1px solid DDD. 143 00:10:29,565 --> 00:10:48,195 Und ich werde das gleiche für die Grenze rechts und unten anwenden. 144 00:10:48,195 --> 00:10:51,310 Ich muss mich nicht oben bewerben, da der obere Teil 145 00:10:51,310 --> 00:10:55,585 bereits von der Tab-Navigation gesteuert wird. 146 00:10:55,585 --> 00:11:00,250 Und dann lassen Sie mich eine Polsterung von 10 Pixeln überall geben 147 00:11:00,250 --> 00:11:02,990 und dann die Änderungen speichern. 148 00:11:02,990 --> 00:11:07,450 Werfen wir einen Blick auf unsere Webseite danach. Wenn Sie 149 00:11:07,450 --> 00:11:09,980 zurück zu unserer Seite wechseln, 150 00:11:09,980 --> 00:11:11,395 sehen Sie jetzt eine nette, 151 00:11:11,395 --> 00:11:14,920 saubere tab-ähnliche Struktur erstellt wird. 152 00:11:14,920 --> 00:11:18,355 So dass, wenn Sie zu jedem von ihnen navigieren 153 00:11:18,355 --> 00:11:24,695 , diese entsprechenden Informationen entsprechend in einer eigenen Registerkarte angezeigt werden. 154 00:11:24,695 --> 00:11:28,905 Dies schließt diese Übung ab, in der wir uns 155 00:11:28,905 --> 00:11:33,120 die Verwendung der Tabbed Navigation für unsere Webseite angesehen haben. 156 00:11:33,120 --> 00:11:39,435 Und dann haben wir gesehen, wie wir Tab-Navigation erstellen und andere Inhalte einschließen können. 157 00:11:39,435 --> 00:11:46,200 Dies ist auch ein guter Zeitpunkt für Sie, einen Git-Kommentar mit den Nachrichten-Tabs zu machen.