1
00:00:03,650 --> 00:00:11,190
Abbiamo appena completato una discussione sull'importanza di fornire la navigazione nel tuo sito web.

2
00:00:11,190 --> 00:00:15,920
Abbiamo anche esaminato diversi modi in cui possiamo fornire la navigazione in un sito web.

3
00:00:15,920 --> 00:00:21,229
Ora è il momento per noi di guardare il bootstrap e esaminare i componenti

4
00:00:21,229 --> 00:00:26,269
che bootstrap fornisce che ci permettono di aggiungere la navigazione ai nostri siti web.

5
00:00:26,269 --> 00:00:32,815
Due componenti importanti di bootstrap sono Navbar e Breadcrumbs.

6
00:00:32,815 --> 00:00:37,610
Esamineremo entrambi in questo esercizio.

7
00:00:37,610 --> 00:00:44,745
Iniziamo aggiungendo una barra di navigazione nella parte superiore della nostra pagina web.

8
00:00:44,745 --> 00:00:50,065
Possiamo farlo usando il componente Navbar che fa parte di bootstrap.

9
00:00:50,065 --> 00:00:51,605
Allora, come iniziamo?

10
00:00:51,605 --> 00:00:56,260
Andiamo al corpo della nostra pagina HTML.

11
00:00:56,260 --> 00:00:58,760
Quindi qui, ho index.HTML aperto.

12
00:00:58,760 --> 00:01:00,495
E in alto,

13
00:01:00,495 --> 00:01:06,090
ho intenzione di aggiungere un elemento usando quel tag HTML nav.

14
00:01:06,090 --> 00:01:10,330
Ora il tag HTML di nav è destinato a fornire la navigazione.

15
00:01:10,330 --> 00:01:17,880
Quindi, prendiamo il vantaggio di questo tag e costruiamo la nostra barra di navigazione usando il tag nav.

16
00:01:17,880 --> 00:01:19,645
Quindi ora, in alto,

17
00:01:19,645 --> 00:01:22,055
ho intenzione di aggiungere questo tag,

18
00:01:22,055 --> 00:01:30,040
mettere il nav e costruire la barra di navigazione attorno a questo tag di navigazione.

19
00:01:30,040 --> 00:01:33,910
Quindi, una volta aggiunto questo tag nav in index.HTML,

20
00:01:33,910 --> 00:01:39,590
allora possiamo andare avanti e quindi applicare le classi bootstraps a questo tag nav.

21
00:01:39,590 --> 00:01:42,700
Quindi, applico la barra di navigazione della classe.

22
00:01:42,700 --> 00:01:47,485
Quindi, la classe navbar in bootstrap mi consente di creare una barra di navigazione.

23
00:01:47,485 --> 00:01:50,730
Ci sono molti modi diversi di personalizzare la barra di navigazione,

24
00:01:50,730 --> 00:01:56,600
che diamo un'occhiata come classi aggiuntive che aggiungeranno a questo tag di navigazione.

25
00:01:56,600 --> 00:01:58,770
Insieme alla barra di navigazione,

26
00:01:58,770 --> 00:02:02,880
aggiungiamo anche la classe successiva che è navbar-dark.

27
00:02:02,880 --> 00:02:08,480
Ora voglio che la mia barra di navigazione sia di colore scuro,

28
00:02:08,480 --> 00:02:09,985
con uno sfondo più scuro.

29
00:02:09,985 --> 00:02:13,920
Perché questo va molto bene con il sito web che ho appena progettato.

30
00:02:13,920 --> 00:02:16,150
Possiamo avere navbar-luce,

31
00:02:16,150 --> 00:02:18,950
che è una barra di navigazione di colore più chiaro.

32
00:02:18,950 --> 00:02:23,775
Quindi, puoi scegliere di utilizzare uno di essi nella tua pagina web.

33
00:02:23,775 --> 00:02:32,620
La prossima classe che userò è la classe navbar-expand-sm.

34
00:02:32,620 --> 00:02:36,870
Ora, e anche, specificherò la dimensione dello schermo sotto

35
00:02:36,870 --> 00:02:42,064
la quale entra in esistenza il comportamento commutabile.

36
00:02:42,064 --> 00:02:45,165
Ora, quando dico navbar-expand-sm,

37
00:02:45,165 --> 00:02:48,480
ciò significa che per schermi piccoli ed extra piccoli,

38
00:02:48,480 --> 00:02:51,370
questa barra di navigazione diventerà una barra di navigazione attivabile.

39
00:02:51,370 --> 00:02:57,080
Significato che, sarà compresso in quelle dimensioni dello schermo.

40
00:02:57,080 --> 00:03:00,520
Imparerai presto come funziona,

41
00:03:00,520 --> 00:03:02,930
quando guarderemo a come possiamo aggiungere

42
00:03:02,930 --> 00:03:07,460
il plugin di compressione alla barra di navigazione per abilitare quel tipo di comportamento.

43
00:03:07,460 --> 00:03:10,970
Quindi, insieme a uno sm attivabile della barra di navigazione,

44
00:03:10,970 --> 00:03:15,240
applicherò inizialmente un colore di sfondo alla barra di navigazione,

45
00:03:15,240 --> 00:03:18,570
che sarebbe bg-primario.

46
00:03:18,570 --> 00:03:25,909
Ora bg-primary è quel colore primario definito nel tuo bootstrap.

47
00:03:25,909 --> 00:03:33,350
Per impostazione predefinita, questa è una versione di colore blu che viene utilizzata dai bootstraps.

48
00:03:33,350 --> 00:03:35,910
Quindi inizierò con quello come il mio colore primario.

