1
00:00:00,750 --> 00:00:06,120
Bentornata in questa lezione, vi mostrerò uno dei componenti più importanti e ampiamente usati

2
00:00:06,120 --> 00:00:12,290
in tutto il Bootstrap, che è l'NFR, così potete vedere effettivamente su come ottenere Boucek dotcom.

3
00:00:12,450 --> 00:00:15,980
Usano abbastanza componenti della barra proprio qui.

4
00:00:16,200 --> 00:00:21,900
Ne utilizzeremo anche uno sulla nostra applicazione del campo Yelp e ridimensionando la barra di navigazione.

5
00:00:21,900 --> 00:00:28,980
Si noti quanto sia reattivo e quindi si noti anche non appena tocchi TAB di quale taglia e dimensione mobile

6
00:00:28,980 --> 00:00:30,700
si ottiene questo bel hamburger.

7
00:00:30,720 --> 00:00:33,020
Quindi lavoreremo a tutto questo in questa lezione.

8
00:00:33,180 --> 00:00:34,890
Ma inizieremo più semplice.

9
00:00:34,890 --> 00:00:42,480
La prima cosa che dobbiamo fare è andare ai componenti e andare alla barra di navigazione e prima di andare molto più avanti ho

10
00:00:42,480 --> 00:00:46,290
creato un nuovo file solo perché scriveremo un bel po 'di codice.

11
00:00:46,380 --> 00:00:48,150
Il vecchio stava diventando ingombrante.

12
00:00:48,150 --> 00:00:50,620
Lo chiamo Naff Bar H T M L.

13
00:00:50,820 --> 00:00:56,030
All'interno di tutto ciò che hanno è il link al bootstrap che non cambia il titolo qui.

14
00:00:56,630 --> 00:01:00,980
Lo chiamo semplicemente Nav barre di bootstrap.

15
00:01:01,350 --> 00:01:02,910
Proprio così.

16
00:01:02,910 --> 00:01:07,580
Ora andiamo ai documenti e diamo un'occhiata alla barra di navigazione predefinita.

17
00:01:08,220 --> 00:01:13,460
Quindi questo esempio mostra tutte le caratteristiche importanti in cui possiamo avere un link di marca.

18
00:01:13,560 --> 00:01:15,800
Possiamo avere altri collegamenti che possiamo avere abbandonato sui menu.

19
00:01:15,930 --> 00:01:20,940
Possiamo avere un modulo barra di navigazione e un pulsante possiamo avere cose che sono sul lato destro cose che

20
00:01:20,940 --> 00:01:22,010
sono sul lato sinistro.

21
00:01:22,020 --> 00:01:23,720
Questo mostra davvero tutto.

22
00:01:23,790 --> 00:01:30,330
È il lavello della cucina delle barre di bootstrap e di conseguenza il markup è un po 'lungo.

23
00:01:30,390 --> 00:01:33,530
Lavoreremo con tutti questi pezzi entro la fine di questo video.

24
00:01:33,540 --> 00:01:37,790
Ma voglio iniziare più semplice e inizierò mostrandoti il ​​modo più semplice per fare un numero.

25
00:01:38,040 --> 00:01:46,470
Quindi abbiamo bisogno di creare un elemento nav e che l'elemento NAV abbia bisogno di avere due classi, vogliamo barra di navigazione

26
00:01:46,470 --> 00:01:51,550
e barra di navigazione e possiamo iniziare con il salvataggio predefinito di Dasch.

27
00:01:51,550 --> 00:01:54,920
E ora andiamo a guardare il file nel browser e aggiorniamo.

28
00:01:55,200 --> 00:02:00,690
Potete vedere che spero che capiti e screencast c'è un bar abbastanza debole che passa in

29
00:02:00,690 --> 00:02:04,860
alto così che questo è il modo in cui inizializziamo la barra NF.

30
00:02:04,860 --> 00:02:06,980
Ora riempia con alcuni contenuti.

31
00:02:07,050 --> 00:02:11,640
La prima cosa che daremo un'occhiata è come possiamo aggiungere questo marchio qui.

32
00:02:11,790 --> 00:02:13,180
Fondamentalmente il nome della tua azienda.

