1
00:00:03,650 --> 00:00:11,190
Wir haben gerade eine Diskussion über die Wichtigkeit der Navigation auf Ihrer Website abgeschlossen.

2
00:00:11,190 --> 00:00:15,920
Wir haben auch verschiedene Möglichkeiten untersucht, wie wir Navigation auf einer Website bieten können.

3
00:00:15,920 --> 00:00:21,229
Es ist jetzt Zeit für uns, Bootstrap zu betrachten und Komponenten zu betrachten

4
00:00:21,229 --> 00:00:26,269
, die Bootstrap bietet, die es uns ermöglichen, Navigation zu unseren Websites hinzuzufügen.

5
00:00:26,269 --> 00:00:32,815
Zwei wichtige Komponenten von Bootstrap sind die Navbar und Breadcrumbs.

6
00:00:32,815 --> 00:00:37,610
Wir werden beide in dieser Übung untersuchen.

7
00:00:37,610 --> 00:00:44,745
Lassen Sie uns beginnen, indem Sie oben auf unserer Webseite eine Navigationsleiste hinzufügen.

8
00:00:44,745 --> 00:00:50,065
Wir können dies mit der Navbar-Komponente tun, die Teil von Bootstrap ist.

9
00:00:50,065 --> 00:00:51,605
Also, wie fangen wir an?

10
00:00:51,605 --> 00:00:56,260
Wir gehen zum Hauptteil unserer HTML-Seite.

11
00:00:56,260 --> 00:00:58,760
Also hier habe ich index.HTML geöffnet.

12
00:00:58,760 --> 00:01:00,495
Und oben

13
00:01:00,495 --> 00:01:06,090
werde ich ein Element hinzufügen, das dieses nav HTML-Tag verwendet.

14
00:01:06,090 --> 00:01:10,330
Jetzt ist das nav HTML-Tag für die Bereitstellung von Navigation vorgesehen.

15
00:01:10,330 --> 00:01:17,880
Also, nehmen wir den Vorteil dieses Tags und bauen unsere Navigationsleiste mit dem nav Tag.

16
00:01:17,880 --> 00:01:19,645
Also, an der Spitze,

17
00:01:19,645 --> 00:01:22,055
werde ich dieses Tag hinzufügen, das Navi

18
00:01:22,055 --> 00:01:30,040
setzen und die Navigationsleiste um dieses Navigations-Tag konstruieren.

19
00:01:30,040 --> 00:01:33,910
Also, sobald wir dieses nav Tag in index.HTML hinzufügen,

20
00:01:33,910 --> 00:01:39,590
dann können wir voran gehen und dann die bootstraps Klassen auf dieses nav Tag anwenden.

21
00:01:39,590 --> 00:01:42,700
Also, ich wende die Klasse navbar an.

22
00:01:42,700 --> 00:01:47,485
Die navbar-Klasse in Bootstrap ermöglicht es mir, eine Navigationsleiste zu erstellen.

23
00:01:47,485 --> 00:01:50,730
Es gibt viele verschiedene Möglichkeiten, die Navigationsleiste anzupassen,

24
00:01:50,730 --> 00:01:56,600
die wir als zusätzliche Klassen betrachten, die zu diesem nav Tag hinzufügen.

25
00:01:56,600 --> 00:01:58,770
Zusammen mit der navbar

26
00:01:58,770 --> 00:02:02,880
fügen wir auch in der nächsten Klasse hinzu, die navbar-dark ist.

27
00:02:02,880 --> 00:02:08,480
Jetzt möchte ich, dass meine Navigationsleiste dunkel ist und

28
00:02:08,480 --> 00:02:09,985
einen dunkleren Hintergrund hat.

29
00:02:09,985 --> 00:02:13,920
Denn das geht sehr gut mit der Website, die ich gerade entworfen habe.

30
00:02:13,920 --> 00:02:16,150
Wir können navbar-Licht haben,

31
00:02:16,150 --> 00:02:18,950
die eine hellere Farbe Navigationsleiste ist.

32
00:02:18,950 --> 00:02:23,775
Also, Sie können wählen, eine von ihnen in Ihrer Webseite zu verwenden.

33
00:02:23,775 --> 00:02:32,620
Die nächste Klasse, die ich verwenden werde, ist navbar-expand-sm Klasse.

34
00:02:32,620 --> 00:02:36,870
Jetzt und auch, werde ich die Bildschirmgröße angeben

35
00:02:36,870 --> 00:02:42,064
, unter der das umschaltbare Verhalten auftritt.

36
00:02:42,064 --> 00:02:45,165
Nun, wenn ich navbar-expand-sm sage,

37
00:02:45,165 --> 00:02:48,480
bedeutet das, dass für kleine und extra kleine Bildschirme

38
00:02:48,480 --> 00:02:51,370
diese Navbars zu einer umschaltbaren Navbar werden.

39
00:02:51,370 --> 00:02:57,080
Das bedeutet, dass es in diesen Bildschirmgrößen zusammengeklappt wird.

40
00:02:57,080 --> 00:03:00,520
Sie werden ziemlich bald erfahren, wie das funktioniert,

41
00:03:00,520 --> 00:03:02,930
wenn wir uns ansehen, wie wir

42
00:03:02,930 --> 00:03:07,460
das Collapse-Plugin zur Navbar hinzufügen können, um diese Art von Verhalten zu aktivieren.

43
00:03:07,460 --> 00:03:10,970
Also zusammen mit einem navbar umschaltbaren sm,

44
00:03:10,970 --> 00:03:15,240
werde ich zunächst eine Hintergrundfarbe auf die navbar anwenden,

45
00:03:15,240 --> 00:03:18,570
die bg-primary wäre.

46
00:03:18,570 --> 00:03:25,909
Jetzt ist bg-primary die Primärfarbe, die in Ihrem Bootstrap definiert ist.

47
00:03:25,909 --> 00:03:33,350
Standardmäßig ist dies eine Version der blauen Farbe, die von Bootstraps verwendet wird.

48
00:03:33,350 --> 00:03:35,910
Also werde ich damit beginnen, als meine Primärfarbe.