49
00:03:35,910 --> 00:03:42,350
Più tardi, personalizzerò il colore della mia barra di navigazione usando alcune classi CSS.

50
00:03:42,350 --> 00:03:45,155
Inoltre, applicherò anche

51
00:03:45,155 --> 00:03:50,255
un'altra classe chiamata fixed-top a quella barra di navigazione.

52
00:03:50,255 --> 00:03:55,210
Ciò che fixed-top fa, è che corregge la barra di navigazione nella parte superiore

53
00:03:55,210 --> 00:04:00,330
della finestra del browser in cui viene visualizzata questa pagina web.

54
00:04:00,330 --> 00:04:03,830
Anche quando si scorre la pagina bagnata,

55
00:04:03,830 --> 00:04:07,870
la barra di navigazione era fino a rimanere nella parte superiore della pagina.

56
00:04:07,870 --> 00:04:12,250
Puoi semplicemente usare il fondo fisso per fissare

57
00:04:12,250 --> 00:04:18,235
la barra di navigazione nella parte inferiore della finestra del browser o puoi dire, in alto statico.

58
00:04:18,235 --> 00:04:21,810
E inoltre, non puoi usare questa classe.

59
00:04:21,810 --> 00:04:23,140
Se non lo usi, la

60
00:04:23,140 --> 00:04:29,325
barra di navigazione scorrerà anche quando la tua pagina web viene spostata verso l'alto.

61
00:04:29,325 --> 00:04:36,670
Nel mio sito Web, scelgo di mantenere la barra di navigazione fissa nella parte superiore della pagina.

62
00:04:36,670 --> 00:04:38,600
Ci sono molte altre opzioni che sono

63
00:04:38,600 --> 00:04:43,920
disponibili che si possono trovare nella documentazione bootstraps.

64
00:04:43,920 --> 00:04:48,495
Quindi questo è un esempio dell'uso della barra di navigazione.

65
00:04:48,495 --> 00:04:51,645
Ora inoltre, all'interno della barra di navigazione,

66
00:04:51,645 --> 00:04:54,545
racchiuderò qualsiasi contenuto

67
00:04:54,545 --> 00:04:57,450
verrà utilizzato nella barra di navigazione all'interno di un contenitore.

68
00:04:57,450 --> 00:05:02,880
Quindi questo è dove userò un elemento div qui

69
00:05:02,880 --> 00:05:10,125
e applicherò la classe contenitore a questo elemento div.

70
00:05:10,125 --> 00:05:12,520
Quindi, qualunque cosa sia racchiusa dentro,

71
00:05:12,520 --> 00:05:17,375
sarà limitata alla stessa larghezza del resto della mia pagina Web.

72
00:05:17,375 --> 00:05:20,575
Come ricorderai, ho usato la classe contenitore per

73
00:05:20,575 --> 00:05:24,870
definire l'ampiezza del contenuto nella mia pagina web,

74
00:05:24,870 --> 00:05:28,080
quindi applicherò lo stesso anche alla mia barra di navigazione, in

75
00:05:28,080 --> 00:05:31,490
modo che le informazioni della barra di navigazione vengano

76
00:05:31,490 --> 00:05:36,185
visualizzate nella stessa larghezza del resto della mia pagina web.

77
00:05:36,185 --> 00:05:41,225
È possibile scegliere di non utilizzare la classe contenitore nella barra di navigazione, nel qual caso,

78
00:05:41,225 --> 00:05:47,200
il contenuto della barra di navigazione si diffonderà su tutta la larghezza dello schermo.

79
00:05:47,200 --> 00:05:49,055
All' interno della barra di navigazione,

80
00:05:49,055 --> 00:05:54,280
ho intenzione di aggiungere una classe a un tag qui.

81
00:05:54,280 --> 00:06:02,390
Questa classe che chiamo come navbar-brand,

82
00:06:02,520 --> 00:06:09,170
mi consente di visualizzare alcune informazioni come informazioni di branding nella mia barra di navigazione.

83
00:06:09,170 --> 00:06:11,110
Quindi, se hai una società, ad esempio,

84
00:06:11,110 --> 00:06:13,050
puoi visualizzare il nome della tua azienda o

85
00:06:13,050 --> 00:06:16,040
il logo della tua azienda utilizzando il marchio navbar in

86
00:06:16,040 --> 00:06:21,390
modo che venga visualizzato in modo visibile nella barra di navigazione.

87
00:06:21,390 --> 00:06:23,370
Ovviamente, quando visiti molti siti web,

88
00:06:23,370 --> 00:06:26,400
vedrai che il nome della società è da qualche parte visibile

89
00:06:26,400 --> 00:06:30,310
nella barra di navigazione di quel sito web.

90
00:06:30,310 --> 00:06:33,085
Quindi, lasciami aggiungere quel marchio navbar.

91
00:06:33,085 --> 00:06:42,190
Questo può anche essere collegato alla home page del tuo sito web.

92
00:06:42,190 --> 00:06:43,895
Quindi, lo lascio li'.

93
00:06:43,895 --> 00:06:46,000
Nelle pagine rimanenti del mio sito web,

94
00:06:46,000 --> 00:06:50,480
aggiungerò semplicemente l'href per riportarmi alla pagina index.HTML,

95
00:06:50,480 --> 00:06:52,449
che è la homepage.

96
00:06:52,449 --> 00:07:00,109
E qui dentro aggiungo il nome del mio ristorante.

97
00:07:03,220 --> 00:07:06,890
Salviamo le modifiche e andiamo a dare

98
00:07:06,890 --> 00:07:11,110
un'occhiata veloce allo stato attuale della mia barra di navigazione.