33
00:02:13,230 --> 00:02:14,320
Nella maggior parte dei casi.

34
00:02:14,900 --> 00:02:20,830
E questo usa l'intestazione della barra di navigazione e poi all'interno dell'intestazione NFR usiamo un marchio della barra di navigazione.

35
00:02:20,850 --> 00:02:32,160
Quindi iniziamo aggiungendo che la classe div è uguale all'intestazione del cruscotto della barra di navigazione e quindi al suo interno aggiungeremo nel marchio della barra

36
00:02:32,160 --> 00:02:35,910
di navigazione che è un tag di ancoraggio.

37
00:02:35,910 --> 00:02:39,440
Di solito quando si fa clic sul nome della società, si ritorna alla pagina iniziale.

38
00:02:39,660 --> 00:02:44,760
Quindi lo faremo qui tag di ancoraggio e inizieremo con un traffico uguale a Thorpes quindi non

39
00:02:44,760 --> 00:02:45,840
ci porterà ovunque.

40
00:02:45,870 --> 00:02:52,890
La classe sarà uguale al marchio di barra di navigazione e creeremo solo un nome di società.

41
00:02:52,890 --> 00:02:57,170
Vediamo se ho preso una tazza di caffè intorno a me, quindi andiamo con il caffè.

42
00:02:57,270 --> 00:03:02,210
Ma per renderlo davvero un vero startup, abbiamo bisogno di cambiare un poco l'ortografia.

43
00:03:02,400 --> 00:03:03,180
OK Alex.

44
00:03:03,180 --> 00:03:03,990
Abbastanza buono per me.

45
00:03:04,020 --> 00:03:05,350
Caffè con K.

46
00:03:05,760 --> 00:03:07,420
Andiamo a dare un'occhiata.

47
00:03:07,590 --> 00:03:11,830
Aggiorna e ora abbiamo il nostro marchio della barra NAV che è un link.

48
00:03:11,940 --> 00:03:12,880
Lo clicco.

49
00:03:13,010 --> 00:03:17,250
Non mi porta da nessuna parte in questo momento ma alla fine le nostre applicazioni lo faranno in

50
00:03:17,250 --> 00:03:20,940
modo che quando si fa clic sul nome della società, si ritorna alla home page successiva.

51
00:03:20,940 --> 00:03:24,480
Vediamo se possiamo aggiungere altri link come il contatto su.

52
00:03:24,510 --> 00:03:25,660
Registrati per registrarti.

53
00:03:25,770 --> 00:03:27,490
Tutti quei link comuni nella barra.

54
00:03:27,660 --> 00:03:31,190
Iniziamo aggiungendo il link della pagina qui.

55
00:03:31,500 --> 00:03:37,620
Quindi torneremo indietro e al di fuori dell'intestazione della barra di navigazione faremo un altro div in questo div

56
00:03:37,620 --> 00:03:41,600
per raccogliere tutti i contenuti almeno sul lato sinistro della nostra barra NAV.

57
00:03:41,760 --> 00:03:46,410
Quindi abbiamo l'intestazione e poi avremo del contenuto e poi se vogliamo qualcosa sul lato destro

58
00:03:46,500 --> 00:03:48,960
avremo un altro div che ha un'altra classe.

59
00:03:48,960 --> 00:03:50,010
Quindi la classe qui.

60
00:03:50,070 --> 00:03:56,730
In realtà due vogliamo nav e dash dash dash nav.

61
00:03:56,850 --> 00:04:00,170
Non chiedetemi di nominare la loro barra di navigazione nav cruscotto.

62
00:04:00,210 --> 00:04:05,040
È una delle grandi critiche del bootstrap è che è un po 'brutto e a volte non

63
00:04:05,040 --> 00:04:05,940
è molto significativo.

64
00:04:06,030 --> 00:04:12,030
è stato creato in risposta alla semantica mancanza di significato del bootstrap se si chiamerà UI semantica.

65
00:04:12,030 --> 00:04:14,630
E c'è in realtà un framework CSSA che

66
00:04:14,910 --> 00:04:16,660
E questo è uno che mi piace davvero tanto.

67
00:04:16,710 --> 00:04:18,070
E ho discusso l'insegnamento.

