1
00:00:03,460 --> 00:00:11,430
Le fisarmoniche sono uno di quegli strumenti fastidiosi che alcuni di voi hanno già visto.

2
00:00:11,430 --> 00:00:16,020
Ha uno di quei soffietti con una tastiera

3
00:00:16,020 --> 00:00:20,940
qui sotto e poi si soffiano e poi si suona la musica con i tasti lì.

4
00:00:20,940 --> 00:00:23,645
E non a tutti piace.

5
00:00:23,645 --> 00:00:28,740
Ne sono abbastanza sicuro. Ma senza offesa per i suonatori di fisarmonica.

6
00:00:28,740 --> 00:00:34,650
Le fisarmoniche nel bootstrap sono di sicuro molto interessanti.

7
00:00:34,650 --> 00:00:39,380
Vedremo come applichiamo le fisarmoniche per essere in grado di rivelare e

8
00:00:39,380 --> 00:00:44,580
nascondere i contenuti nella nostra pagina web in questo esercizio.

9
00:00:44,580 --> 00:00:51,300
Tornando a About Us alla pagina HTML dove abbiamo avuto le informazioni sulla leadership aziendale.

10
00:00:51,300 --> 00:00:56,960
Ora, ho intenzione di sostituire la navigazione superiore con una navigazione basata su fisarmonica.

11
00:00:56,960 --> 00:01:03,175
Ho intenzione di rimuovere questo UL che definisce completamente il termine navigazione.

12
00:01:03,175 --> 00:01:08,320
E poi disegneremo la fisarmonica attorno al contenuto che abbiamo gia'.

13
00:01:08,320 --> 00:01:13,700
Quindi, eliminiamo questo UL che contiene la navigazione della scheda in modo che vengano lasciati

14
00:01:13,700 --> 00:01:20,160
con solo questa parte che è racchiusa all'interno del pannello superiore e il contenuto superiore.

15
00:01:20,160 --> 00:01:22,115
Quindi, andremo a modificare questo.

16
00:01:22,115 --> 00:01:23,740
Andando a questo div qui,

17
00:01:23,740 --> 00:01:33,225
rimuoverò questa classe da lì e poi applico l'id come fisarmonica.

18
00:01:33,225 --> 00:01:40,060
Abbiamo bisogno di questo id in seguito per essere in grado di creare la fisarmonica che div,

19
00:01:40,060 --> 00:01:43,175
che contiene questo contenuto è ancora in atto lì.

20
00:01:43,175 --> 00:01:46,545
Quindi, il contenuto principale è ora cambiato in fisarmonica.

21
00:01:46,545 --> 00:01:49,745
Ora, ognuno di questi contenuti qui, lo

22
00:01:49,745 --> 00:01:53,460
convertiremo in una

23
00:01:53,460 --> 00:01:59,080
struttura basata su carta lì in modo che possano rivelare il contenuto in

24
00:01:59,080 --> 00:02:02,360
ognuna di quelle carte in modo da vedermi usare la scheda e

25
00:02:02,360 --> 00:02:09,220
le classi del corpo della carta lì per racchiudere questo contenuto.

26
00:02:09,220 --> 00:02:12,595
Ora, andando nel contenuto effettivo qui,

27
00:02:12,595 --> 00:02:16,905
inizierò ad applicare la classe di carte qui con il div lì.

28
00:02:16,905 --> 00:02:21,900
Quindi, diremo, «scheda classe div» e

29
00:02:21,900 --> 00:02:29,890
poi chiudiamo il div lì e poi questo contenuto va nel div lì.

30
00:02:29,890 --> 00:02:34,110
Ora, qui dentro, entreremo e creeremo

31
00:02:34,110 --> 00:02:41,610
un div con la classe «intestazione della carta».

32
00:02:42,030 --> 00:02:45,280
Vi mostrerò per uno di loro e poi

33
00:02:45,280 --> 00:02:48,425
ripeteremo questo processo anche per i restanti tre.

34
00:02:48,425 --> 00:02:57,480
Quindi, diremo, «scheda rotolo intestazione carta» e poi «id peterhead».

35
00:02:57,480 --> 00:03:04,335
Ho intenzione di prendere questo h3 da qui sotto,