49
00:03:35,910 --> 00:03:42,350
Später werde ich die Farbe meiner navbar mit einigen CSS-Klassen anpassen.

50
00:03:42,350 --> 00:03:45,155
Darüber hinaus werde ich auch

51
00:03:45,155 --> 00:03:50,255
eine andere Klasse namens Fixed-Top auf diese Navigationsleiste anwenden.

52
00:03:50,255 --> 00:03:55,210
Was fixed-top tut, ist es fixiert die Navigationsleiste oben

53
00:03:55,210 --> 00:04:00,330
im Browserfenster, wo diese Webseite gerendert wird.

54
00:04:00,330 --> 00:04:03,830
Selbst wenn Sie Ihre nasse Seite scrollen,

55
00:04:03,830 --> 00:04:07,870
war die Navigationsleiste bis oben auf der Seite bleiben.

56
00:04:07,870 --> 00:04:12,250
Sie können einfach feste Unterseite verwenden, um

57
00:04:12,250 --> 00:04:18,235
die Navigationsleiste am unteren Rand Ihres Browserfensters zu fixieren, oder Sie können sagen, statisch oben.

58
00:04:18,235 --> 00:04:21,810
Und auch, Sie können diese Klasse einfach nicht verwenden.

59
00:04:21,810 --> 00:04:23,140
Wenn Sie das nicht verwenden,

60
00:04:23,140 --> 00:04:29,325
wird Ihre Navigationsleiste auch scrollen, wenn Ihre Webseite nach oben gescrollt wird.

61
00:04:29,325 --> 00:04:36,670
Auf meiner Website wähle ich, dass die Navigationsleiste oben auf der Seite fixiert bleibt.

62
00:04:36,670 --> 00:04:38,600
Es gibt viele weitere Optionen,

63
00:04:38,600 --> 00:04:43,920
die Sie in der Bootstraps-Dokumentation finden können.

64
00:04:43,920 --> 00:04:48,495
Dies ist also ein Beispiel für die Verwendung der Navigationsleiste.

65
00:04:48,495 --> 00:04:51,645
Außerdem

66
00:04:51,645 --> 00:04:54,545
werde ich in der Navigationsleiste den Inhalt einschließen, der

67
00:04:54,545 --> 00:04:57,450
in der Navigationsleiste in einem Container verwendet wird.

68
00:04:57,450 --> 00:05:02,880
Hier werde ich hier ein div-Element verwenden

69
00:05:02,880 --> 00:05:10,125
und die Container-Klasse auf dieses div-Element anwenden.

70
00:05:10,125 --> 00:05:12,520
Also, was auch immer darin eingeschlossen ist,

71
00:05:12,520 --> 00:05:17,375
wird auf die gleiche Breite wie der Rest meiner Webseite beschränkt sein.

72
00:05:17,375 --> 00:05:20,575
Wie Sie sich erinnern, habe ich die Container-Klasse verwendet

73
00:05:20,575 --> 00:05:24,870
, um die Breite des Inhalts auf meiner Webseite

74
00:05:24,870 --> 00:05:28,080
zu definieren. Daher werde ich dasselbe auch auf meine Navigationsleiste anwenden,

75
00:05:28,080 --> 00:05:31,490
so dass meine Navigationsleisteninformationen

76
00:05:31,490 --> 00:05:36,185
innerhalb der gleichen Breite wie der Rest meiner Webseite angezeigt werden.

77
00:05:36,185 --> 00:05:41,225
Sie können die Container-Klasse nicht in der Navigationsleiste verwenden. In diesem Fall

78
00:05:41,225 --> 00:05:47,200
wird der Inhalt der Navigationsleiste über die gesamte Breite des Bildschirms verteilt.

79
00:05:47,200 --> 00:05:49,055
In der Navigationsleiste

80
00:05:49,055 --> 00:05:54,280
werde ich hier eine Klasse zu einem Tag hinzufügen.

81
00:05:54,280 --> 00:06:02,390
Diese Klasse, die ich als Navbar-Marke nenne,

82
00:06:02,520 --> 00:06:09,170
erlaubt mir, einige Informationen als Branding Information in meiner Navigationsleiste anzuzeigen.

83
00:06:09,170 --> 00:06:11,110
Wenn Sie beispielsweise ein Unternehmen haben,

84
00:06:11,110 --> 00:06:13,050
können Sie den Namen Ihres Unternehmens oder

85
00:06:13,050 --> 00:06:16,040
das Logo Ihres Unternehmens mit der navbar-Marke anzeigen

86
00:06:16,040 --> 00:06:21,390
, so dass in Ihrer Navigationsleiste prominent angezeigt wird.

87
00:06:21,390 --> 00:06:23,370
Wenn Sie viele Websites besuchen,

88
00:06:23,370 --> 00:06:26,400
werden Sie offensichtlich sehen, dass der Name des Unternehmens irgendwo in

89
00:06:26,400 --> 00:06:30,310
der Navigationsleiste dieser Website sichtbar ist.

90
00:06:30,310 --> 00:06:33,085
Also, lassen Sie mich diese Navbar-Marke hinzufügen.

91
00:06:33,085 --> 00:06:42,190
Dies kann auch auf die Homepage Ihrer Website verlinkt werden.

92
00:06:42,190 --> 00:06:43,895
Also, ich werde das da lassen.

93
00:06:43,895 --> 00:06:46,000
Auf den verbleibenden Seiten auf meiner Website

94
00:06:46,000 --> 00:06:50,480
werde ich nur die href hinzufügen, um mich auf die Seite index.HTML zurückzubringen,

95
00:06:50,480 --> 00:06:52,449
die die Homepage ist.

96
00:06:52,449 --> 00:07:00,109
Und hier drinnen werde ich im Namen meines Restaurants hinzufügen.

97
00:07:03,220 --> 00:07:06,890
Lassen Sie uns die Änderungen speichern und gehen und

98
00:07:06,890 --> 00:07:11,110
einen kurzen Blick auf den aktuellen Zustand meiner Navigationsleiste werfen. Wenn Sie

99
00:07:11,110 --> 00:07:13,710
auf die Webseite im Browser gehen,