68
00:04:18,420 --> 00:04:22,190
Ma alla fine non è così diffuso che non ci sono ancora tutorial fantastici.

69
00:04:22,200 --> 00:04:23,550
Quindi torniamo al nostro diff qui.

70
00:04:23,590 --> 00:04:27,600
Classe nav bar nav e nav classe entrambi.

71
00:04:27,690 --> 00:04:34,710
E poi per ogni elemento che vogliamo su questo NFR abbiamo bisogno di aggiungere un alleato e poi all'interno della Y se vogliamo collegare

72
00:04:34,710 --> 00:04:36,850
abbiamo appena avuto un tag di ancoraggio.

73
00:04:37,050 --> 00:04:38,810
Quindi questo andrà da nessuna parte.

74
00:04:38,850 --> 00:04:42,280
Ancora una volta e questo sarà per la pagina About.

75
00:04:42,500 --> 00:04:53,550
E se torno indietro e aggiorni ora abbiamo un link a circa aggiungiamone un altro al contatto salva indietro.

76
00:04:54,570 --> 00:04:58,950
Ora abbiamo due link ora andiamo avanti e aggiungere qualcosa sul lato destro della pagina.

77
00:04:59,160 --> 00:05:05,340
Aggiungiamo due link uno per registrarsi o registrarsi e un altro per accedere sul lato destro della barra

78
00:05:06,840 --> 00:05:07,630
per farlo.

79
00:05:07,690 --> 00:05:13,370
è più convenzionale usarlo, lo farai allo stesso modo, ma vorrai avere alleati invece di un pozzo

80
00:05:13,630 --> 00:05:19,150
anche se funzioneranno bene con un div poco più senso di essere al posto di un UL.

81
00:05:19,140 --> 00:05:23,570
Abbiamo bisogno di un altro contenitore qui e in realtà invece di usare div

82
00:05:23,620 --> 00:05:32,010
Quindi aggiungeremo un altro UL e questo sarà Nav. dash barra di navigazione nav e quindi barra di

83
00:05:32,100 --> 00:05:32,700
navigazione.

84
00:05:32,760 --> 00:05:33,570
Destra.

85
00:05:33,660 --> 00:05:38,280
E dobbiamo assicurarci di scriverlo correttamente altrimenti quella classe non avrà effetto.

86
00:05:38,280 --> 00:05:42,960
Quindi, ciò che questo farà diventerà un nuovo gruppo di contenuti per il lato destro di tale barra di navigazione.

87
00:05:43,120 --> 00:05:44,540
E ora abbiamo solo bisogno di riempirlo.

88
00:05:44,550 --> 00:05:47,750
Quindi aggiungerò due link entrambi in senso orario.

89
00:05:47,820 --> 00:05:55,510
Il primo non andrà da nessuna parte e dirà la registrazione e poi ne avremo un altro che dice solo

90
00:05:55,770 --> 00:05:56,550
il login.

91
00:05:56,940 --> 00:05:58,080
Diamo un'occhiata.

92
00:05:58,290 --> 00:06:01,630
Aggiorna la pagina e puoi vedere che abbiamo dei contenuti sulla destra.

93
00:06:01,650 --> 00:06:07,710
Tuttavia è giusto andare oltre il limite e correggere che possiamo aggiungere in un contenitore a una barra sufficiente proprio

94
00:06:07,710 --> 00:06:12,220
come usiamo il contenitore in precedenza per aggiungere una certa spaziatura al nostro contenuto principale.

95
00:06:12,220 --> 00:06:14,190
Potremmo aggiungere uno invece di una barra di navigazione.

96
00:06:14,400 --> 00:06:17,730
Quindi metto tutto nella barra dei neph invece di un contenitore.

97
00:06:17,740 --> 00:06:20,800
Quindi la classe è uguale al contenitore.

98
00:06:21,060 --> 00:06:22,430
Basta spostarlo verso il basso.

99
00:06:22,560 --> 00:06:26,180
Assicurati che tutto sia rientrato correttamente.

100
00:06:26,190 --> 00:06:27,770
Eccoci.

101
00:06:27,780 --> 00:06:30,930
Proviamoci.

102
00:06:30,930 --> 00:06:31,430
Bello.

103
00:06:31,440 --> 00:06:33,910
Quindi ora tutto è centrato bene e correttamente.