99
00:07:11,110 --> 00:07:13,710
Andando alla pagina web nel browser, è

100
00:07:13,710 --> 00:07:21,150
ora possibile vedere dove la barra di navigazione è visibile sulla mia pagina web nel browser.

101
00:07:21,150 --> 00:07:25,960
La barra di navigazione è ora nella parte superiore della pagina e

102
00:07:25,960 --> 00:07:30,490
puoi vedere che mentre scorro la mia pagina,

103
00:07:30,490 --> 00:07:36,745
la barra di navigazione rimane ancora in alto perché ero abituato alla classe superiore fissa.

104
00:07:36,745 --> 00:07:38,520
Puoi anche vedere

105
00:07:38,520 --> 00:07:45,460
il marchio navbar-che mi permette di mostrare il nome del ristorante lì.

106
00:07:45,460 --> 00:07:50,310
Più tardi lo sostituirò con il logo di questo ristorante.

107
00:07:50,310 --> 00:07:56,010
Si nota che la barra di navigazione è parzialmente coperta nel Jumbotron.

108
00:07:56,010 --> 00:08:01,395
Lo risolverai un po 'più tardi usando alcune personalizzazioni CSS.

109
00:08:01,395 --> 00:08:07,255
La prossima cosa che ho intenzione di fare è aggiungere alcuni collegamenti alla mia barra di navigazione, in

110
00:08:07,255 --> 00:08:13,060
modo che questi collegamenti mi condurranno alle altre pagine del mio sito web.

111
00:08:13,060 --> 00:08:14,790
Allora, come facciamo?

112
00:08:14,790 --> 00:08:17,575
Tornando a index.HTML,

113
00:08:17,575 --> 00:08:24,490
ho intenzione di aggiungere un ul qui,

114
00:08:24,490 --> 00:08:27,715
all'interno del quale ho intenzione di dichiarare

115
00:08:27,715 --> 00:08:36,460
tutti i vari collegamenti che verranno visualizzati nella mia casella di navigazione.

116
00:08:36,460 --> 00:08:43,590
Quindi questo ul a cui applicherò la classe come navbar-nav.

117
00:08:43,590 --> 00:08:46,530
Quindi questa è la classe che mi aiuterà a definire

118
00:08:46,530 --> 00:08:51,275
l'insieme di collegamenti che verranno inclusi nella mia barra di navigazione.

119
00:08:51,275 --> 00:08:56,655
E questi collegamenti verranno visualizzati orizzontalmente all'interno della mia barra di navigazione.

120
00:08:56,655 --> 00:09:01,660
La mr auto-class che ho applicato anche all'ul,

121
00:09:01,660 --> 00:09:05,740
viene utilizzata per specificare il margine destro.

122
00:09:05,740 --> 00:09:08,590
Quindi questa è una classe di utilità disponibile

123
00:09:08,590 --> 00:09:13,815
in bootstrap che mi consente di specificare il margine destro.

124
00:09:13,815 --> 00:09:17,190
Quindi, se dico, mr-auto,

125
00:09:17,190 --> 00:09:19,390
ciò che significa è che sul lato destro,

126
00:09:19,390 --> 00:09:23,100
il margine destro dovrebbe essere impostato il più possibile.

127
00:09:23,100 --> 00:09:26,380
Quindi il che significa che il contenuto verrà spinto il più a sinistra

128
00:09:26,380 --> 00:09:30,175
possibile all'interno della barra di navigazione.

129
00:09:30,175 --> 00:09:32,310
All' interno di questo elenco non ordinato,

130
00:09:32,310 --> 00:09:34,515
posso usare gli elementi

131
00:09:34,515 --> 00:09:38,775
della lista per includere i vari collegamenti che faranno parte della mia barra di navigazione.

132
00:09:38,775 --> 00:09:42,595
Quindi lì dentro, ho intenzione di aggiungere alcuni link lì

133
00:09:42,595 --> 00:09:48,900
e inizierò specificando il primo lì con il link.

134
00:09:48,900 --> 00:09:51,830
A ogni voce della lista nella barra di navigazione,

135
00:09:51,830 --> 00:09:56,110
applicherai la classe come elemento di navigazione.

136
00:09:56,110 --> 00:10:03,780
Ciò consente di visualizzare orizzontalmente queste voci di elenco come collegamenti nella mia barra di navigazione.

137
00:10:03,780 --> 00:10:06,055
E poi qui dentro,

138
00:10:06,055 --> 00:10:10,640
posso quindi usare il tag a per aggiungere

139
00:10:10,640 --> 00:10:16,140
il link effettivo che farà parte della mia barra di navigazione.

140
00:10:16,140 --> 00:10:19,600
Quindi dentro uso il tag a con

141
00:10:19,600 --> 00:10:28,730
la classe nav-link e questo mi permette anche di usare l'href.

142
00:10:30,260 --> 00:10:37,145
Attributo per definire il collegamento lì.

143
00:10:37,145 --> 00:10:41,255
E il primo che includerò è Home.

144
00:10:41,255 --> 00:10:46,935
Quindi, questo includerebbe un elemento chiamato Home in questa barra di navigazione.

145
00:10:46,935 --> 00:10:51,900
Lasciami copiare e poi incollarlo.

146
00:10:51,900 --> 00:10:55,475
E poi modificheremo alcuni di questi perché voglio

147
00:10:55,475 --> 00:11:00,630
aggiungerne quattro diversi alla mia barra di navigazione.

148
00:11:00,630 --> 00:11:02,110
Il primo è Home.

149
00:11:02,110 --> 00:11:04,170
Il secondo sarebbe About.

