[MUSIC]
Parliamo ora di un plugin molto utile in Bootstrap chiamato come il Collapse.
Abbiamo visto la sua applicazione nella barra di navigazione in precedenza.
Rivisiteremo quel codice e daremo una rapida occhiata in modo più dettagliato.
Un componente correlato è chiamato come la fisarmonica.
La Fisarmonica fa uso del plugin Collapse per il suo funzionamento.
E lo vedremo in dettaglio nell'esercizio che segue.
Il plugin Collapse fornisce un modo semplice per rivelare e
nascondere contenuti sulla tua pagina web.
Questo rivelare e nascondere il contenuto è solitamente attivato
dall'utente cliccando su un pulsante o un link nella tua pagina web.
Ora vedrai molti luoghi in cui il tipo di
comportamento Collapse è molto ben sfruttato per mostrare il contenuto.
Rivisiteremo la nostra barra di navigazione per guardare il plugin Collapse in azione, e
poi vedremo anche un esempio di Fisarmonica successivo.
Tornando alla nostra pagina web, ricorderete che quando abbiamo creato la barra di navigazione
nella nostra pagina web per schermi extra-piccoli, la barra di navigazione è stata compressa e
poi è stata rivelata quando abbiamo cliccato sul pulsante qui.
Ora questo è un esempio dell'uso del plugin Collapse qui.
Quando guardiamo il codice, vedremo che in realtà applichiamo il plugin Collapse
al div che contiene questa barra di navigazione.
Dando un'occhiata al codice per la
nostra barra di navigazione che abbiamo progettato in precedenza, hai visto che qui,
all'interno del contenitore, abbiamo creato questo pulsante che viene visualizzato per
le dimensioni dello schermo extra-piccole utilizzando la classe navbar-toggler.
Guarda il div che segue questo pulsante qui.
Per il div che segue questo pulsante, abbiamo usato la classe di compressione.
Quindi questo è l'uso del plugin Collapse nella nostra barra di navigazione.
Quindi ciò che questo crea è che questo particolare contenuto, la
nostra barra di navigazione che è racchiusa all'interno di questo div, verrà compresso per
le dimensioni dello schermo extra-piccole.
E poi insieme al plugin Collapse, questo pulsante che appare
lì attiverà la visualizzazione e il nascondiglio di questa barra di navigazione qui.
Ecco perché quando guardi il pulsante, vedrai che proprio lì,
forniamo l'attributo data-toggle con il collasso qui,
e poi il data-target come #Navbar qui.
E nota che l'id per questo div che abbiamo applicato qui è Navbar.
Quindi stiamo specificando essenzialmente che questo pulsante fungerà da
meccanismo di attivazione per questo plugin Collapse per lavorare su questo div qui.
Quindi questo è un uso del plugin Collapse nella tua pagina web.
Inoltre, vedremo l'altro componente, che è la Fisarmonica in Bootstrap.
Come si comporta una fisarmonica?
Quindi questo è un esempio di una fisarmonica che stiamo andando a costruire nell'esercizio
che segue.
Quindi qui, vedrete che ho sostituito la navigazione a schede che abbiamo
fatto nell'esercizio precedente utilizzando una fisarmonica qui.
Il modo in cui funziona la Fisarmonica è che un pezzo di contenuto viene rivelato e
i restanti tre sono nascosti.
Quindi questo usa il plugin Collapse per questo scopo.
Quindi, quando clicchi sul nome di uno di questi altri leader aziendali,
i dettagli di quel leader aziendale vengono rivelati e
i restanti tre vengono nascosti.
Quindi questo è il comportamento della fisarmonica qui.
Se hai familiarità con una fisarmonica,
lo strumento musicale, sai come funzionano i soffietti della fisarmonica.
Quindi questo, in un certo senso, si comporta come il soffietto della fisarmonica.
Quindi questo è il motivo per cui questo componente è indicato come una fisarmonica in Bootstrap.
Un altro esempio del plugin Collapse in uso è sul tuo sito web del corso.
Quindi, se vai sul tuo sito web del corso, e
poi vai nel contenuto del tuo sito web del corso e
inizia a visualizzare il contenuto qui, noterai che sul lato sinistro,
hai una navigazione che entra in foto sul lato sinistro.
Quindi questa è la navigazione lì.
Quindi, quando si fa clic su ciascuno di essi, si nota come il contenuto qui
è nascosto e rivelato facendo clic su ciascuno di questi link lì.
Quindi questo è come il plugin Collapse che abbiamo visto in Bootstrap.
Anche se, ovviamente, la pagina Coursera in realtà non usa Bootstrap.
Passeremo al prossimo esercizio in cui vedremo come costruiamo
la Fisarmonica per mostrare le nostre informazioni sulla leadership aziendale.
[ MUSIC]