100
00:07:13,710 --> 00:07:21,150
können Sie nun sehen, wo die Navigationsleiste auf meiner Webseite im Browser sichtbar ist.

101
00:07:21,150 --> 00:07:25,960
Die Navigationsleiste befindet sich jetzt oben auf der Seite und Sie

102
00:07:25,960 --> 00:07:30,490
können sehen, dass, wenn ich meine Seite scrollen,

103
00:07:30,490 --> 00:07:36,745
die Navigationsleiste immer noch an der Spitze bleibt, weil ich zu festen Spitzenklasse verwendet.

104
00:07:36,745 --> 00:07:38,520
Sie können auch

105
00:07:38,520 --> 00:07:45,460
die Navbar-Marke sehen, die mir erlaubt, den Namen des Restaurants dort anzuzeigen.

106
00:07:45,460 --> 00:07:50,310
Später werde ich das durch das Logo für dieses Restaurant ersetzen.

107
00:07:50,310 --> 00:07:56,010
Sie bemerken, dass die Navigationsleiste teilweise im Jumbotron abgedeckt ist.

108
00:07:56,010 --> 00:08:01,395
Sie werden das ein wenig später mit einer CSS-Anpassung beheben.

109
00:08:01,395 --> 00:08:07,255
Das nächste, was ich tun werde, ist, ein paar Links zu meiner Navigationsleiste hinzuzufügen,

110
00:08:07,255 --> 00:08:13,060
so dass diese Links mich zu den anderen Seiten auf meiner Website führen.

111
00:08:13,060 --> 00:08:14,790
Also, wie machen wir das?

112
00:08:14,790 --> 00:08:17,575
Wenn

113
00:08:17,575 --> 00:08:24,490
ich zurück zu index.HTML gehe, werde ich hier eine ul hinzufügen

114
00:08:24,490 --> 00:08:27,715
, in

115
00:08:27,715 --> 00:08:36,460
der ich alle verschiedenen Links deklarieren werde, die in meiner Navigationsbox angezeigt werden.

116
00:08:36,460 --> 00:08:43,590
Also diese ul, auf die ich die Klasse als navbar-nav anwenden werde.

117
00:08:43,590 --> 00:08:46,530
Dies ist also die Klasse, die mir hilft,

118
00:08:46,530 --> 00:08:51,275
den Satz von Links zu definieren, die in meiner Navigationsleiste enthalten werden.

119
00:08:51,275 --> 00:08:56,655
Und diese Links werden horizontal in meiner Navigationsleiste angezeigt.

120
00:08:56,655 --> 00:09:01,660
Die mr-Auto-Klasse, die ich auch auf die ul angewendet habe,

121
00:09:01,660 --> 00:09:05,740
wird verwendet, um den rechten Rand anzugeben.

122
00:09:05,740 --> 00:09:08,590
Dies ist eine Dienstprogrammklasse, die

123
00:09:08,590 --> 00:09:13,815
in Bootstrap verfügbar ist, mit der ich den richtigen Rand angeben kann.

124
00:09:13,815 --> 00:09:17,190
Wenn ich also sage, mr-auto,

125
00:09:17,190 --> 00:09:19,390
was es bedeutet, ist, dass auf der rechten Seite

126
00:09:19,390 --> 00:09:23,100
der rechte Rand so weit wie möglich gesetzt werden sollte.

127
00:09:23,100 --> 00:09:26,380
Das bedeutet, dass der Inhalt so links wie

128
00:09:26,380 --> 00:09:30,175
möglich innerhalb der Navigationsleiste verschoben wird.

129
00:09:30,175 --> 00:09:32,310
Innerhalb dieser ungeordneten Liste

130
00:09:32,310 --> 00:09:34,515
kann ich Listenelemente verwenden, um

131
00:09:34,515 --> 00:09:38,775
die verschiedenen Links aufzunehmen, die Teil meiner Navigationsleiste sein werden.

132
00:09:38,775 --> 00:09:42,595
Also, da drin werde ich ein paar Links hinzufügen

133
00:09:42,595 --> 00:09:48,900
und ich werde anfangen, indem ich den ersten dort mit dem Link spezifiziere.

134
00:09:48,900 --> 00:09:51,830
Zu jedem Listenelement in Ihrer Navigationsleiste

135
00:09:51,830 --> 00:09:56,110
werden Sie die Klasse als Navigationselement anwenden.

136
00:09:56,110 --> 00:10:03,780
Dadurch können diese Listenelemente horizontal als Links in meiner Navigationsleiste angezeigt werden.

137
00:10:03,780 --> 00:10:06,055
Und dann im Inneren

138
00:10:06,055 --> 00:10:10,640
kann ich dann das a-Tag verwenden, um

139
00:10:10,640 --> 00:10:16,140
den tatsächlichen Link hinzuzufügen, der Teil meiner Navigationsleiste sein wird.

140
00:10:16,140 --> 00:10:19,600
Also im Inneren benutze ich das a-Tag mit

141
00:10:19,600 --> 00:10:28,730
der Klasse nav-link und dies erlaubt mir auch, die href zu verwenden.

142
00:10:30,260 --> 00:10:37,145
Attribut, um den Link dort zu definieren.

143
00:10:37,145 --> 00:10:41,255
Und der erste, den ich einschließen werde, ist Zuhause.

144
00:10:41,255 --> 00:10:46,935
Dies würde also ein Element namens Home in dieser Navigationsleiste enthalten.

145
00:10:46,935 --> 00:10:51,900
Lassen Sie mich das einfach kopieren und fügen Sie es dann ein.

146
00:10:51,900 --> 00:10:55,475
Und dann werden wir einige davon bearbeiten, weil ich

147
00:10:55,475 --> 00:11:00,630
vier verschiedene zu meiner Navigationsleiste hinzufügen möchte.

148
00:11:00,630 --> 00:11:02,110
Der erste ist Zuhause.

149
00:11:02,110 --> 00:11:04,170
Der zweite wäre „Über“.

150
00:11:04,170 --> 00:11:13,560
Der dritte wäre Menu, das ich als Teil des nächsten Kurses bauen werde.