150
00:11:04,170 --> 00:11:13,560
Il terzo sarebbe Menu che ho intenzione di costruire come parte del prossimo corso.

151
00:11:13,560 --> 00:11:16,630
E l'ultimo sarà Contatto.

152
00:11:16,630 --> 00:11:25,495
Un tipico sito web aziendale avrebbe collegamenti come questo nella sua barra di navigazione.

153
00:11:25,495 --> 00:11:27,830
Quindi con l'aggiunta di questi due,

154
00:11:27,830 --> 00:11:30,915
ora quello che posso fare è

155
00:11:30,915 --> 00:11:36,560
che possiamo identificare esplicitamente uno di questi link come il link attivo, il

156
00:11:36,560 --> 00:11:39,600
che significa che quando sei su quella particolare pagina,

157
00:11:39,600 --> 00:11:42,145
quel particolare link può essere evidenziato.

158
00:11:42,145 --> 00:11:48,685
Quindi, per farlo, applicheremo qui la classe chiamata attiva a una di queste voci di elenco.

159
00:11:48,685 --> 00:11:51,815
In questo caso, poiché questa è la pagina index.html,

160
00:11:51,815 --> 00:11:56,085
sto applicando la classe attiva al link home lì.

161
00:11:56,085 --> 00:12:02,725
Questo praticamente completa la mia barra di navigazione nella pagina index.HTML.

162
00:12:02,725 --> 00:12:08,095
Una piccola cosa che vorrei risolvere qui è che il link Informazioni,

163
00:12:08,095 --> 00:12:12,130
voglio collegarlo alla

164
00:12:12,130 --> 00:12:16,965
pagina aboutus.HTML che abbiamo già incluso nel nostro sito web,

165
00:12:16,965 --> 00:12:19,680
perché è lì che voglio che conduca.

166
00:12:19,680 --> 00:12:23,795
Andiamo a dare un'occhiata veloce alla nostra barra di navigazione di questa parte.

167
00:12:23,795 --> 00:12:25,985
Tornando alla nostra barra di navigazione,

168
00:12:25,985 --> 00:12:28,995
è possibile vedere immediatamente il risultato di includere

169
00:12:28,995 --> 00:12:32,730
tali elementi nella lista non ordinata lì.

170
00:12:32,730 --> 00:12:34,160
Quindi, vedi Home,

171
00:12:34,160 --> 00:12:36,500
Informazioni, Menu e Contatto lì,

172
00:12:36,500 --> 00:12:43,145
e ognuno di essi è un link, ma questo è un elemento di navigazione qui.

173
00:12:43,145 --> 00:12:48,740
E nota come la Home è evidenziata qui a causa dell'uso della classe attiva.

174
00:12:48,740 --> 00:12:50,305
Quindi, se clicco su About,

175
00:12:50,305 --> 00:12:52,990
dovrebbe portarmi al passo About.

176
00:12:52,990 --> 00:12:55,670
Ecco, eccoci qui.

177
00:12:55,670 --> 00:12:58,970
Ma mi rendo conto che non ho un modo per tornare indietro,

178
00:12:58,970 --> 00:13:04,190
quindi il che significa che ho anche bisogno di consegnare questa barra di navigazione alla pagina aboutus.HTML.

179
00:13:04,190 --> 00:13:07,330
Ci arriveremo in breve tempo.

180
00:13:07,330 --> 00:13:11,360
Per ora, ho intenzione di navigare rapidamente utilizzando il pulsante Indietro del

181
00:13:11,360 --> 00:13:16,585
mio browser per tornare alla mia pagina index.HTML.

182
00:13:16,585 --> 00:13:21,030
Una cosa che volevo anche dimostrarti era come

183
00:13:21,030 --> 00:13:27,525
questa barra di navigazione crollerà per schermi di dimensioni piccole ed extra piccole.

184
00:13:27,525 --> 00:13:35,570
Quindi, accendiamo la vista usando la vista reattiva,

185
00:13:35,570 --> 00:13:37,960
quindi lasciami andare al Galaxy S5.

186
00:13:37,960 --> 00:13:43,250
E ho notato che quando uso il Galaxy S5 in questo modo,

187
00:13:43,250 --> 00:13:50,000
puoi vedere che questo viene visualizzato prima di quanto stia già coprendo lo schermo.

188
00:13:50,000 --> 00:13:52,145
Non e' questo il comportamento che voglio.

189
00:13:52,145 --> 00:14:00,075
Voglio essere in grado di nasconderlo quando sto visualizzando questo su uno schermo piccolo ed extra piccolo.

190
00:14:00,075 --> 00:14:04,220
E poi forse aggiungo un pulsante qui che posso usare

191
00:14:04,220 --> 00:14:08,450
per attivare e disattivare la visualizzazione di questi link.

192
00:14:08,450 --> 00:14:13,170
Hai visto queste cose nei siti web mobili.

193
00:14:13,170 --> 00:14:16,935
Come lo facciamo in bootstrap?

194
00:14:16,935 --> 00:14:19,645
Andiamo a quel passo dopo.

195
00:14:19,645 --> 00:14:24,300
Tornando alla nostra barra di navigazione qui.

196
00:14:24,300 --> 00:14:27,910
Permettetemi di aggiungere un pulsante lì,

197
00:14:27,910 --> 00:14:33,840
che fungerà da interruttore per mostrare e nascondere

198
00:14:33,840 --> 00:14:42,225
i miei collegamenti dalla mia barra di navigazione quando viene visualizzato su schermi extra intelligenti e piccoli.

199
00:14:42,225 --> 00:14:43,615
Quindi, per aggiungere lì,