104
00:06:34,140 --> 00:06:41,940
Ti mostrerò se ho aggiunto il container all'esterno del nav e hanno inserito l'intera barra di navigazione all'interno.

105
00:06:42,880 --> 00:06:43,650
Beh, guarda cosa succede

106
00:06:43,660 --> 00:06:49,950
Ora, se fossi abbastanza fresco, in realtà ho tagliato e me ne sono andato solo per la strada.

107
00:06:50,460 --> 00:06:53,460
Quindi container lo farà a qualunque cosa ne mettiamo dentro.

108
00:06:53,670 --> 00:06:59,640
E in questo caso vogliamo il contenitore all'interno della barra di navigazione in modo che non

109
00:06:59,640 --> 00:07:03,820
costringa l'effettiva parte di sé, ma limita il contenuto al suo interno.

110
00:07:04,440 --> 00:07:04,950
OK.

111
00:07:05,060 --> 00:07:11,250
Quindi, contenitore abbiamo il nostro Hetter, abbiamo la roba a sinistra e abbiamo alcuni contenuti sulla destra in modo che

112
00:07:11,990 --> 00:07:13,060
tu possa vedere qui.

113
00:07:13,290 --> 00:07:20,050
Ora, che passo un po 'e vai e prendi questa barra di navigazione di base o la

114
00:07:20,040 --> 00:07:28,850
barra di navigazione predefinita che hanno nei documenti e copiamo l'intera cosa e la metterò appena sotto sono ora lontano fanno un po'

115
00:07:28,900 --> 00:07:29,670
di spazio.

116
00:07:29,670 --> 00:07:33,010
Un sacco di commenti per renderlo più chiaro.

117
00:07:33,250 --> 00:07:35,510
Barra di navigazione predefinita.

118
00:07:36,060 --> 00:07:40,280
E diamo un'occhiata a questo aggiornamento.

119
00:07:40,560 --> 00:07:44,580
Quindi è questa barra di navigazione qui e ci sono alcune cose che voglio evidenziare.

120
00:07:44,580 --> 00:07:48,690
Uno è che abbiamo abbandonato i menu ma in realtà non funzionano.

121
00:07:48,900 --> 00:07:53,300
E anche quando ridimensioniamo la finestra otteniamo qui il menu dell'hamburger.

122
00:07:53,550 --> 00:07:54,740
Quei collegamenti vanno via.

123
00:07:54,750 --> 00:07:58,630
Il modulo scompare e per rivelarli dobbiamo cliccare qui.

124
00:07:58,830 --> 00:08:00,480
Ma neanche questo funziona.

125
00:08:00,960 --> 00:08:05,890
Quindi iniziamo a farlo funzionare e poi parleremo di tutti questi diversi pezzi e di ciò

126
00:08:05,880 --> 00:08:07,570
che fanno per farlo funzionare.

127
00:08:07,590 --> 00:08:10,550
Dobbiamo andare e includere il file javascript bootstrap.

128
00:08:10,830 --> 00:08:15,660
Quindi, se torniamo ai documenti di bootstrap Faremo clic su download.

129
00:08:15,780 --> 00:08:19,800
C'è anche un file javascript di cui abbiamo bisogno, che è proprio qui.

130
00:08:19,800 --> 00:08:24,460
Userò la versione Cdn ma anche nella cartella che scarichi.

131
00:08:24,510 --> 00:08:25,700
Si chiama semplicemente bootstrap.

132
00:08:25,810 --> 00:08:26,220
Sì.

133
00:08:26,250 --> 00:08:29,890
O la versione ridotta al minimo ha riavviato Mencius.

134
00:08:30,420 --> 00:08:36,210
E aggiungiamolo e lo faremo in fondo al nostro corpo e salveremo.

135
00:08:36,210 --> 00:08:38,280
E so che non abbiamo parlato di javascript.

136
00:08:38,380 --> 00:08:42,860
Non sai cos'è una sceneggiatura e quale fonte qui non ha importanza.

137
00:08:42,900 --> 00:08:44,710
Lo inseriremo in bootstrap.

138
00:08:44,910 --> 00:08:46,550
E ora il nostro aggiornamento.