36
00:03:04,335 --> 00:03:10,265
tagliarlo fuori e poi incollarlo nel pannello della scheda.

37
00:03:10,265 --> 00:03:14,815
Quindi, questo h3 che definisce il nome

38
00:03:14,815 --> 00:03:18,945
della persona di leadership aziendale viene tagliato dall'

39
00:03:18,945 --> 00:03:24,310
interno del pannello scheda e poi spostato nell'intestazione della carta qui.

40
00:03:24,310 --> 00:03:29,060
Questo fungera' da mio aiuto alla navigazione.

41
00:03:29,060 --> 00:03:35,425
Ora, a questo h3, ho intenzione di applicare una classe chiamata mb-0.

42
00:03:35,425 --> 00:03:37,920
Quindi, questo è mb-0 qui.

43
00:03:37,920 --> 00:03:41,260
Ora, questo nome stesso,

44
00:03:41,260 --> 00:03:44,840
ho intenzione di racchiudere questo dentro e un a,

45
00:03:44,840 --> 00:03:49,300
quindi andrò alla riga successiva e poi dire,

46
00:03:49,300 --> 00:03:56,650
«un interruttore dati» e

47
00:03:56,650 --> 00:04:00,845
l'interruttore dati dirà, «collasso».

48
00:04:00,845 --> 00:04:06,025
Quindi, ora, vedi che stai usando il plugin di collasso.

49
00:04:06,025 --> 00:04:09,440
Quindi, abbiamo questo h3 di chiusura lì.

50
00:04:09,440 --> 00:04:12,630
Quindi, ho intenzione di spostarlo sulla riga successiva

51
00:04:12,630 --> 00:04:17,400
qui e poi ho intenzione di chiudere il tag a proprio lì.

52
00:04:17,400 --> 00:04:25,265
Quindi, con questo il tag A ora racchiude il nome del CEO qui dentro.

53
00:04:25,265 --> 00:04:31,285
E poi il tag h3 ovviamente chiude l'h3 in cima e poi questo è

54
00:04:31,285 --> 00:04:37,525
all'interno del div che è l'intestazione della carta di classe.

55
00:04:37,525 --> 00:04:43,950
Quindi, questo forma la struttura dell'intestazione per il mio div fisarmonica.

56
00:04:43,950 --> 00:04:46,915
Andando ora al pannello scheda qui sotto,

57
00:04:46,915 --> 00:04:54,050
ho intenzione di cambiare questa classe da pannello scheda dissolvenza a collassare.

58
00:04:54,050 --> 00:05:01,455
Quindi questo sarebbe un plugin di collasso che sarà utile per la nostra fisarmonica

59
00:05:01,455 --> 00:05:05,680
e anche rimuoverò questa classe attiva

60
00:05:05,680 --> 00:05:10,075
per questo e l'id sarà lasciato come peter per questo.

61
00:05:10,075 --> 00:05:18,375
E poi dirai, «genitore dei dati» e specificherai fisarmonica.

62
00:05:18,375 --> 00:05:24,960
Capisci perché abbiamo dato l'id della fisarmonica al div che racchiude tutti questi contenuti.

63
00:05:24,960 --> 00:05:28,010
Quindi, questo è il modo per specificare che questo farà

64
00:05:28,010 --> 00:05:31,720
parte della fisarmonica che stai costruendo lì.

65
00:05:31,720 --> 00:05:34,420
Quindi, è per questo che i dati genitori fisarmonica.

66
00:05:34,420 --> 00:05:37,930
Ora, il contenuto all'interno di questo pannello

67
00:05:37,930 --> 00:05:42,340
a schede, lo racchiuderò all'interno del div con

68
00:05:42,340 --> 00:05:48,460
il corpo della scheda di classe

69
00:05:48,920 --> 00:05:54,125
e chiuderò quel div qui,

70
00:05:54,125 --> 00:05:57,790
e quindi rientri questo contenuto lì.

71
00:05:57,790 --> 00:06:03,440
Salviamo le modifiche e poi andiamo a dare un'occhiata alla nostra pagina web su questo momento.

72
00:06:03,440 --> 00:06:08,735
Andando alla nostra pagina web ora si nota che nella leadership aziendale,

