1
00:00:03,670 --> 00:00:09,835
In questo esercizio esploreremo la navigazione basata su schede di Bootstrap, il

2
00:00:09,835 --> 00:00:11,920
supporto di Bootstrap per le schede

3
00:00:11,920 --> 00:00:17,310
e il modo in cui le schede possono essere utilizzate per organizzare i contenuti sulla tua pagina web.

4
00:00:17,310 --> 00:00:21,165
E come è possibile navigare da una scheda a un'altra scheda,

5
00:00:21,165 --> 00:00:26,235
e quindi rivelare il contenuto in ognuna di queste schede nella pagina Web.

6
00:00:26,235 --> 00:00:30,115
Ora, qui mi vedrai usare la classe nav,

7
00:00:30,115 --> 00:00:34,560
e quindi qualificarla ulteriormente usando la classe nav tabs.

8
00:00:34,560 --> 00:00:38,065
Lo stesso approccio può essere utilizzato anche con le pillole nav

9
00:00:38,065 --> 00:00:42,740
che abbiamo guardato nella lezione precedente.

10
00:00:43,470 --> 00:00:46,440
Per iniziare con questo esercizio,

11
00:00:46,440 --> 00:00:49,200
andremo nella pagina aboutus.html.

12
00:00:49,200 --> 00:00:50,545
E poi proprio lì,

13
00:00:50,545 --> 00:00:53,690
dove abbiamo il contenuto della leadership aziendale lì,

14
00:00:53,690 --> 00:00:59,290
dopo l'h2, ho intenzione di introdurre la navigazione a schede.

15
00:00:59,290 --> 00:01:07,960
Quindi, questo è dove ho intenzione di fare uso di ul con le schede nav di classe.

16
00:01:07,960 --> 00:01:12,070
Quindi, avete visto che in precedenza, quando abbiamo costruito la barra di navigazione,

17
00:01:12,070 --> 00:01:17,215
abbiamo anche usato l'ul all'interno della barra di navigazione per specificare gli elementi di navigazione lì.

18
00:01:17,215 --> 00:01:20,270
Approccio simile qui, tranne che qui

19
00:01:20,270 --> 00:01:24,235
useremo l'ul con il nav e le schede nav qui.

20
00:01:24,235 --> 00:01:26,120
Quindi, all'interno di questo ul,

21
00:01:26,120 --> 00:01:33,395
costruiremo la struttura di navigazione per questa navigazione a schede qui.

22
00:01:33,395 --> 00:01:41,850
Quindi, lì dentro, userò l'elemento della lista con la classe nav-item

23
00:01:41,850 --> 00:01:48,965
e costruirò la navigazione attorno a questa voce della lista.

24
00:01:48,965 --> 00:01:53,770
Quindi, questo introduce il primo elemento nelle mie schede di navigazione.

25
00:01:53,770 --> 00:02:03,605
Subito dopo, lì dentro introdurrò un a con la classe nav-link attivo.

26
00:02:03,605 --> 00:02:05,960
Quindi, questo, come vedi,

27
00:02:05,960 --> 00:02:10,670
se ricordi dal modo in cui usiamo l'ul con l'elemento nav e il link nav.

28
00:02:10,670 --> 00:02:12,995
Nella barra di navigazione,

29
00:02:12,995 --> 00:02:14,970
stiamo vedendo un approccio simile qui.

30
00:02:14,970 --> 00:02:19,150
Quindi, nav-item attivo, e poi href.

31
00:02:19,970 --> 00:02:24,895
Quindi, questo sarebbe un riferimento al riquadro delle schede in seguito,

32
00:02:24,895 --> 00:02:28,695
che avrebbe l'ID di peter lì,

33
00:02:28,695 --> 00:02:33,310
e il ruolo è la scheda per questo

34
00:02:33,310 --> 00:02:39,560
e la scheda di commutazione dei dati.

35
00:02:39,560 --> 00:02:45,540
Quindi, puoi vedere il componente javascript di Bootstrap che entra in foto qui.

36
00:02:45,540 --> 00:02:49,500
E poi diro' Peter Pan,

37
00:02:49,700 --> 00:02:54,405
e poi chiudero' il cartellino li'.

38
00:02:54,405 --> 00:03:01,435
Quindi, questo completerebbe la nostra prima scheda nella nostra navigazione a schede.

39
00:03:01,435 --> 00:03:03,310
Lasciami completare il resto del codice,