200
00:14:43,615 --> 00:14:47,645
lasciami aggiungere un pulsante e applicare alcune classi a questo pulsante.

201
00:14:47,645 --> 00:14:54,285
Parleremo di più sui pulsanti in bootstrap nella prossima lezione.

202
00:14:54,285 --> 00:14:57,515
Ma per aggiungere un pulsante in bootstrap,

203
00:14:57,515 --> 00:15:03,770
dovresti applicare la classe per questo particolare pulsante come navbar-toggler.

204
00:15:04,450 --> 00:15:07,420
Quindi, questo è un navigatore.

205
00:15:07,420 --> 00:15:09,400
Quindi, come suggerisce il nome,

206
00:15:09,400 --> 00:15:14,970
stai già iniziando a capire cosa farà questo pulsante in questo caso.

207
00:15:14,970 --> 00:15:22,650
E poi aggiungerei il tipo come pulsante per indicare che questo agisce come un pulsante.

208
00:15:22,650 --> 00:15:31,360
E poi passa i dati come collasso.

209
00:15:31,360 --> 00:15:36,070
Ora, questo attributo data-toggle che vedrai qui è in realtà

210
00:15:36,070 --> 00:15:42,400
un utilizzo del componente JavaScript in bootstrap.

211
00:15:42,400 --> 00:15:48,100
Stiamo andando a guardare a questo tipo di dati trattini bar tipo di attributi più nel prossimo modulo,

212
00:15:48,100 --> 00:15:50,875
dove vedremo i componenti JavaScript bootstraps.

213
00:15:50,875 --> 00:15:55,225
La barra di navigazione richiede uno di quei componenti JavaScript per essere in grado di

214
00:15:55,225 --> 00:15:59,980
attivare e disattivare i miei collegamenti nella mia barra di navigazione, Quindi,

215
00:15:59,980 --> 00:16:03,825
questo è il motivo per cui ho introdotto rapidamente questo concetto qui,

216
00:16:03,825 --> 00:16:05,800
ma torneremo per esaminare

217
00:16:05,800 --> 00:16:12,020
questo bootstrap componenti JavaScript più nel modulo successivo.

218
00:16:12,020 --> 00:16:14,420
Quindi, il crollo dei dati e

219
00:16:14,420 --> 00:16:24,610
quindi il target dei dati come #Navbar.

220
00:16:24,610 --> 00:16:30,660
Ora, ho intenzione di introdurre un altro div con l'ID come barra di navigazione.

221
00:16:30,660 --> 00:16:33,470
Quindi, quando specifico una data o un target #Navbar,

222
00:16:33,470 --> 00:16:38,560
che si riferisce all'ID di quell'altro elemento che sarà

223
00:16:38,560 --> 00:16:44,025
il target di questo particolare pulsante qui.

224
00:16:44,025 --> 00:16:47,625
Quindi, questa è la parte che aggiungo in fondo.

225
00:16:47,625 --> 00:16:52,340
E anche, voglio che il pulsante mostri qualcosa qui.

226
00:16:52,340 --> 00:16:56,970
E in genere, quando vedi questo tipo di pulsanti nei siti web per dispositivi mobili,

227
00:16:56,970 --> 00:16:59,730
conterrebbe linee libere lì, in

228
00:16:59,730 --> 00:17:04,310
modo che viene tipicamente chiamato come l'icona Navbar-Toggle.

229
00:17:04,310 --> 00:17:11,630
Quindi, includerò un'icona speciale

230
00:17:11,630 --> 00:17:19,660
inclusa nel bootstrap, chiamata navbar-toggler icon.

231
00:17:19,660 --> 00:17:23,395
Quindi, se applico questa classe al tag span,

232
00:17:23,395 --> 00:17:29,050
allora questo introdurrà un'icona di navbar-toggler al mio pulsante qui.

233
00:17:29,410 --> 00:17:32,130
Quindi, questo introduce un pulsante.

234
00:17:32,130 --> 00:17:34,980
Vedremo come sembra tra un po'.

235
00:17:34,980 --> 00:17:36,780
Ora, quando faccio clic su questo pulsante,

236
00:17:36,780 --> 00:17:41,140
voglio essere in grado di mostrare e nascondere questi collegamenti.

237
00:17:41,140 --> 00:17:43,140
Per consentirmi di farlo,

238
00:17:43,140 --> 00:17:50,780
quello che farò è circondare questo ul con un div qui.

239
00:17:51,070 --> 00:17:57,585
Quindi, ho intenzione di entrare e introdurre un div intorno a questo ul.

240
00:17:57,585 --> 00:17:59,280
E a questo div,

241
00:17:59,280 --> 00:18:04,850
applicherò la classe come collasso,

242
00:18:04,850 --> 00:18:15,895
e poi navbar-collapse, e poi gli do un ID come barra di navigazione.

243
00:18:15,895 --> 00:18:20,115
Ora, stai iniziando a vedere la correlazione tra

244
00:18:20,115 --> 00:18:26,300
queste classi e l'ID e ciò che ho dichiarato nell'interruttore dati e nella destinazione dati.

245
00:18:26,300 --> 00:18:32,750
Quindi, qui il target dati che specifico come #Navbar e quindi l'ID dato a questo div è barra di navigazione.

246
00:18:32,750 --> 00:18:35,640
E specifico l'attivazione/disattivazione dei dati come collasso.

247
00:18:35,640 --> 00:18:40,440
Collapse è uno dei componenti JavaScript bootstrap,

248
00:18:40,440 --> 00:18:43,955
che vedremo più in dettaglio nel prossimo modulo.