73
00:06:08,735 --> 00:06:16,550
il nome del CEO è evidenziato qui nell'intestazione della carta qui.

74
00:06:16,550 --> 00:06:19,150
E poi il contenuto è qui sotto.

75
00:06:19,150 --> 00:06:25,830
Ora, creeremo i restanti tre in basso e poi li racchiuderemo tutti lì dentro.

76
00:06:25,830 --> 00:06:30,485
Ripeterò la stessa struttura per i restanti.

77
00:06:30,485 --> 00:06:34,405
Quindi, avrò la carta con l'intestazione della carta,

78
00:06:34,405 --> 00:06:39,075
e l'intestazione della carta racchiuderà il nome della persona in questo modo.

79
00:06:39,075 --> 00:06:40,730
Quindi, praticamente seguirai

80
00:06:40,730 --> 00:06:45,060
la stessa struttura per i restanti tre pezzi di contenuto.

81
00:06:45,060 --> 00:06:49,190
Quindi, facciamo le modifiche e poi torneremo a rivedere il codice.

82
00:06:49,190 --> 00:06:51,185
Tornando al codice,

83
00:06:51,185 --> 00:06:54,405
ora vedi che per i restanti tre,

84
00:06:54,405 --> 00:06:57,880
noti che sto ancora usando la carta qui

85
00:06:57,880 --> 00:07:01,535
con l'intestazione della carta qui e h3 con il mb-0.

86
00:07:01,535 --> 00:07:07,590
Questo è all'interno della classe di intestazione della carta div lì e poi giù sotto

87
00:07:07,590 --> 00:07:10,790
la classe solo come collasso e poi con l'id

88
00:07:10,790 --> 00:07:14,445
e poi il corpo della carta che racchiude la P lì.

89
00:07:14,445 --> 00:07:18,745
Stessa cosa con i restanti due.

90
00:07:18,745 --> 00:07:20,700
Quindi, con questo cambiamento,

91
00:07:20,700 --> 00:07:26,030
queste tre informazioni sui leader aziendali resteranno

92
00:07:26,030 --> 00:07:29,675
crollate, ma le informazioni scarperate di Peter Pan

93
00:07:29,675 --> 00:07:33,445
saranno rivelate quando il primo renderizza la pagina web.

94
00:07:33,445 --> 00:07:36,050
Quindi, con questo cambiamento, ora,

95
00:07:36,050 --> 00:07:39,710
questo frammento di codice è ovviamente disponibile nelle

96
00:07:39,710 --> 00:07:44,090
istruzioni che seguono qui quindi non c'è bisogno di preoccuparsi troppo.

97
00:07:44,090 --> 00:07:49,865
Puoi sempre fare riferimento a questo per assicurarti di averlo fatto correttamente.

98
00:07:49,865 --> 00:07:52,495
Quindi, salviamo le modifiche.

99
00:07:52,495 --> 00:07:54,740
Tornando alla nostra pagina web,

100
00:07:54,740 --> 00:07:57,430
ora vedi la fisarmonica costruita qui.

101
00:07:57,430 --> 00:08:03,125
Quindi, si vede che le prime informazioni sui leader aziendali sono visualizzate qui.

102
00:08:03,125 --> 00:08:06,190
I restanti tre sono crollati in questo momento.

103
00:08:06,190 --> 00:08:11,790
Quindi, questo è il motivo per l'uso del plugin di collasso e anche il motivo per spostare

104
00:08:11,790 --> 00:08:18,275
il nome del leader aziendale nel titolo della carta.

105
00:08:18,275 --> 00:08:21,035
Vedo che verrà visualizzato in questo modo.

106
00:08:21,035 --> 00:08:25,150
Ora, cliccando su uno qualsiasi di essi ora si nota che quando si fa clic su

107
00:08:25,150 --> 00:08:29,785
quel contenuto verrà rivelato, ma i restanti tre sono nascosti.

108
00:08:29,785 --> 00:08:32,315
Quindi, questo è il comportamento della fisarmonica qui.

109
00:08:32,315 --> 00:08:36,245
Quindi con questo, completiamo questo esercizio.

110
00:08:36,245 --> 00:08:42,630
Questo è un buon momento per fare un git commit con la fisarmonica del messaggio..