151
00:11:13,560 --> 00:11:16,630
Und der letzte wird Kontakt sein.

152
00:11:16,630 --> 00:11:25,495
Eine typische Firmenwebsite würde Links wie diese in ihrer Navigationsleiste haben. Wenn

153
00:11:25,495 --> 00:11:27,830
ich diese beiden hinzufüge,

154
00:11:27,830 --> 00:11:30,915
kann ich jetzt tun,

155
00:11:30,915 --> 00:11:36,560
dass wir einen dieser Links explizit als aktiven Link identifizieren können,

156
00:11:36,560 --> 00:11:39,600
was bedeutet, dass, wenn Sie auf dieser bestimmten Seite sind, dieser

157
00:11:39,600 --> 00:11:42,145
bestimmte Link hervorgehoben werden kann.

158
00:11:42,145 --> 00:11:48,685
Um dies zu tun, werden wir hier die Klasse aktiv genannt auf eines dieser Listenelemente anwenden.

159
00:11:48,685 --> 00:11:51,815
In diesem Fall, da dies die Seite index.html ist,

160
00:11:51,815 --> 00:11:56,085
wende ich die aktive Klasse auf den Home-Link dort an.

161
00:11:56,085 --> 00:12:02,725
Dies vervollständigt meine Navigationsleiste auf der Seite index.HTML ziemlich.

162
00:12:02,725 --> 00:12:08,095
Eine kleine Sache, die ich hier beheben möchte, ist, dass der About Link,

163
00:12:08,095 --> 00:12:12,130
Ich möchte es mit der aboutus.HTML

164
00:12:12,130 --> 00:12:16,965
Seite verknüpfen, die wir bereits in unsere Website aufgenommen haben,

165
00:12:16,965 --> 00:12:19,680
denn das ist, wo ich will, dass es führen.

166
00:12:19,680 --> 00:12:23,795
Werfen wir einen kurzen Blick auf unsere Navigationsleiste dieses Teils. Wenn Sie

167
00:12:23,795 --> 00:12:25,985
auf unsere Navigationsleiste zurückkehren,

168
00:12:25,985 --> 00:12:28,995
können Sie sofort das Ergebnis der Aufnahme

169
00:12:28,995 --> 00:12:32,730
dieser Elemente in die ungeordnete Liste dort sehen.

170
00:12:32,730 --> 00:12:34,160
So sehen Sie die Startseite,

171
00:12:34,160 --> 00:12:36,500
Über, Menü und Kontakt dort,

172
00:12:36,500 --> 00:12:43,145
und jeder von ihnen ist ein Link, aber dies ist ein Navigationselement hier.

173
00:12:43,145 --> 00:12:48,740
Und beachten Sie, wie das Haus hier wegen der Verwendung der aktiven Klasse hervorgehoben wird.

174
00:12:48,740 --> 00:12:50,305
Also, wenn ich auf die Über klicke,

175
00:12:50,305 --> 00:12:52,990
sollte es mich zum About bringen.

176
00:12:52,990 --> 00:12:55,670
Siehe, da sind wir.

177
00:12:55,670 --> 00:12:58,970
Aber ich weiß, dass ich keine Möglichkeit habe, zurück

178
00:12:58,970 --> 00:13:04,190
zu gehen, was bedeutet, dass ich diese Navigationsleiste auch der Seite aboutus.HTML übergeben muss.

179
00:13:04,190 --> 00:13:07,330
Wir werden in kurzer Zeit dorthin kommen. Im

180
00:13:07,330 --> 00:13:11,360
Moment werde ich schnell navigieren mit der Zurück-Taste

181
00:13:11,360 --> 00:13:16,585
meines Browsers zurück zu meiner index.HTML Seite.

182
00:13:16,585 --> 00:13:21,030
Eine Sache, die ich Ihnen auch zeigen wollte, war, wie

183
00:13:21,030 --> 00:13:27,525
diese Navigationsleiste für kleine und extra kleine Bildschirmgrößen zusammenbrechen wird.

184
00:13:27,525 --> 00:13:35,570
Also, lassen Sie uns die Ansicht mit der Responsive Ansicht einschalten,

185
00:13:35,570 --> 00:13:37,960
und dann lassen Sie mich zum Galaxy S5 gehen.

186
00:13:37,960 --> 00:13:43,250
Und ich bemerkte, dass, wenn ich das Galaxy S5 so verwende,

187
00:13:43,250 --> 00:13:50,000
Sie sehen können, dass dies früher angezeigt wird, als es bereits den Bildschirm bedeckt.

188
00:13:50,000 --> 00:13:52,145
Das ist nicht das Verhalten, das ich will.

189
00:13:52,145 --> 00:14:00,075
Ich möchte in der Lage sein, dies zu verstecken, wenn ich dies auf einem kleinen und extra kleinen Bildschirm ansehe.

190
00:14:00,075 --> 00:14:04,220
Und dann füge ich vielleicht eine Schaltfläche hinzu, mit der ich

191
00:14:04,220 --> 00:14:08,450
die Anzeige dieser Links ein- und ausschalten kann.

192
00:14:08,450 --> 00:14:13,170
Sie haben solche Dinge auf mobilen Websites gesehen.

193
00:14:13,170 --> 00:14:16,935
Wie machen wir das in Bootstrap?

194
00:14:16,935 --> 00:14:19,645
Gehen wir als Nächstes zu diesem Schritt.

195
00:14:19,645 --> 00:14:24,300
Zurück zu unserer Navigationsleiste hier.

196
00:14:24,300 --> 00:14:27,910
Lassen Sie mich dort eine Schaltfläche hinzufügen,

197
00:14:27,910 --> 00:14:33,840
die als Umschaltfläche zum Ein- und Ausblenden

198
00:14:33,840 --> 00:14:42,225
meiner Links von meiner Navigationsleiste fungiert, wenn sie auf extra intelligenten und kleinen Bildschirmen angezeigt wird.

199
00:14:42,225 --> 00:14:43,615
Um dort hinzuzufügen,