249
00:18:43,955 --> 00:18:50,780
Quindi, racchiudendo questo all'interno del div per schermi piccoli ed extra piccoli,

250
00:18:50,780 --> 00:18:54,860
questo sarebbe nascosto per impostazione predefinita,

251
00:18:54,860 --> 00:18:56,520
ma quando clicco sul pulsante,

252
00:18:56,520 --> 00:19:01,445
il contenuto di questo div verrà rivelato sullo schermo.

253
00:19:01,445 --> 00:19:09,540
Permettetemi anche di aggiungere un mr-auto al marchio navarbar-classe lì in modo da

254
00:19:09,540 --> 00:19:18,775
introdurre automaticamente un margine destro sufficiente a questo marchio navbar.

255
00:19:18,775 --> 00:19:22,495
Ora, andiamo a dare un'occhiata a questo nel nostro browser.

256
00:19:22,495 --> 00:19:25,270
Andando al browser, ora puoi vedere come

257
00:19:25,270 --> 00:19:31,370
la mia barra di navigazione è compressa su schermi di dimensioni piccole ed extra piccole.

258
00:19:31,370 --> 00:19:35,925
E notate questo pulsante sul lato sinistro.

259
00:19:35,925 --> 00:19:38,005
Quando faccio clic sul pulsante,

260
00:19:38,005 --> 00:19:43,805
i collegamenti nella barra di navigazione vengono visualizzati e nascosti.

261
00:19:43,805 --> 00:19:51,360
Questo è il comportamento che voglio per l'implementazione reattiva della mia barra di navigazione.

262
00:19:51,360 --> 00:19:55,375
Se passo a uno

263
00:19:55,375 --> 00:20:00,925
schermo normale e più grande, la barra di navigazione viene completamente visualizzata, inclusi i collegamenti.

264
00:20:00,925 --> 00:20:07,190
Ma quando visualizzo la stessa cosa su uno schermo più piccolo come questo,

265
00:20:07,190 --> 00:20:10,430
i collegamenti della barra di navigazione sono nascosti dietro

266
00:20:10,430 --> 00:20:15,020
questo pulsante e quindi verranno attivati e disattivati facendo clic su quel pulsante.

267
00:20:15,020 --> 00:20:18,190
Quindi questo è il comportamento reattivo che puoi

268
00:20:18,190 --> 00:20:22,870
costruire nella barra di navigazione sul tuo sito web.

269
00:20:22,870 --> 00:20:27,285
Ora che abbiamo completato la barra di navigazione sulla mia pagina index.HTML,

270
00:20:27,285 --> 00:20:32,015
voglio essere in grado di introdurre la stessa barra di navigazione nella pagina aboutus.HTML.

271
00:20:32,015 --> 00:20:35,540
Prima di arrivare, andiamo al piè di pagina qui.

272
00:20:35,540 --> 00:20:38,250
E poi si nota che nel piè di pagina,

273
00:20:38,250 --> 00:20:39,870
abbiamo questi collegamenti.

274
00:20:39,870 --> 00:20:43,265
Voglio essere in grado di aggiornare questo link anche per puntare

275
00:20:43,265 --> 00:20:48,450
a aboutus.HTML in modo che anche facendo clic sul collegamento nel mio piè di pagina,

276
00:20:48,450 --> 00:20:51,090
andrei comunque alla pagina di informazioni.

277
00:20:51,090 --> 00:20:53,780
Ora, tornando qui,

278
00:20:53,780 --> 00:21:02,320
quello che farò è semplicemente copiare questo codice di questa barra di navigazione da qui.

279
00:21:02,870 --> 00:21:13,520
E poi, vai alla pagina aboutus.HTML e poi incollalo nella mia pagina aboutus.HTML.

280
00:21:13,520 --> 00:21:17,145
Non solo, ho bisogno di fare qualche aggiustamento a questo,

281
00:21:17,145 --> 00:21:20,750
perché questo è ora nella pagina aboutus.HTML.

282
00:21:20,750 --> 00:21:25,105
Quindi, ovviamente, ci sono alcune cose che devo aggiornare.

283
00:21:25,105 --> 00:21:29,875
Innanzitutto, questo marchio navbar che dovrebbe riportarmi

284
00:21:29,875 --> 00:21:35,485
alla mia home page dovrebbe ora essere aggiornato come index.HTML qui.

285
00:21:35,485 --> 00:21:43,045
E poi, la voce di elenco qui ora la seconda della home page di nuovo,

286
00:21:43,045 --> 00:21:51,165
voglio aggiornarla a index.HTML lì e poi il secondo link al about,

287
00:21:51,165 --> 00:21:53,610
perché questa è la pagina aboutus.HTML,

288
00:21:53,610 --> 00:21:58,480
ho intenzione di rimetterla a quell'hash lì e poi rimuoverò

289
00:21:58,480 --> 00:22:06,045
la classe attiva dal primo e quindi applicare la classe attiva al secondo elemento,

290
00:22:06,045 --> 00:22:11,520
perché questa è la pagina Informazioni su e quindi dovrebbe essere quella evidenziata.

291
00:22:11,520 --> 00:22:16,705
Ancora una volta, andando al piè di pagina della pagina Informazioni.

292
00:22:16,705 --> 00:22:22,870
Nel piè di pagina, eseguirò gli stessi aggiornamenti ai collegamenti qui in modo

293
00:22:22,870 --> 00:22:29,525
che la home page mi riporti a index.HTML e quindi lasciami salvare le modifiche.

294
00:22:29,525 --> 00:22:34,740
Quindi ora anche la mia pagina Informazioni su come viene aggiornata correttamente.