139
00:08:46,710 --> 00:08:52,590
Possiamo risolvere un piccolo problema che ti mostrerò qui ci dice che javascript bootstraps richiede

140
00:08:52,700 --> 00:08:53,470
una query.

141
00:08:53,790 --> 00:08:56,180
Non preoccuparti di cosa sia e di come sia arrivato a questo messaggio.

142
00:08:56,250 --> 00:08:59,970
Ma voglio solo mostrartelo in modo che tu veda il vero messaggio che riceviamo.

143
00:08:59,970 --> 00:09:03,240
Abbiamo bisogno di richiedere una query J di cui non abbiamo nemmeno parlato.

144
00:09:03,580 --> 00:09:05,360
Ma è abbastanza facile andare a prendere.

145
00:09:05,400 --> 00:09:07,140
Non dobbiamo scrivere javascript.

146
00:09:07,170 --> 00:09:08,830
Non devi conoscere alcun javascript.

147
00:09:08,830 --> 00:09:10,180
Dobbiamo solo includerlo.

148
00:09:10,230 --> 00:09:18,200
Quindi tutto quello che dobbiamo fare è cercare le query di Jay CDN che sono sul codice che Jay

149
00:09:18,200 --> 00:09:23,890
dot com e quaggiù dovranno selezionare la versione più recente e copiare questo URL.

150
00:09:23,910 --> 00:09:30,150
Questo è il file di Querrey e poi torneremo qui.

151
00:09:30,150 --> 00:09:32,560
Aggiungeremo un altro di questi tag di script.

152
00:09:32,640 --> 00:09:34,410
Fondamentalmente copia questo codice esatto.

153
00:09:34,410 --> 00:09:40,670
In effetti lo farò per semplificare la duplicazione di quella riga esatta e cambiare questo URL per essere la

154
00:09:40,680 --> 00:09:42,030
query jey che sei.

155
00:09:42,610 --> 00:09:44,530
Se tutto il resto fallisce, puoi semplicemente scriverlo.

156
00:09:44,560 --> 00:09:51,220
Non è poi così male se si è io, ma ho capito cercando Jay Mail CDN e si salverà e

157
00:09:51,210 --> 00:09:56,290
questo deve venire prima del file javascript di bootstraps perché si basa su una query.

158
00:09:56,560 --> 00:10:00,370
Quindi ancora una volta non preoccuparti troppo di come funziona la query di Jay.

159
00:10:00,450 --> 00:10:02,150
Tutto questo succederà tra qualche minuto.

160
00:10:02,430 --> 00:10:06,550
Ma per ottenere il massimo dal bootstrap e in particolare dalle barre di navigazione e dal menu a discesa.

161
00:10:06,750 --> 00:10:13,210
Abbiamo solo bisogno di avere queste due linee ogni volta che la usiamo, quindi torneremo subito e aggiorneremo.

162
00:10:13,230 --> 00:10:18,850
Prima di tutto vengono rilasciati sui menu ora funziona come puoi vedere ora abbiamo menu a tendina.

163
00:10:18,880 --> 00:10:24,430
Non ne parleremo in questo video, ma mentre ridimensiono e ottengo quell'hamburger.

164
00:10:25,050 --> 00:10:26,980
L'hamburger ora funziona quando faccio clic su di esso.

165
00:10:26,980 --> 00:10:29,480
Attiva quel materiale nascosto.

166
00:10:29,560 --> 00:10:36,850
Quindi il modo in cui funziona proprio qui è questo piccolo breakpoint proprio qui dove tutto

167
00:10:36,880 --> 00:10:43,280
questo contenuto si nasconde e tutto ciò che vediamo è l'intestazione e quel pulsante.

168
00:10:43,380 --> 00:10:48,870
poi, quando clicchiamo sul pulsante, tutti i contenuti precedentemente nascosti riappaiono. Facciamolo funzionare.

169
00:10:48,880 --> 00:10:49,120
E

170
00:10:49,120 --> 00:10:50,650
Ora per noi.

171
00:10:50,950 --> 00:10:55,930
Ma stiamo andando a fare una versione molto meno complicata in cui vogliamo solo nascondere