200
00:14:43,615 --> 00:14:47,645
lassen Sie mich eine Schaltfläche hinzufügen und einige Klassen auf diese Schaltfläche anwenden. In der

201
00:14:47,645 --> 00:14:54,285
nächsten Lektion werden wir mehr über Schaltflächen in Bootstrap besprechen.

202
00:14:54,285 --> 00:14:57,515
Um jedoch eine Schaltfläche in Bootstrap hinzuzufügen,

203
00:14:57,515 --> 00:15:03,770
würden Sie die Klasse für diese bestimmte Schaltfläche als navbar-toggler anwenden.

204
00:15:04,450 --> 00:15:07,420
Also, das ist ein Navbar-Toggler.

205
00:15:07,420 --> 00:15:09,400
Wie der Name schon sagt,

206
00:15:09,400 --> 00:15:14,970
beginnen Sie bereits zu verstehen, was diese Schaltfläche in diesem Fall tun wird.

207
00:15:14,970 --> 00:15:22,650
Und dann würde ich den Typ als Schaltfläche hinzufügen, um anzuzeigen, dass dies als Schaltfläche wirkt.

208
00:15:22,650 --> 00:15:31,360
Und dann Daten umschalten als kollabieren.

209
00:15:31,360 --> 00:15:36,070
Nun ist dieses Daten-Toggle-Attribut, das Sie hier sehen werden, tatsächlich

210
00:15:36,070 --> 00:15:42,400
eine JavaScript-Komponentenverwendung in Bootstrap.

211
00:15:42,400 --> 00:15:48,100
Wir werden diese Daten Bindestriche Bar Art von Attributen mehr im nächsten Modul betrachten,

212
00:15:48,100 --> 00:15:50,875
wo wir Bootstraps JavaScript-Komponenten betrachten.

213
00:15:50,875 --> 00:15:55,225
Die Navigationsleiste erfordert eine dieser JavaScript-Komponenten, um

214
00:15:55,225 --> 00:15:59,980
meine Links in meiner Navigationsleiste ein- und auszuschalten, also,

215
00:15:59,980 --> 00:16:03,825
das ist der Grund, warum ich dieses Konzept hier schnell eingeführt habe,

216
00:16:03,825 --> 00:16:05,800
aber wir werden zurückkommen, um

217
00:16:05,800 --> 00:16:12,020
diese Bootstraps JavaScript-Komponenten mehr im nächsten Modul zu untersuchen.

218
00:16:12,020 --> 00:16:14,420
Also, Daten-Toggle kollabieren und

219
00:16:14,420 --> 00:16:24,610
dann das Datenziel als #Navbar.

220
00:16:24,610 --> 00:16:30,660
Jetzt werde ich ein anderes div mit der ID als navbar einführen.

221
00:16:30,660 --> 00:16:33,470
Also, wenn ich ein Datum oder Ziel #Navbar angebe,

222
00:16:33,470 --> 00:16:38,560
bezieht sich das auf die ID dieses anderen Elements, das

223
00:16:38,560 --> 00:16:44,025
das Ziel dieser speziellen Schaltfläche hier sein wird.

224
00:16:44,025 --> 00:16:47,625
Also, das ist der Teil, den ich unten hinzufüge.

225
00:16:47,625 --> 00:16:52,340
Und auch möchte ich, dass die Schaltfläche hier etwas anzeigt.

226
00:16:52,340 --> 00:16:56,970
Und in der Regel, wenn Sie diese Art von Schaltflächen auf mobilen Websites sehen,

227
00:16:56,970 --> 00:16:59,730
würde es dort freie Linien enthalten

228
00:16:59,730 --> 00:17:04,310
, so dass dies typischerweise als Navbar-Umschaltsymbol bezeichnet wird.

229
00:17:04,310 --> 00:17:11,630
Also, ich werde ein spezielles Symbol hinzufügen, das

230
00:17:11,630 --> 00:17:19,660
in Bootstrap enthalten ist, das Navbar-Toggler-Symbol genannt wird.

231
00:17:19,660 --> 00:17:23,395
Also, wenn ich diese Klasse auf span-Tag anwende,

232
00:17:23,395 --> 00:17:29,050
wird das hier ein Navbar-Toggler-Symbol auf meine Schaltfläche einführen.

233
00:17:29,410 --> 00:17:32,130
Das führt also einen Knopf ein.

234
00:17:32,130 --> 00:17:34,980
Wir werden uns in kurzer Zeit ansehen, wie das aussieht.

235
00:17:34,980 --> 00:17:36,780
Wenn ich nun auf diese Schaltfläche klicke,

236
00:17:36,780 --> 00:17:41,140
möchte ich diese Links ein- und ausblenden können.

237
00:17:41,140 --> 00:17:43,140
Um mir zu ermöglichen, das zu tun,

238
00:17:43,140 --> 00:17:50,780
was ich tun werde, ist, diese ul mit einem div hier zu umgeben.

239
00:17:51,070 --> 00:17:57,585
Also, ich werde reinkommen und ein div um diese ul vorstellen.

240
00:17:57,585 --> 00:17:59,280
Und zu diesem div

241
00:17:59,280 --> 00:18:04,850
werde ich die Klasse als kollabieren

242
00:18:04,850 --> 00:18:15,895
und dann navbar-kollabieren anwenden, und dann gebe ich ihm eine ID als Navbar.

243
00:18:15,895 --> 00:18:20,115
Jetzt sehen Sie die Korrelation zwischen

244
00:18:20,115 --> 00:18:26,300
diesen Klassen und der ID und dem, was ich im Datenumschalter und dem Datenziel deklariert habe.

245
00:18:26,300 --> 00:18:32,750
Also, hier das Datenziel, das ich als #Navbar angebe, und so ist die ID, die diesem div gegeben wird, navbar.

246
00:18:32,750 --> 00:18:35,640
Und ich gebe den Datenumschalter als kollabieren an.

247
00:18:35,640 --> 00:18:40,440
Collapse ist eine der Bootstraps JavaScript-Komponenten,

248
00:18:40,440 --> 00:18:43,955
die wir im nächsten Modul genauer betrachten werden. Wenn Sie