295
00:22:34,740 --> 00:22:36,390
Andando al browser,

296
00:22:36,390 --> 00:22:41,220
è ora possibile vedere che sono sulla mia Home Page e poi quando clicco sulla pagina su,

297
00:22:41,220 --> 00:22:42,795
andrò alla pagina Informazioni su.

298
00:22:42,795 --> 00:22:48,710
Nota come viene visualizzata la stessa barra di navigazione in

299
00:22:48,710 --> 00:22:51,090
About Page, quindi devi essere evidenziato perché ho

300
00:22:51,090 --> 00:22:53,660
applicato la classe attiva a quella e quindi posso

301
00:22:53,660 --> 00:22:58,770
tornare alla mia Home Page facendo clic sul narvar-brand o sulla Home.

302
00:22:58,770 --> 00:23:02,115
Quindi facciamo clic sul narvar-marca e siamo di nuovo nella nostra

303
00:23:02,115 --> 00:23:06,210
principale o Home Page o index.HTML.

304
00:23:06,210 --> 00:23:13,180
Quindi, ora la navigazione è impostata correttamente sia nella home page che nella pagina Informazioni.

305
00:23:13,180 --> 00:23:17,810
Un paio di cose aggiuntive che ho intenzione di fare è applicare se vedi che

306
00:23:17,810 --> 00:23:23,480
è la classe che posso cambiare il colore della mia barra di navigazione

307
00:23:23,480 --> 00:23:26,340
e inoltre vorrei aggiungere

308
00:23:26,340 --> 00:23:32,595
un breadcrumb a questa pagina Informazioni su e in modo che il breadcrumb mi dia anche un altro modo

309
00:23:32,595 --> 00:23:36,950
di tornare alla mia Home Page e anche lo farà indica

310
00:23:36,950 --> 00:23:42,170
la gerarchia nel mio sito web in cui mi trovo al momento.

311
00:23:42,170 --> 00:23:45,505
Quindi facciamo questi due passi dopo.

312
00:23:45,505 --> 00:23:49,835
Tornando a quell'editor in styles.css.

313
00:23:49,835 --> 00:23:52,765
Ho intenzione di aggiungere un paio di altre classi qui.

314
00:23:52,765 --> 00:23:58,030
Hai notato che la mia barra di navigazione nascondeva parte del jumbotron.

315
00:23:58,030 --> 00:23:59,590
Per evitare

316
00:23:59,590 --> 00:24:01,705
ciò, quello che ho intenzione di fare è al mio corpo,

317
00:24:01,705 --> 00:24:06,110
ho intenzione di dare un padding di 50 pixel in

318
00:24:06,110 --> 00:24:11,505
alto in modo che quei 50 pixel saranno lasciati per la barra di navigazione da coprire.

319
00:24:11,505 --> 00:24:14,580
Ogni volta che si utilizza una barra di navigazione superiore fissa, è

320
00:24:14,580 --> 00:24:17,580
una buona idea dare questo padding al corpo della

321
00:24:17,580 --> 00:24:20,270
pagina web in modo che la navigazione non copra

322
00:24:20,270 --> 00:24:24,435
l'elemento più in alto nel corpo della pagina web.

323
00:24:24,435 --> 00:24:29,675
Quindi, i restanti che lascerò come

324
00:24:29,675 --> 00:24:39,155
zero pixel e anche lo z-index per il mio corpo come zero.

325
00:24:39,155 --> 00:24:43,485
Dalla tua conoscenza dei CSS capisci cosa fa lo z-index

326
00:24:43,485 --> 00:24:48,865
e il prossimo che farò è

327
00:24:48,865 --> 00:24:55,580
sovraccaricare la classe navbar-dark aggiungendo un altro colore per

328
00:24:55,580 --> 00:24:59,750
la classe navbar e il colore che

329
00:24:59,750 --> 00:25:06,490
sceglierò è 512DA8.

330
00:25:06,490 --> 00:25:15,275
Questo è un colore viola scuro che sembra molto buono nel mio sito web.

331
00:25:15,275 --> 00:25:21,505
Infatti, Se hai interesse dove ho trovato questi colori puoi visitare

332
00:25:21,505 --> 00:25:29,665
www.android.com e poi cercare la loro documentazione per il design del materiale e lì,

333
00:25:29,665 --> 00:25:33,325
hanno suggerimenti su come i colori possono essere utilizzati

334
00:25:33,325 --> 00:25:38,965
nella tua applicazione Android, ma la stessa cosa vale anche per un sito web,

335
00:25:38,965 --> 00:25:46,675
quindi è dove sono andato e ho selezionato questi colori da utilizzare nel mio sito web.

336
00:25:46,675 --> 00:25:51,060
Quindi, applicando questo, ora quando lo

337
00:25:51,060 --> 00:25:55,740
faccio, devo tornare alla mia pagina index.HTML e

338
00:25:55,740 --> 00:26:01,095
quindi dalla barra di navigazione dovrei rimuovere questo bg-primario.

339
00:26:01,095 --> 00:26:09,320
Altrimenti, il colore che ho suggerito nel CSS non verrà applicato a questo.

340
00:26:09,320 --> 00:26:14,185
Allo stesso modo, vai alla pagina aboutus.HTML e quindi scorri fino

341
00:26:14,185 --> 00:26:20,850
alla barra di navigazione e quindi rimuovi anche il bg-primario da quello.

342
00:26:21,610 --> 00:26:26,580
Ora, mentre sono nella pagina aboutus.HTML,

343
00:26:26,580 --> 00:26:34,080
lasciami introdurre un breadcrumb nel mio contenitore,