172
00:10:55,930 --> 00:11:01,960
questi quattro link in modo che quando ridimensioniamo questi quattro link sono nascosti e quindi molto velocemente verranno visualizzati.

173
00:11:02,250 --> 00:11:07,830
Per iniziare, dai un'occhiata a come si realizza in questa versione predefinita questo mostro gigante

174
00:11:07,840 --> 00:11:09,830
di una barra di navigazione.

175
00:11:10,380 --> 00:11:13,650
E indicherò semplicemente la linea importante qui.

176
00:11:13,760 --> 00:11:22,090
ciò che inseriamo all'interno di questo div verrà compresso quando raggiungiamo la dimensione del dispositivo mobile in modo che non sia il pulsante per noi.

177
00:11:22,090 --> 00:11:24,850
Div categ crollo barra di navigazione comprimi tutto

178
00:11:24,850 --> 00:11:30,040
Non eseguirà la commutazione nel riapparire in clandestinità ma nasconderà qualsiasi contenuto venga inserito al suo

179
00:11:30,040 --> 00:11:33,470
interno quando raggiungiamo il tablet e le dimensioni del dispositivo mobile.

180
00:11:33,650 --> 00:11:38,500
Quindi lo copiamo e abbiamo solo bisogno di avvolgere il contenuto che vogliamo

181
00:11:38,500 --> 00:11:40,320
nascondere e vogliamo nasconderlo qui.

182
00:11:40,330 --> 00:11:49,980
Questi due Juelz Quindi i quattro collegamenti che vogliamo nascondere quando raggiungiamo quella dimensione dello schermo più piccola.

183
00:11:50,440 --> 00:11:56,800
Quindi aggiungi il tag di chiusura e salva e c'è una riga qui e questo è importante e ci arriverò

184
00:11:56,830 --> 00:11:57,820
in un attimo.

185
00:11:57,850 --> 00:12:01,230
Non ci influenzerà ancora, ma se ci aggiorniamo.

186
00:12:01,690 --> 00:12:02,160
Vedrai.

187
00:12:02,170 --> 00:12:09,790
Ora quando ridimensiono c'è un punto proprio qui dove tutto quel contenuto all'interno del div

188
00:12:09,790 --> 00:12:10,650
crollo scompare.

189
00:12:10,680 --> 00:12:11,650
Ora non riappare.

190
00:12:11,640 --> 00:12:13,180
Non prendiamo questo hamburger.

191
00:12:13,330 --> 00:12:16,940
Non otteniamo un clic su nulla ma è crollato è andato via.

192
00:12:17,050 --> 00:12:24,580
E questo perché abbiamo aggiunto in questa linea qui div classe collapse nav bar collapse.

193
00:12:24,630 --> 00:12:29,780
La prossima cosa che dobbiamo fare è aggiungere l'hamburger ed è un bel po 'di codice.

194
00:12:29,780 --> 00:12:33,010
Purtroppo è ancora molto meglio che se dovessimo farlo da soli.

195
00:12:33,280 --> 00:12:37,220
Ma l'hamburger è tutto questo proprio qui.

196
00:12:37,800 --> 00:12:48,660
Quindi lo copierò e lo incollerò su all'interno di un pisolino o Hetter prima del nostro caffè incontattato.

197
00:12:48,970 --> 00:12:52,420
E salveremo tornerò a quello che fa.

198
00:12:53,320 --> 00:12:54,680
Facciamo solo il refresh.

199
00:12:55,140 --> 00:12:57,910
E ora, se ridimensiono, prendo l'hamburger.

200
00:12:58,120 --> 00:13:00,280
Eccoci.

201
00:13:00,310 --> 00:13:03,240
Ora lascia che ti spieghi un po 'come funziona.

202
00:13:03,250 --> 00:13:09,700
Quindi c'è un pulsante e poi all'interno di quel pulsante ci sono tre span e ognuno è

203
00:13:09,700 --> 00:13:13,000
responsabile della creazione di una di queste barre.

204
00:13:13,210 --> 00:13:18,510
Quindi non è un'immagine che stiamo vedendo qui in realtà è ogni squadra che sta facendo questo piccolo

205
00:13:18,670 --> 00:13:21,780
spandino che viene stilizzato in quelle strette barre per fare quell'hamburger.