249
00:18:43,955 --> 00:18:50,780
dies also in das div für kleine und extra kleine Bildschirme einschließen,

250
00:18:50,780 --> 00:18:54,860
wäre dies standardmäßig ausgeblendet,

251
00:18:54,860 --> 00:18:56,520
aber wenn ich auf die Schaltfläche klicke,

252
00:18:56,520 --> 00:19:01,445
wird der Inhalt dieses div auf dem Bildschirm offenbart.

253
00:19:01,445 --> 00:19:09,540
Lassen Sie mich auch eine mr-auto zu der a-klasse navarbar-marke dort hinzufügen, so dass

254
00:19:09,540 --> 00:19:18,775
ich automatisch eine ausreichende rechte marge zu dieser navbar-marke.

255
00:19:18,775 --> 00:19:22,495
Jetzt gehen wir und schauen uns das in unserem Browser an. Wenn Sie

256
00:19:22,495 --> 00:19:25,270
zum Browser gehen, können Sie jetzt sehen, wie

257
00:19:25,270 --> 00:19:31,370
meine Navbar auf kleinen und extra kleinen Bildschirmgrößen zusammengeklappt ist.

258
00:19:31,370 --> 00:19:35,925
Und beachte diesen Knopf auf der linken Seite.

259
00:19:35,925 --> 00:19:38,005
Wenn ich auf die Schaltfläche klicke,

260
00:19:38,005 --> 00:19:43,805
werden die Links in meiner Navigationsleiste angezeigt und ausgeblendet.

261
00:19:43,805 --> 00:19:51,360
Dies ist das Verhalten, das ich für die responsive Implementierung meiner Navigationsleiste möchte.

262
00:19:51,360 --> 00:19:55,375
Wenn ich zu einem normalen,

263
00:19:55,375 --> 00:20:00,925
größeren Bildschirm gehe, wird die Navigationsleiste einschließlich der Links vollständig angezeigt.

264
00:20:00,925 --> 00:20:07,190
Aber wenn ich das Gleiche auf einem kleineren Bildschirm wie diesem ansehe,

265
00:20:07,190 --> 00:20:10,430
werden die Navigationsleistenlinks hinter

266
00:20:10,430 --> 00:20:15,020
dieser Schaltfläche ausgeblendet und dann durch Klicken auf diese Schaltfläche ein- und ausgeschaltet.

267
00:20:15,020 --> 00:20:18,190
Das ist also das ansprechende Verhalten, das Sie

268
00:20:18,190 --> 00:20:22,870
in Ihre Navigationsleiste auf Ihrer Website einbauen können. Nachdem

269
00:20:22,870 --> 00:20:27,285
wir nun die Navigationsleiste auf meiner Seite index.HTML abgeschlossen haben,

270
00:20:27,285 --> 00:20:32,015
möchte ich in der Lage sein, die gleiche Navigationsleiste auf der Seite aboutus.HTML einzuführen.

271
00:20:32,015 --> 00:20:35,540
Bevor wir da sind, gehen wir hier zur Fußzeile.

272
00:20:35,540 --> 00:20:38,250
Und dann bemerken Sie, dass

273
00:20:38,250 --> 00:20:39,870
wir in der Fußzeile diese Links haben.

274
00:20:39,870 --> 00:20:43,265
Ich möchte in der Lage sein, diesen Link auch zu aktualisieren, um auf

275
00:20:43,265 --> 00:20:48,450
aboutus.HTML zu verweisen, so dass

276
00:20:48,450 --> 00:20:51,090
ich selbst durch Klicken auf den Link in meiner Fußzeile immer noch zur Über Seite gehen würde.

277
00:20:51,090 --> 00:20:53,780
Nun, ich gehe wieder hier hoch,

278
00:20:53,780 --> 00:21:02,320
was ich tun werde, ist, einfach diesen Code dieser Navigationsleiste von hier zu kopieren.

279
00:21:02,870 --> 00:21:13,520
Und dann gehen Sie zur Seite aboutus.HTML und fügen Sie diese dann in meine aboutus.HTML Seite ein.

280
00:21:13,520 --> 00:21:17,145
Nicht nur das, ich muss etwas daran anpassen,

281
00:21:17,145 --> 00:21:20,750
weil dies jetzt auf der Seite aboutus.HTML ist.

282
00:21:20,750 --> 00:21:25,105
Offensichtlich gibt es ein paar Dinge, die ich aktualisieren muss. In

283
00:21:25,105 --> 00:21:29,875
erster Linie sollte diese navbar-Marke, die mich zurück

284
00:21:29,875 --> 00:21:35,485
zu meiner Homepage führen sollte, jetzt als index.HTML hier aktualisiert werden.

285
00:21:35,485 --> 00:21:43,045
Und dann, das Listenelement hier jetzt das zweite die Homepage wieder,

286
00:21:43,045 --> 00:21:51,165
ich möchte das auf index.HTML aktualisieren und dann den zweiten Link zum Über,

287
00:21:51,165 --> 00:21:53,610
weil dies die Seite aboutus.HTML ist,

288
00:21:53,610 --> 00:21:58,480
werde ich es zurück zu diesem Hash setzen und dann werde ich

289
00:21:58,480 --> 00:22:06,045
die aktive Klasse von der ersten entfernen Element und wenden Sie dann die aktive Klasse auf das zweite Element an,

290
00:22:06,045 --> 00:22:11,520
da dies die Info Seite ist und daher diejenige sein sollte, die hervorgehoben wird.

291
00:22:11,520 --> 00:22:16,705
Gehen Sie wieder in die Fußzeile der About Page.

292
00:22:16,705 --> 00:22:22,870
In der Fußzeile werde ich die gleichen Updates für die Links hier durchführen, so dass

293
00:22:22,870 --> 00:22:29,525
die Homepage mich zurück zu index.HTML führen sollte und dann die Änderungen speichern lassen.

294
00:22:29,525 --> 00:22:34,740
Also jetzt wird meine About Page auch korrekt aktualisiert. Wenn Sie

295
00:22:34,740 --> 00:22:36,390
zum Browser gehen,