40
00:03:03,310 --> 00:03:07,255
e poi torneremo e rivediamo il resto del codice lì.

41
00:03:07,255 --> 00:03:13,630
Quindi, qui puoi vedere che ho completato questa struttura di navigazione qui.

42
00:03:13,630 --> 00:03:23,635
Allo stesso modo, sto definendo le voci di elenco per i restanti leader aziendali liberi qui.

43
00:03:23,635 --> 00:03:26,305
Ora questo, lasciami salvare il resto.

44
00:03:26,305 --> 00:03:30,160
E poi andiamo a dare un'occhiata veloce alla pagina web.

45
00:03:30,840 --> 00:03:33,070
Passando alla pagina web,

46
00:03:33,070 --> 00:03:37,260
ora si vede come utilizzando le schede nav nav abbiamo creato

47
00:03:37,260 --> 00:03:42,400
questa struttura di navigazione proprio sotto la leadership aziendale qui.

48
00:03:42,400 --> 00:03:47,110
Quindi, questa struttura di navigazione significa che dovrei essere in grado di navigare e

49
00:03:47,110 --> 00:03:51,815
visualizzare ciascuno di essi in modo più dettagliato facendo clic su questo.

50
00:03:51,815 --> 00:03:54,830
Quindi, ecco come funziona la navigazione a schede qui.

51
00:03:54,830 --> 00:03:58,525
Ora, ovviamente, il contenuto di ognuno di loro dovrebbe

52
00:03:58,525 --> 00:04:02,700
mostrare in modo appropriato solo i dettagli di quella persona qui.

53
00:04:02,700 --> 00:04:06,145
Quindi, questo è dove

54
00:04:06,145 --> 00:04:10,630
entrerà in vigore l'uso del contenuto a schede e le classi del pannello delle schede.

55
00:04:10,630 --> 00:04:13,925
E ci accingiamo a racchiudere questo contenuto usando quello.

56
00:04:13,925 --> 00:04:17,200
E poi legalo a quelli di navigazione,

57
00:04:17,200 --> 00:04:18,660
navigazione a schede qui,

58
00:04:18,660 --> 00:04:22,580
in modo che solo le informazioni di

59
00:04:22,580 --> 00:04:25,380
un singolo leader aziendale vengano visualizzate sullo schermo alla volta.

60
00:04:25,380 --> 00:04:28,910
Una volta completata la configurazione di quella navigazione a schede,

61
00:04:28,910 --> 00:04:31,755
allora ci sposteremo verso il basso nel contenuto reale qui.

62
00:04:31,755 --> 00:04:36,505
E poi ora, ho intenzione di riorganizzare questo contenuto in quattro pannelli a schede separati,

63
00:04:36,505 --> 00:04:38,840
ognuno dei quali verrà mostrato quando

64
00:04:38,840 --> 00:04:44,010
il riquadro delle schede corrispondente è selezionato nella navigazione a schede.

65
00:04:44,010 --> 00:04:45,830
Quindi, per iniziare,

66
00:04:45,830 --> 00:04:50,755
la prima cosa che faremo è entrare e separare

67
00:04:50,755 --> 00:04:55,680
ognuno di questi quattro leader aziendali nelle quattro parti, in

68
00:04:55,680 --> 00:04:58,815
modo che sia facile per me vedere cosa sto facendo.

69
00:04:58,815 --> 00:05:01,180
Quindi, all'H3,

70
00:05:01,180 --> 00:05:04,355
li taglierò in quattro parti diverse,

71
00:05:04,355 --> 00:05:08,610
e poi potremo lavorare con queste.

72
00:05:08,610 --> 00:05:13,395
Quindi, ora ne ho uno, due, tre, quattro.

73
00:05:13,395 --> 00:05:19,055
Quindi, questo contenuto ora deve essere racchiuso all'interno di un div

74
00:05:19,055 --> 00:05:28,540
con il contenuto della scheda di classe.

75
00:05:28,540 --> 00:05:32,845
Quindi, tutto questo contenuto che abbiamo per

76
00:05:32,845 --> 00:05:40,055
i quattro diversi leader aziendali dovrebbe essere racchiuso all'interno di un div tab-contenuto lì.

77
00:05:40,055 --> 00:05:44,455
Quindi, ora l'ho racchiuso all'interno del contatto della scheda.

78
00:05:44,455 --> 00:05:46,090
Ora, per ognuno di essi,