344
00:26:34,080 --> 00:26:36,310
la prima riga del mio contenitore lì.

345
00:26:36,310 --> 00:26:39,405
Quindi questo è dove il titolo About Us era

346
00:26:39,405 --> 00:26:45,120
lì, quindi lì ho intenzione di entrare e introdurre un ol.

347
00:26:45,260 --> 00:26:53,560
Sto solo usando il tag ol come un modo per introdurre il pangrattato.

348
00:26:53,560 --> 00:26:59,025
Puoi usare anche un div per questo e funzionerà ancora bene.

349
00:26:59,025 --> 00:27:06,050
Succede che l'esempio sulla documentazione di bootstraps abbia usato un ol così,

350
00:27:06,050 --> 00:27:14,030
sto attenendosi al fatto che anche un semplice div funzionerà bene qui.

351
00:27:14,030 --> 00:27:20,895
Quindi, io dico ol classe col-12 pangrattato.

352
00:27:20,895 --> 00:27:23,200
Quindi le classi breadcrumb sono state applicate e

353
00:27:23,200 --> 00:27:26,825
non il significato col-12 che ha allungato l'intero schermo.

354
00:27:26,825 --> 00:27:33,500
E lì dentro, entrerò e aggiungo due voci della lista.

355
00:27:34,250 --> 00:27:39,625
Ora vedi perché l'uso di ol è utile qui,

356
00:27:39,625 --> 00:27:48,565
perché posso usare le voci di elenco per descrivere l'elemento breadcrumb.

357
00:27:48,565 --> 00:27:50,725
Quindi, elemento breadcrumb qui,

358
00:27:50,725 --> 00:27:55,020
quindi includo un elemento breadcrumb e poi dentro userò

359
00:27:55,020 --> 00:28:02,380
il tag A per definire un collegamento alla mia Home Page.

360
00:28:02,380 --> 00:28:07,275
Quindi dico, «A» e poi a questo A,

361
00:28:07,275 --> 00:28:12,010
do l'href come index.HTML e poi

362
00:28:12,010 --> 00:28:17,815
includo nel mio primo breadcrumb e poi dopo questo,

363
00:28:17,815 --> 00:28:25,660
il prossimo che includerò è un altro elemento della lista e

364
00:28:25,660 --> 00:28:34,700
il secondo elemento della lista applicherò la classe come elemento breadcrumb e attivo.

365
00:28:34,700 --> 00:28:40,900
Quindi nota l'uso della classe attiva qui e poi dentro dirò «su di

366
00:28:40,900 --> 00:28:45,090
noi» Non ho bisogno di un link qui perché sono già sulla pagina in

367
00:28:45,090 --> 00:28:49,425
modo che non debba essere incluso per questa voce della lista.

368
00:28:49,425 --> 00:28:51,010
Salviamo le modifiche,

369
00:28:51,010 --> 00:28:54,910
in modo da poter vedere come il breadcrumb è stato introdotto in questa

370
00:28:54,910 --> 00:28:59,555
particolare pagina About Us qui.

371
00:28:59,555 --> 00:29:04,410
Andiamo a dare un'occhiata alla pagina web risultante.

372
00:29:04,410 --> 00:29:11,320
Andando alla mia pagina web, ora puoi vedere che il colore della barra di navigazione

373
00:29:11,320 --> 00:29:14,310
è ora cambiato in viola scuro che vengono introdotti

374
00:29:14,310 --> 00:29:17,900
attraverso il CSS e questo sembra bello sullo schermo qui.

375
00:29:17,900 --> 00:29:20,780
Dark Purple, seguito da un viola più chiaro e poi in

376
00:29:20,780 --> 00:29:24,300
basso ancora più chiaro viola per il mio piè di pagina.

377
00:29:24,300 --> 00:29:27,240
Beh, io non sono un designer,

378
00:29:27,240 --> 00:29:33,875
ma questo è il meglio che ho potuto venire con in termini di aggiunta vicino ai siti web.

379
00:29:33,875 --> 00:29:38,660
Come sapete dalla storia gli uomini sono daltonici.

380
00:29:38,660 --> 00:29:42,750
Quindi abbiamo molto scarso gusto nei colori.

381
00:29:42,750 --> 00:29:48,065
Se sei sposata tua moglie te lo ricordera' sicuramente.

382
00:29:48,065 --> 00:29:52,680
Andiamo alla pagina Informazioni e vediamo come appare.

383
00:29:52,680 --> 00:29:55,960
Quindi questa è la pagina About e nella pagina About puoi

384
00:29:55,960 --> 00:29:59,520
vedere la barra di navigazione con il colore corretto

385
00:29:59,520 --> 00:30:06,925
lì e notare il breadcrumb incluso nel About Us quaggiù.

386
00:30:06,925 --> 00:30:10,910
Così si può vedere la casa che ti porta di nuovo alla pagina indice e

387
00:30:10,910 --> 00:30:15,020
poi Chi siamo come hai visto abbiamo applicato link

388
00:30:15,020 --> 00:30:16,655
attivo, classe attiva a questo.

389
00:30:16,655 --> 00:30:19,500
Così è così che il About Us è display e la home page.

390
00:30:19,500 --> 00:30:23,770
Quindi, questo è lo stile di breadcrumb predefinito usato

391
00:30:23,770 --> 00:30:29,450
nel bootstrap e se clicco sulla home page tornerò alla mia home page.

392
00:30:29,450 --> 00:30:35,585
Con questo completiamo questo esercizio su navbar e pangrattato.

393
00:30:35,585 --> 00:30:42,640
Questo è un buon momento per fare un commit git con il messaggio «barra di navigazione e breadcumbs».