296
00:22:36,390 --> 00:22:41,220
können Sie jetzt sehen, dass ich auf meiner Homepage bin und wenn ich dann auf die Info Seite klicke,

297
00:22:41,220 --> 00:22:42,795
gehe ich zur About Page.

298
00:22:42,795 --> 00:22:48,710
Beachten Sie, wie die gleiche Navigationsleiste in Info Page angezeigt wird.

299
00:22:48,710 --> 00:22:51,090
Sie müssen also hervorgehoben werden, weil ich

300
00:22:51,090 --> 00:22:53,660
die aktive Klasse darauf angewendet habe und dann

301
00:22:53,660 --> 00:22:58,770
zu meiner Homepage zurückkehren kann, indem Sie entweder auf die narvar-Marke oder auf die Startseite klicken.

302
00:22:58,770 --> 00:23:02,115
Also lasst uns auf die narvar-Marke klicken und wir sind wieder in unserer

303
00:23:02,115 --> 00:23:06,210
Haupt- oder Homepage oder index.HTML.

304
00:23:06,210 --> 00:23:13,180
Also, jetzt ist die Navigation korrekt sowohl auf der Startseite als auch auf der Info Seite eingerichtet.

305
00:23:13,180 --> 00:23:17,810
Ein paar zusätzliche Dinge, die ich tun werde, ist anzuwenden, wenn Sie sehen, dass

306
00:23:17,810 --> 00:23:23,480
es Klasse ist, dass ich die Farbe meiner navbar ändern kann,

307
00:23:23,480 --> 00:23:26,340
und ich möchte auch

308
00:23:26,340 --> 00:23:32,595
eine Breadcrumb zu dieser About Page hinzufügen und so dass die Brotkrume mir auch eine andere Möglichkeit gibt,

309
00:23:32,595 --> 00:23:36,950
zurück zu meiner Startseite zu navigieren und auch geben Sie

310
00:23:36,950 --> 00:23:42,170
die Hierarchie auf meiner Website an, wo ich mich gerade befinde.

311
00:23:42,170 --> 00:23:45,505
Also lasst uns diese beiden Schritte als nächstes machen.

312
00:23:45,505 --> 00:23:49,835
Gehen Sie zurück zu diesem Editor in styles.css.

313
00:23:49,835 --> 00:23:52,765
Ich werde hier ein paar weitere Klassen hinzufügen.

314
00:23:52,765 --> 00:23:58,030
Du bemerkst, dass meine Navbar einen Teil des Jumbotron versteckt hat.

315
00:23:58,030 --> 00:23:59,590
Um das zu vermeiden,

316
00:23:59,590 --> 00:24:01,705
was ich tun werde, ist mein Körper,

317
00:24:01,705 --> 00:24:06,110
ich werde eine Polsterung von 50 Pixeln

318
00:24:06,110 --> 00:24:11,505
oben geben, so dass diese 50 Pixel für die Navigationsleiste abgedeckt werden.

319
00:24:11,505 --> 00:24:14,580
Wann immer Sie eine feste obere Navigationsleiste verwenden, ist es

320
00:24:14,580 --> 00:24:17,580
eine gute Idee, diese Auffüllung dem Hauptteil

321
00:24:17,580 --> 00:24:20,270
Ihrer Webseite zu geben, damit die Navigation nicht

322
00:24:20,270 --> 00:24:24,435
das oberste Element im Hauptteil Ihrer Webseite abdeckt.

323
00:24:24,435 --> 00:24:29,675
Also, die restlichen werde ich als

324
00:24:29,675 --> 00:24:39,155
Null Pixel und auch den Z-Index für meinen Körper als Null verlassen.

325
00:24:39,155 --> 00:24:43,485
Von Ihrem Wissen über CSS verstehen Sie, was der Z-Index tut

326
00:24:43,485 --> 00:24:48,865
und der nächste, den ich tun werde, ist, dass ich

327
00:24:48,865 --> 00:24:55,580
navbar-Dark-Klasse überlasten werde, indem ich eine weitere Farbe für

328
00:24:55,580 --> 00:24:59,750
die navbar-Klasse hinzufüge und die Farbe, die ich

329
00:24:59,750 --> 00:25:06,490
wählen werde, ist 512DA8.

330
00:25:06,490 --> 00:25:15,275
Dies ist eine dunkelviolette Farbe, die sehr gut auf meiner Website aussieht.

331
00:25:15,275 --> 00:25:21,505
Tatsächlich, Wenn Sie Interesse haben, wo ich diese Farben gefunden habe, können Sie

332
00:25:21,505 --> 00:25:29,665
www.android.com besuchen und dann ihre Dokumentation für das Materialdesign nachschlagen und dort,

333
00:25:29,665 --> 00:25:33,325
sie haben Vorschläge, wie Farben

334
00:25:33,325 --> 00:25:38,965
in Ihrer Android-Anwendung verwendet werden können, aber das gleiche gilt auch für eine Website,

335
00:25:38,965 --> 00:25:46,675
so dass wo ich ging und diese Farben ausgewählt, um in meiner Website verwendet werden.

336
00:25:46,675 --> 00:25:51,060
Also, wenn ich das tue,

337
00:25:51,060 --> 00:25:55,740
muss ich jetzt zu meiner index.HTML Seite zurückkehren und

338
00:25:55,740 --> 00:26:01,095
dann von der Navbar sollte ich diese bg-primary entfernen.

339
00:26:01,095 --> 00:26:09,320
Andernfalls wird die Farbe, die ich im CSS vorgeschlagen habe, nicht darauf angewendet.

340
00:26:09,320 --> 00:26:14,185
Wechseln Sie in ähnlicher Weise zur Seite aboutus.HTML und scrollen Sie

341
00:26:14,185 --> 00:26:20,850
dann zur Navigationsleiste und entfernen Sie dann auch die bg-primary.

342
00:26:21,610 --> 00:26:26,580
Nun, während ich auf der Seite aboutus.HTML bin,

343
00:26:26,580 --> 00:26:34,080
lassen Sie mich eine Breadcrumb in meinen Container einführen,

344
00:26:34,080 --> 00:26:36,310
die erste Zeile meines Containers dort.