79
00:05:46,090 --> 00:05:52,235
ho bisogno di creare un altro div con il pannello della scheda classi e alcune classi aggiuntive.

80
00:05:52,235 --> 00:05:56,430
E poi organizza questo contatto.

81
00:05:56,430 --> 00:05:58,680
Quindi, iniziamo con il primo.

82
00:05:58,680 --> 00:06:02,215
Quindi, per il primo leader aziendale,

83
00:06:02,215 --> 00:06:07,955
introdurrò un nuovo div con ruolo come tabpanel.

84
00:06:07,955 --> 00:06:12,250
Quindi, questo funge da pannello a schede che verrà visualizzato

85
00:06:12,250 --> 00:06:17,235
quando viene selezionata la prima navigazione a schede.

86
00:06:17,235 --> 00:06:22,440
E la classe corrispondente che devo applicare è tab-pane.

87
00:06:22,440 --> 00:06:24,090
Quindi, questo è il riquadro delle schede,

88
00:06:24,090 --> 00:06:26,430
il contenuto effettivo che è contenuto in lì.

89
00:06:26,430 --> 00:06:29,805
E poi un'altra classe che applico è dissolvenza.

90
00:06:29,805 --> 00:06:32,920
Quindi, la classe fade consente a questo contenuto di dissolvenza in entrata.

91
00:06:32,920 --> 00:06:37,090
Quindi, questa è una classe di animazione supportata da Bootstrap.

92
00:06:37,090 --> 00:06:40,340
Inoltre, applico questa classe chiamata show.

93
00:06:40,340 --> 00:06:43,770
La classe show specifica essenzialmente

94
00:06:43,770 --> 00:06:48,425
che questo particolare contenuto deve essere mostrato quando la pagina viene prima renderizzata.

95
00:06:48,425 --> 00:06:52,870
Quindi, applicherà la classe show solo al primo riquadro delle schede,

96
00:06:52,870 --> 00:06:56,640
i restanti riquadri delle schede non avranno applicata la classe show.

97
00:06:56,640 --> 00:07:00,910
E l'ultima classe che ho intenzione di applicare è attiva perché questo è

98
00:07:00,910 --> 00:07:07,190
il riquadro delle schede che verrà visualizzato nella pagina quando la pagina viene renderizzata per la prima volta.

99
00:07:07,190 --> 00:07:10,095
Inoltre, affinché la navigazione funzioni,

100
00:07:10,095 --> 00:07:12,760
ho bisogno di dare questo un e ID,

101
00:07:12,760 --> 00:07:19,340
e dal momento che ho usato l'hashtag Peter per il contenuto di navigazione della scheda,

102
00:07:19,340 --> 00:07:23,705
quindi ho intenzione di applicare l'ID come Peter qui.

103
00:07:23,705 --> 00:07:31,680
E così, quando questo è fatto riferimento in un link lì con l'hashtag Peter,

104
00:07:31,680 --> 00:07:34,740
questo è il riquadro corrispondente a cui mi riferisco.

105
00:07:34,740 --> 00:07:39,885
Ora, quello che ho intenzione di fare è copiare questo div da lì.

106
00:07:39,885 --> 00:07:49,010
E poi ho intenzione di applicare questo div alle informazioni del secondo leader aziendale,

107
00:07:49,010 --> 00:07:55,255
tranne che per questo dovrei applicare solo il pannello delle schede e adattarlo.

108
00:07:55,255 --> 00:07:58,730
Lo spettacolo e attivo non dovrebbero essere applicati per i restanti tre.

109
00:07:58,730 --> 00:08:03,820
E il documento qui dovrebbe essere Danny per il secondo.

110
00:08:03,820 --> 00:08:08,190
Ho intenzione di copiare semplicemente questo codice,

111
00:08:08,190 --> 00:08:13,460
e poi incollarlo per il terzo leader aziendale qui.

112
00:08:13,460 --> 00:08:20,955
E poi così il pannello scheda e il terzo è Agumbe.

113
00:08:20,955 --> 00:08:23,795
E l'ultimo, di

114
00:08:23,795 --> 00:08:27,235
nuovo, lo incollo,

115
00:08:27,235 --> 00:08:31,640
e poi l'ID dovrebbe essere cambiato in Alberto,

116
00:08:31,640 --> 00:08:34,280
e chiudere questo div qui.

117
00:08:34,280 --> 00:08:39,580
Quindi, questo div per l'ultimo dovrebbe essere chiuso a quel punto.