206
00:13:22,030 --> 00:13:26,530
E poi, per quanto riguarda la visualizzazione e l'occultamento del contenuto quando facciamo clic su

207
00:13:26,950 --> 00:13:34,310
di esso, ciò che è veramente importante è che abbiamo questo attributo target di dati e tutto ciò che è impostato nel nostro esempio B-S.

208
00:13:34,310 --> 00:13:41,700
Ora per il nostro collasso una rete di esempio di bootstrap per il nostro club, quindi cambiamo semplicemente in sì.

209
00:13:42,180 --> 00:13:44,330
Nav. demo proprio così.

210
00:13:44,470 --> 00:13:48,880
Quindi dobbiamo cambiare l'ID del contenuto che vogliamo effettivamente collassare che vogliamo

211
00:13:48,880 --> 00:13:49,810
mostrare e nascondere.

212
00:13:49,870 --> 00:13:57,310
Quindi lo cambierò per abbinare vs nav demo.

213
00:13:57,340 --> 00:13:59,710
Nota una differenza importante.

214
00:13:59,710 --> 00:14:05,860
Non stiamo aggiungendo l'Arctic Thor Quindi è proprio come CSI quando selezioniamo qualcosa con C dice che dobbiamo usare

215
00:14:05,860 --> 00:14:11,420
Octa Thorpe per identificare un ID in modo che lasciamo l'ID come solo il testo il nome.

216
00:14:11,440 --> 00:14:18,120
Ora se la demo è qui, aggiungiamo che a Thorpe salverà l'aggiornamento.

217
00:14:18,120 --> 00:14:24,600
Ora, se ridimensiono, prendiamo l'hamburger e loro cliccano sopra e funziona per rendere visibili e nascondere.

218
00:14:26,250 --> 00:14:27,040
Grande.

219
00:14:27,070 --> 00:14:32,400
L'ultima cosa che ti mostrerò è che se spostiamo qualcosa al di fuori di questo collasso.

220
00:14:32,470 --> 00:14:35,710
Quindi prendiamo questi link qui.

221
00:14:36,070 --> 00:14:44,100
L'account o il about e il contatto e spostiamo quelli proprio qui fuori dal div al collasso e

222
00:14:44,110 --> 00:14:53,310
aggiorno posso vedere che in realtà non collassano rimangono lì e poi clicco su quello e gli altri due invece

223
00:14:53,320 --> 00:14:55,710
che sul collasso sono attivati.

224
00:14:55,720 --> 00:15:00,390
Ora non sto dicendo che questo sembra buono, ma illustra l'importanza di quel div crollo. per i diversi collegamenti a che sono sulla destra o sulla sinistra.

225
00:15:00,630 --> 00:15:06,480
Quindi, qualunque cosa sia accaduta nel lato del collasso o qualunque cosa abbiamo nel nostro caso

226
00:15:06,490 --> 00:15:08,160
Tutti crolleranno ogni volta che raggiungiamo quella dimensione mobile più piccola.

227
00:15:08,160 --> 00:15:12,070
E poi per farli mostrare di nuovo, clicchiamo su questo pulsante qui e quel

228
00:15:12,070 --> 00:15:18,250
pulsante ha un attributo di destinazione dei dati e qualsiasi ID a cui questo corrisponde sarà nascosto e mostrato quando clicchiamo su quello.

229
00:15:18,490 --> 00:15:23,570
E questa sembra essere questa idea qui.

230
00:15:24,010 --> 00:15:25,930
OK, quindi una specie di maratona.

231
00:15:26,440 --> 00:15:28,230
Un sacco di cose che servono per creare una barra di navigazione bootstrap.

232
00:15:28,270 --> 00:15:30,750
nostro file e analizzandone alcuni pezzi.

233
00:15:30,970 --> 00:15:36,940
Ma di nuovo il modo in cui ci siamo arrivati ​​è stato semplicemente copiando questo nel

234
00:15:36,940 --> 00:15:37,450
Ed è così

235
00:15:37,540 --> 00:15:42,160
che ne ricaviamo abbastanza ogni volta che prendiamo quel codice di esempio e capiamo di quali pezzi abbiamo bisogno e andiamo da lì.

236
00:15:42,150 --> 00:15:44,080