Le fisarmoniche sono uno di quegli strumenti fastidiosi che alcuni di voi hanno già visto.
Ha uno di quei soffietti con una tastiera
qui sotto e poi si soffiano e poi si suona la musica con i tasti lì.
E non a tutti piace.
Ne sono abbastanza sicuro. Ma senza offesa per i suonatori di fisarmonica.
Le fisarmoniche nel bootstrap sono di sicuro molto interessanti.
Vedremo come applichiamo le fisarmoniche per essere in grado di rivelare e
nascondere i contenuti nella nostra pagina web in questo esercizio.
Tornando a About Us alla pagina HTML dove abbiamo avuto le informazioni sulla leadership aziendale.
Ora, ho intenzione di sostituire la navigazione superiore con una navigazione basata su fisarmonica.
Ho intenzione di rimuovere questo UL che definisce completamente il termine navigazione.
E poi disegneremo la fisarmonica attorno al contenuto che abbiamo gia'.
Quindi, eliminiamo questo UL che contiene la navigazione della scheda in modo che vengano lasciati
con solo questa parte che è racchiusa all'interno del pannello superiore e il contenuto superiore.
Quindi, andremo a modificare questo.
Andando a questo div qui,
rimuoverò questa classe da lì e poi applico l'id come fisarmonica.
Abbiamo bisogno di questo id in seguito per essere in grado di creare la fisarmonica che div,
che contiene questo contenuto è ancora in atto lì.
Quindi, il contenuto principale è ora cambiato in fisarmonica.
Ora, ognuno di questi contenuti qui, lo
convertiremo in una
struttura basata su carta lì in modo che possano rivelare il contenuto in
ognuna di quelle carte in modo da vedermi usare la scheda e
le classi del corpo della carta lì per racchiudere questo contenuto.
Ora, andando nel contenuto effettivo qui,
inizierò ad applicare la classe di carte qui con il div lì.
Quindi, diremo, «scheda classe div» e
poi chiudiamo il div lì e poi questo contenuto va nel div lì.
Ora, qui dentro, entreremo e creeremo
un div con la classe «intestazione della carta».
Vi mostrerò per uno di loro e poi
ripeteremo questo processo anche per i restanti tre.
Quindi, diremo, «scheda rotolo intestazione carta» e poi «id peterhead».
Ho intenzione di prendere questo h3 da qui sotto,
tagliarlo fuori e poi incollarlo nel pannello della scheda.
Quindi, questo h3 che definisce il nome
della persona di leadership aziendale viene tagliato dall'
interno del pannello scheda e poi spostato nell'intestazione della carta qui.
Questo fungera' da mio aiuto alla navigazione.
Ora, a questo h3, ho intenzione di applicare una classe chiamata mb-0.
Quindi, questo è mb-0 qui.
Ora, questo nome stesso,
ho intenzione di racchiudere questo dentro e un a,
quindi andrò alla riga successiva e poi dire,
«un interruttore dati» e
l'interruttore dati dirà, «collasso».
Quindi, ora, vedi che stai usando il plugin di collasso.
Quindi, abbiamo questo h3 di chiusura lì.
Quindi, ho intenzione di spostarlo sulla riga successiva
qui e poi ho intenzione di chiudere il tag a proprio lì.
Quindi, con questo il tag A ora racchiude il nome del CEO qui dentro.
E poi il tag h3 ovviamente chiude l'h3 in cima e poi questo è
all'interno del div che è l'intestazione della carta di classe.
Quindi, questo forma la struttura dell'intestazione per il mio div fisarmonica.
Andando ora al pannello scheda qui sotto,
ho intenzione di cambiare questa classe da pannello scheda dissolvenza a collassare.
Quindi questo sarebbe un plugin di collasso che sarà utile per la nostra fisarmonica
e anche rimuoverò questa classe attiva
per questo e l'id sarà lasciato come peter per questo.
E poi dirai, «genitore dei dati» e specificherai fisarmonica.
Capisci perché abbiamo dato l'id della fisarmonica al div che racchiude tutti questi contenuti.
Quindi, questo è il modo per specificare che questo farà
parte della fisarmonica che stai costruendo lì.
Quindi, è per questo che i dati genitori fisarmonica.
Ora, il contenuto all'interno di questo pannello
a schede, lo racchiuderò all'interno del div con
il corpo della scheda di classe
e chiuderò quel div qui,
e quindi rientri questo contenuto lì.
Salviamo le modifiche e poi andiamo a dare un'occhiata alla nostra pagina web su questo momento.
Andando alla nostra pagina web ora si nota che nella leadership aziendale,
il nome del CEO è evidenziato qui nell'intestazione della carta qui.
E poi il contenuto è qui sotto.
Ora, creeremo i restanti tre in basso e poi li racchiuderemo tutti lì dentro.
Ripeterò la stessa struttura per i restanti.
Quindi, avrò la carta con l'intestazione della carta,
e l'intestazione della carta racchiuderà il nome della persona in questo modo.
Quindi, praticamente seguirai
la stessa struttura per i restanti tre pezzi di contenuto.
Quindi, facciamo le modifiche e poi torneremo a rivedere il codice.
Tornando al codice,
ora vedi che per i restanti tre,
noti che sto ancora usando la carta qui
con l'intestazione della carta qui e h3 con il mb-0.
Questo è all'interno della classe di intestazione della carta div lì e poi giù sotto
la classe solo come collasso e poi con l'id
e poi il corpo della carta che racchiude la P lì.
Stessa cosa con i restanti due.
Quindi, con questo cambiamento,
queste tre informazioni sui leader aziendali resteranno
crollate, ma le informazioni scarperate di Peter Pan
saranno rivelate quando il primo renderizza la pagina web.
Quindi, con questo cambiamento, ora,
questo frammento di codice è ovviamente disponibile nelle
istruzioni che seguono qui quindi non c'è bisogno di preoccuparsi troppo.
Puoi sempre fare riferimento a questo per assicurarti di averlo fatto correttamente.
Quindi, salviamo le modifiche.
Tornando alla nostra pagina web,
ora vedi la fisarmonica costruita qui.
Quindi, si vede che le prime informazioni sui leader aziendali sono visualizzate qui.
I restanti tre sono crollati in questo momento.
Quindi, questo è il motivo per l'uso del plugin di collasso e anche il motivo per spostare
il nome del leader aziendale nel titolo della carta.
Vedo che verrà visualizzato in questo modo.
Ora, cliccando su uno qualsiasi di essi ora si nota che quando si fa clic su
quel contenuto verrà rivelato, ma i restanti tre sono nascosti.
Quindi, questo è il comportamento della fisarmonica qui.
Quindi con questo, completiamo questo esercizio.
Questo è un buon momento per fare un git commit con la fisarmonica del messaggio..