1
00:00:00,242 --> 00:00:04,459
[MUSIC]

2
00:00:04,459 --> 00:00:09,590
Parliamo ora di un plugin molto utile in Bootstrap chiamato come il Collapse.

3
00:00:09,590 --> 00:00:14,110
Abbiamo visto la sua applicazione nella barra di navigazione in precedenza.

4
00:00:14,110 --> 00:00:19,050
Rivisiteremo quel codice e daremo una rapida occhiata in modo più dettagliato.

5
00:00:19,050 --> 00:00:21,910
Un componente correlato è chiamato come la fisarmonica.

6
00:00:21,910 --> 00:00:26,310
La Fisarmonica fa uso del plugin Collapse per il suo funzionamento.

7
00:00:26,310 --> 00:00:30,100
E lo vedremo in dettaglio nell'esercizio che segue.

8
00:00:31,740 --> 00:00:36,570
Il plugin Collapse fornisce un modo semplice per rivelare e

9
00:00:36,570 --> 00:00:38,487
nascondere contenuti sulla tua pagina web.

10
00:00:40,030 --> 00:00:45,307
Questo rivelare e nascondere il contenuto è solitamente attivato

11
00:00:45,307 --> 00:00:50,186
dall'utente cliccando su un pulsante o un link nella tua pagina web.

12
00:00:50,186 --> 00:00:55,001
Ora vedrai molti luoghi in cui il tipo di

13
00:00:55,001 --> 00:01:00,006
comportamento Collapse è molto ben sfruttato per mostrare il contenuto.

14
00:01:00,006 --> 00:01:04,760
Rivisiteremo la nostra barra di navigazione per guardare il plugin Collapse in azione, e

15
00:01:04,760 --> 00:01:07,590
poi vedremo anche un esempio di Fisarmonica successivo.

16
00:01:08,630 --> 00:01:14,381
Tornando alla nostra pagina web, ricorderete che quando abbiamo creato la barra di navigazione

17
00:01:14,381 --> 00:01:19,948
nella nostra pagina web per schermi extra-piccoli, la barra di navigazione è stata compressa e

18
00:01:19,948 --> 00:01:24,346
poi è stata rivelata quando abbiamo cliccato sul pulsante qui.

19
00:01:24,346 --> 00:01:29,670
Ora questo è un esempio dell'uso del plugin Collapse qui.

20
00:01:29,670 --> 00:01:34,890
Quando guardiamo il codice, vedremo che in realtà applichiamo il plugin Collapse

21
00:01:34,890 --> 00:01:38,440
al div che contiene questa barra di navigazione.

22
00:01:39,530 --> 00:01:41,534
Dando un'occhiata al codice per la

23
00:01:41,534 --> 00:01:46,320
nostra barra di navigazione che abbiamo progettato in precedenza, hai visto che qui,

24
00:01:46,320 --> 00:01:51,012
all'interno del contenitore, abbiamo creato questo pulsante che viene visualizzato per

25
00:01:51,012 --> 00:01:56,850
le dimensioni dello schermo extra-piccole utilizzando la classe navbar-toggler.

26
00:01:56,850 --> 00:01:59,440
Guarda il div che segue questo pulsante qui.

27
00:01:59,440 --> 00:02:02,600
Per il div che segue questo pulsante, abbiamo usato la classe di compressione.

28
00:02:02,600 --> 00:02:06,495
Quindi questo è l'uso del plugin Collapse nella nostra barra di navigazione.

29
00:02:06,495 --> 00:02:10,627
Quindi ciò che questo crea è che questo particolare contenuto, la

30
00:02:10,627 --> 00:02:15,095
nostra barra di navigazione che è racchiusa all'interno di questo div, verrà compresso per

31
00:02:15,095 --> 00:02:17,065
le dimensioni dello schermo extra-piccole.

32
00:02:17,065 --> 00:02:22,080
E poi insieme al plugin Collapse, questo pulsante che appare

33
00:02:22,080 --> 00:02:26,589
lì attiverà la visualizzazione e il nascondiglio di questa barra di navigazione qui.

34
00:02:26,589 --> 00:02:32,582
Ecco perché quando guardi il pulsante, vedrai che proprio lì,