345
00:26:36,310 --> 00:26:39,405
Das ist also, wo die Über uns Titel war

346
00:26:39,405 --> 00:26:45,120
da, also werde ich gehen und ein ol einführen.

347
00:26:45,260 --> 00:26:53,560
Ich benutze nur das ol -Tag als eine Möglichkeit, die Brotkrume einzuführen.

348
00:26:53,560 --> 00:26:59,025
Sie können sogar ein div dafür verwenden und es wird immer noch gut funktionieren.

349
00:26:59,025 --> 00:27:06,050
Es kommt einfach so vor, dass das Beispiel in der Bootstraps-Dokumentation ein ol verwendet hat, also

350
00:27:06,050 --> 00:27:14,030
bleibe ich daran, dass selbst ein einfaches div hier auch gut funktionieren wird.

351
00:27:14,030 --> 00:27:20,895
Also, ich sage ol Klasse col-12 Brotkrumen.

352
00:27:20,895 --> 00:27:23,200
Also wurden die Breadcrumb-Klassen angewendet und

353
00:27:23,200 --> 00:27:26,825
nicht die col-12 Bedeutung, die den gesamten Bildschirm gestreckt hat.

354
00:27:26,825 --> 00:27:33,500
Und da drinnen gehe ich rein und füge zwei Listenelemente hinzu.

355
00:27:34,250 --> 00:27:39,625
Jetzt sehen Sie, warum die Verwendung von ol hier nützlich ist,

356
00:27:39,625 --> 00:27:48,565
weil ich die Listenelemente verwenden kann, um das Breadcrumb-Element zu beschreiben.

357
00:27:48,565 --> 00:27:50,725
Also, Breadcrumb Element hier,

358
00:27:50,725 --> 00:27:55,020
also füge ich ein Breadcrumb-Element

359
00:27:55,020 --> 00:28:02,380
ein und dann werde ich dort das A-Tag verwenden, um einen Link zurück zu meiner Homepage zu definieren.

360
00:28:02,380 --> 00:28:07,275
Also sage ich, „A“ und dann zu diesem A,

361
00:28:07,275 --> 00:28:12,010
gebe ich die href als index.HTML und

362
00:28:12,010 --> 00:28:17,815
füge das dann in meine erste Brotkrume

363
00:28:17,815 --> 00:28:25,660
ein und danach ist die nächste, die ich einschließen werde, ein anderes Listenelement und

364
00:28:25,660 --> 00:28:34,700
das zweite Listenelement, das ich die Klasse als Breadcrumb Element und aktiv anwenden werde.

365
00:28:34,700 --> 00:28:40,900
Beachten Sie also die Verwendung der aktiven Klasse hier und dann drinnen werde ich sagen „Über

366
00:28:40,900 --> 00:28:45,090
uns“ Ich brauche keinen Link hier, weil ich bereits auf der Seite bin

367
00:28:45,090 --> 00:28:49,425
, so dass das nicht für diesen Listeneintrag aufgenommen werden muss.

368
00:28:49,425 --> 00:28:51,010
Speichern wir die Änderungen,

369
00:28:51,010 --> 00:28:54,910
damit Sie sehen können, wie der Breadcrumb in dieser

370
00:28:54,910 --> 00:28:59,555
speziellen Über uns Seite eingeführt wurde.

371
00:28:59,555 --> 00:29:04,410
Werfen wir einen Blick auf die resultierende Webseite. Wenn Sie

372
00:29:04,410 --> 00:29:11,320
auf meine Webseite gehen, können Sie jetzt sehen, dass die Farbe der Navbar

373
00:29:11,320 --> 00:29:14,310
jetzt in das dunkle Lila geändert wurde, die

374
00:29:14,310 --> 00:29:17,900
durch das CSS eingeführt werden und das sieht auf dem Bildschirm hier schön aus.

375
00:29:17,900 --> 00:29:20,780
Dark Purple, gefolgt von einem helleren lila und dann

376
00:29:20,780 --> 00:29:24,300
unten noch heller lila für meine Fußzeile.

377
00:29:24,300 --> 00:29:27,240
Nun, ich bin kein Designer,

378
00:29:27,240 --> 00:29:33,875
aber das ist das Beste, was ich in Bezug auf das Hinzufügen von Websites finden könnte.

379
00:29:33,875 --> 00:29:38,660
Wie Sie aus der Geschichte wissen, sind Männer farbblind.

380
00:29:38,660 --> 00:29:42,750
So haben wir einen sehr schlechten Geschmack in Farben.

381
00:29:42,750 --> 00:29:48,065
Wenn du verheiratet bist, wird deine Frau dich definitiv daran erinnern.

382
00:29:48,065 --> 00:29:52,680
Gehen wir auf die About Page und sehen, wie es aussieht.

383
00:29:52,680 --> 00:29:55,960
Dies ist also die About Page und auf der Info Seite können Sie

384
00:29:55,960 --> 00:29:59,520
die Navbar mit der richtigen Farbe

385
00:29:59,520 --> 00:30:06,925
dort sehen und die Breadcrumb in der Über uns hier unten beachten.

386
00:30:06,925 --> 00:30:10,910
So können Sie die Startseite sehen, die Sie zurück auf die Index-Seite und

387
00:30:10,910 --> 00:30:15,020
dann Über uns führt, wie Sie gesehen haben, haben wir aktiven Link,

388
00:30:15,020 --> 00:30:16,655
aktive Klasse auf diese angewendet.

389
00:30:16,655 --> 00:30:19,500
Das ist also, wie die Über uns angezeigt wird und die Homepage.

390
00:30:19,500 --> 00:30:23,770
Dies ist also der Standard-Breadcrumb-Stil, der

391
00:30:23,770 --> 00:30:29,450
in Bootstrap verwendet wird, und wenn ich auf die Startseite klicke, gehe ich zurück zu meiner Startseite.

392
00:30:29,450 --> 00:30:35,585
Damit schließen wir diese Übung auf Navbar und Paniermehl ab.

393
00:30:35,585 --> 00:30:42,640
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht „navbar und breadcumbs“ zu machen.