118
00:08:39,580 --> 00:08:45,355
E questo dovrebbe occuparsi dei quattro pannelli a schede di cui ho bisogno.

119
00:08:45,355 --> 00:08:50,725
Entrando e indentando questo contenuto, in

120
00:08:50,725 --> 00:08:53,490
modo che io sia soddisfatto,

121
00:08:53,490 --> 00:08:56,245
la mia ossessione è soddisfatta lì.

122
00:08:56,245 --> 00:09:01,805
Ok, questo completa l'organizzazione del contenuto della scheda.

123
00:09:01,805 --> 00:09:04,600
Ora, salviamo il cambiamento e andiamo a dare

124
00:09:04,600 --> 00:09:09,030
un'occhiata veloce a ciò che la pagina web sembra ora.

125
00:09:09,330 --> 00:09:11,480
Andando alla nostra pagina web,

126
00:09:11,480 --> 00:09:19,680
ora si vede che la nostra pagina web mostra solo il contenuto corrispondente al loro CEO.

127
00:09:19,680 --> 00:09:22,825
Se passi a uno degli altri,

128
00:09:22,825 --> 00:09:26,415
vedrai che vengono visualizzate le informazioni corrispondenti.

129
00:09:26,415 --> 00:09:32,290
E notare come queste informazioni si affievoliscono quando si seleziona quel particolare utente.

130
00:09:32,290 --> 00:09:35,400
Ma, naturalmente, se sei soddisfatto di questo,

131
00:09:35,400 --> 00:09:37,890
allora va bene, possiamo fermarci a questo punto.

132
00:09:37,890 --> 00:09:45,360
Ma vorrei definire bene una vera scheda intorno a questo.

133
00:09:45,360 --> 00:09:50,370
Quindi, questo è dove ho intenzione di applicare alcuni attributi CSS,

134
00:09:50,370 --> 00:09:53,540
proprietà a questa particolare scheda qui, in

135
00:09:53,540 --> 00:09:55,660
modo che sia una

136
00:09:55,660 --> 00:09:58,290
struttura di schede bella e pulita che viene definita lì.

137
00:09:58,290 --> 00:10:03,590
Quindi, creiamo alcune proprietà CSS per questo.

138
00:10:03,590 --> 00:10:06,855
L' ultimo passaggio, passando a styles.css.

139
00:10:06,855 --> 00:10:09,555
Dopo l'inverso della barra di navigazione,

140
00:10:09,555 --> 00:10:15,530
introdurrò le classi CSS per il contenuto della scheda,

141
00:10:15,530 --> 00:10:18,010
quindi specificherò per il contenuto della scheda,

142
00:10:18,010 --> 00:10:29,565
border-left: 1px DDD solido.

143
00:10:29,565 --> 00:10:48,195
E ho intenzione di applicare lo stesso per bordo-destra e in basso.

144
00:10:48,195 --> 00:10:51,310
Non ho bisogno di applicare in alto perché la parte superiore è

145
00:10:51,310 --> 00:10:55,585
già governata dalla navigazione delle schede.

146
00:10:55,585 --> 00:11:00,250
E poi lasciami dare un padding di 10 pixel tutto intorno,

147
00:11:00,250 --> 00:11:02,990
e quindi salvare le modifiche.

148
00:11:02,990 --> 00:11:07,450
Andiamo a dare un'occhiata alla nostra pagina web dopo questo.

149
00:11:07,450 --> 00:11:09,980
Tornando alla nostra pagina,

150
00:11:09,980 --> 00:11:11,395
ora vedi una

151
00:11:11,395 --> 00:11:14,920
struttura simile a una scheda bella e pulita che viene creata.

152
00:11:14,920 --> 00:11:18,355
In modo che quando si naviga a ciascuno di essi,

153
00:11:18,355 --> 00:11:24,695
le informazioni corrispondenti vengono visualizzate in modo appropriato nella propria scheda.

154
00:11:24,695 --> 00:11:28,905
Questo completa questo esercizio in cui abbiamo esaminato

155
00:11:28,905 --> 00:11:33,120
l'uso della navigazione a schede per la nostra pagina web.

156
00:11:33,120 --> 00:11:39,435
E poi abbiamo visto come possiamo creare la navigazione scheda e racchiudere altri contenuti.

157
00:11:39,435 --> 00:11:46,200
Questo è anche un buon momento per fare un commento Git con le schede dei messaggi.