35
00:02:32,582 --> 00:02:38,171
forniamo l'attributo data-toggle con il collasso qui,

36
00:02:38,171 --> 00:02:42,350
e poi il data-target come #Navbar qui.

37
00:02:42,350 --> 00:02:47,960
E nota che l'id per questo div che abbiamo applicato qui è Navbar.

38
00:02:47,960 --> 00:02:53,030
Quindi stiamo specificando essenzialmente che questo pulsante fungerà da

39
00:02:53,030 --> 00:02:59,460
meccanismo di attivazione per questo plugin Collapse per lavorare su questo div qui.

40
00:02:59,460 --> 00:03:03,387
Quindi questo è un uso del plugin Collapse nella tua pagina web.

41
00:03:04,590 --> 00:03:10,840
Inoltre, vedremo l'altro componente, che è la Fisarmonica in Bootstrap.

42
00:03:10,840 --> 00:03:12,410
Come si comporta una fisarmonica?

43
00:03:12,410 --> 00:03:16,110
Quindi questo è un esempio di una fisarmonica che stiamo andando a costruire nell'esercizio

44
00:03:16,110 --> 00:03:16,928
che segue.

45
00:03:16,928 --> 00:03:21,520
Quindi qui, vedrete che ho sostituito la navigazione a schede che abbiamo

46
00:03:21,520 --> 00:03:25,846
fatto nell'esercizio precedente utilizzando una fisarmonica qui.

47
00:03:25,846 --> 00:03:30,480
Il modo in cui funziona la Fisarmonica è che un pezzo di contenuto viene rivelato e

48
00:03:30,480 --> 00:03:32,020
i restanti tre sono nascosti.

49
00:03:32,020 --> 00:03:35,640
Quindi questo usa il plugin Collapse per questo scopo.

50
00:03:35,640 --> 00:03:41,920
Quindi, quando clicchi sul nome di uno di questi altri leader aziendali,

51
00:03:41,920 --> 00:03:45,490
i dettagli di quel leader aziendale vengono rivelati e

52
00:03:45,490 --> 00:03:47,280
i restanti tre vengono nascosti.

53
00:03:47,280 --> 00:03:50,270
Quindi questo è il comportamento della fisarmonica qui.

54
00:03:50,270 --> 00:03:52,700
Se hai familiarità con una fisarmonica,

55
00:03:52,700 --> 00:03:57,000
lo strumento musicale, sai come funzionano i soffietti della fisarmonica.

56
00:03:57,000 --> 00:04:02,530
Quindi questo, in un certo senso, si comporta come il soffietto della fisarmonica.

57
00:04:02,530 --> 00:04:08,996
Quindi questo è il motivo per cui questo componente è indicato come una fisarmonica in Bootstrap.

58
00:04:08,996 --> 00:04:17,280
Un altro esempio del plugin Collapse in uso è sul tuo sito web del corso.

59
00:04:17,280 --> 00:04:19,350
Quindi, se vai sul tuo sito web del corso, e

60
00:04:19,350 --> 00:04:23,360
poi vai nel contenuto del tuo sito web del corso e

61
00:04:23,360 --> 00:04:28,730
inizia a visualizzare il contenuto qui, noterai che sul lato sinistro,

62
00:04:28,730 --> 00:04:32,940
hai una navigazione che entra in foto sul lato sinistro.

63
00:04:32,940 --> 00:04:35,390
Quindi questa è la navigazione lì.

64
00:04:35,390 --> 00:04:40,510
Quindi, quando si fa clic su ciascuno di essi, si nota come il contenuto qui

65
00:04:40,510 --> 00:04:45,980
è nascosto e rivelato facendo clic su ciascuno di questi link lì.

66
00:04:45,980 --> 00:04:51,246
Quindi questo è come il plugin Collapse che abbiamo visto in Bootstrap.

67
00:04:51,246 --> 00:04:57,780
Anche se, ovviamente, la pagina Coursera in realtà non usa Bootstrap.

68
00:04:57,780 --> 00:05:02,306
Passeremo al prossimo esercizio in cui vedremo come costruiamo

69
00:05:02,306 --> 00:05:07,010
la Fisarmonica per mostrare le nostre informazioni sulla leadership aziendale.

70
00:05:07,010 --> 00:05:13,120
[ MUSIC]