In questo esercizio esploreremo la navigazione basata su schede di Bootstrap, il
supporto di Bootstrap per le schede
e il modo in cui le schede possono essere utilizzate per organizzare i contenuti sulla tua pagina web.
E come è possibile navigare da una scheda a un'altra scheda,
e quindi rivelare il contenuto in ognuna di queste schede nella pagina Web.
Ora, qui mi vedrai usare la classe nav,
e quindi qualificarla ulteriormente usando la classe nav tabs.
Lo stesso approccio può essere utilizzato anche con le pillole nav
che abbiamo guardato nella lezione precedente.
Per iniziare con questo esercizio,
andremo nella pagina aboutus.html.
E poi proprio lì,
dove abbiamo il contenuto della leadership aziendale lì,
dopo l'h2, ho intenzione di introdurre la navigazione a schede.
Quindi, questo è dove ho intenzione di fare uso di ul con le schede nav di classe.
Quindi, avete visto che in precedenza, quando abbiamo costruito la barra di navigazione,
abbiamo anche usato l'ul all'interno della barra di navigazione per specificare gli elementi di navigazione lì.
Approccio simile qui, tranne che qui
useremo l'ul con il nav e le schede nav qui.
Quindi, all'interno di questo ul,
costruiremo la struttura di navigazione per questa navigazione a schede qui.
Quindi, lì dentro, userò l'elemento della lista con la classe nav-item
e costruirò la navigazione attorno a questa voce della lista.
Quindi, questo introduce il primo elemento nelle mie schede di navigazione.
Subito dopo, lì dentro introdurrò un a con la classe nav-link attivo.
Quindi, questo, come vedi,
se ricordi dal modo in cui usiamo l'ul con l'elemento nav e il link nav.
Nella barra di navigazione,
stiamo vedendo un approccio simile qui.
Quindi, nav-item attivo, e poi href.
Quindi, questo sarebbe un riferimento al riquadro delle schede in seguito,
che avrebbe l'ID di peter lì,
e il ruolo è la scheda per questo
e la scheda di commutazione dei dati.
Quindi, puoi vedere il componente javascript di Bootstrap che entra in foto qui.
E poi diro' Peter Pan,
e poi chiudero' il cartellino li'.
Quindi, questo completerebbe la nostra prima scheda nella nostra navigazione a schede.
Lasciami completare il resto del codice,
e poi torneremo e rivediamo il resto del codice lì.
Quindi, qui puoi vedere che ho completato questa struttura di navigazione qui.
Allo stesso modo, sto definendo le voci di elenco per i restanti leader aziendali liberi qui.
Ora questo, lasciami salvare il resto.
E poi andiamo a dare un'occhiata veloce alla pagina web.
Passando alla pagina web,
ora si vede come utilizzando le schede nav nav abbiamo creato
questa struttura di navigazione proprio sotto la leadership aziendale qui.
Quindi, questa struttura di navigazione significa che dovrei essere in grado di navigare e
visualizzare ciascuno di essi in modo più dettagliato facendo clic su questo.
Quindi, ecco come funziona la navigazione a schede qui.
Ora, ovviamente, il contenuto di ognuno di loro dovrebbe
mostrare in modo appropriato solo i dettagli di quella persona qui.
Quindi, questo è dove
entrerà in vigore l'uso del contenuto a schede e le classi del pannello delle schede.
E ci accingiamo a racchiudere questo contenuto usando quello.
E poi legalo a quelli di navigazione,
navigazione a schede qui,
in modo che solo le informazioni di
un singolo leader aziendale vengano visualizzate sullo schermo alla volta.
Una volta completata la configurazione di quella navigazione a schede,
allora ci sposteremo verso il basso nel contenuto reale qui.
E poi ora, ho intenzione di riorganizzare questo contenuto in quattro pannelli a schede separati,
ognuno dei quali verrà mostrato quando
il riquadro delle schede corrispondente è selezionato nella navigazione a schede.
Quindi, per iniziare,
la prima cosa che faremo è entrare e separare
ognuno di questi quattro leader aziendali nelle quattro parti, in
modo che sia facile per me vedere cosa sto facendo.
Quindi, all'H3,
li taglierò in quattro parti diverse,
e poi potremo lavorare con queste.
Quindi, ora ne ho uno, due, tre, quattro.
Quindi, questo contenuto ora deve essere racchiuso all'interno di un div
con il contenuto della scheda di classe.
Quindi, tutto questo contenuto che abbiamo per
i quattro diversi leader aziendali dovrebbe essere racchiuso all'interno di un div tab-contenuto lì.
Quindi, ora l'ho racchiuso all'interno del contatto della scheda.
Ora, per ognuno di essi,
ho bisogno di creare un altro div con il pannello della scheda classi e alcune classi aggiuntive.
E poi organizza questo contatto.
Quindi, iniziamo con il primo.
Quindi, per il primo leader aziendale,
introdurrò un nuovo div con ruolo come tabpanel.
Quindi, questo funge da pannello a schede che verrà visualizzato
quando viene selezionata la prima navigazione a schede.
E la classe corrispondente che devo applicare è tab-pane.
Quindi, questo è il riquadro delle schede,
il contenuto effettivo che è contenuto in lì.
E poi un'altra classe che applico è dissolvenza.
Quindi, la classe fade consente a questo contenuto di dissolvenza in entrata.
Quindi, questa è una classe di animazione supportata da Bootstrap.
Inoltre, applico questa classe chiamata show.
La classe show specifica essenzialmente
che questo particolare contenuto deve essere mostrato quando la pagina viene prima renderizzata.
Quindi, applicherà la classe show solo al primo riquadro delle schede,
i restanti riquadri delle schede non avranno applicata la classe show.
E l'ultima classe che ho intenzione di applicare è attiva perché questo è
il riquadro delle schede che verrà visualizzato nella pagina quando la pagina viene renderizzata per la prima volta.
Inoltre, affinché la navigazione funzioni,
ho bisogno di dare questo un e ID,
e dal momento che ho usato l'hashtag Peter per il contenuto di navigazione della scheda,
quindi ho intenzione di applicare l'ID come Peter qui.
E così, quando questo è fatto riferimento in un link lì con l'hashtag Peter,
questo è il riquadro corrispondente a cui mi riferisco.
Ora, quello che ho intenzione di fare è copiare questo div da lì.
E poi ho intenzione di applicare questo div alle informazioni del secondo leader aziendale,
tranne che per questo dovrei applicare solo il pannello delle schede e adattarlo.
Lo spettacolo e attivo non dovrebbero essere applicati per i restanti tre.
E il documento qui dovrebbe essere Danny per il secondo.
Ho intenzione di copiare semplicemente questo codice,
e poi incollarlo per il terzo leader aziendale qui.
E poi così il pannello scheda e il terzo è Agumbe.
E l'ultimo, di
nuovo, lo incollo,
e poi l'ID dovrebbe essere cambiato in Alberto,
e chiudere questo div qui.
Quindi, questo div per l'ultimo dovrebbe essere chiuso a quel punto.
E questo dovrebbe occuparsi dei quattro pannelli a schede di cui ho bisogno.
Entrando e indentando questo contenuto, in
modo che io sia soddisfatto,
la mia ossessione è soddisfatta lì.
Ok, questo completa l'organizzazione del contenuto della scheda.
Ora, salviamo il cambiamento e andiamo a dare
un'occhiata veloce a ciò che la pagina web sembra ora.
Andando alla nostra pagina web,
ora si vede che la nostra pagina web mostra solo il contenuto corrispondente al loro CEO.
Se passi a uno degli altri,
vedrai che vengono visualizzate le informazioni corrispondenti.
E notare come queste informazioni si affievoliscono quando si seleziona quel particolare utente.
Ma, naturalmente, se sei soddisfatto di questo,
allora va bene, possiamo fermarci a questo punto.
Ma vorrei definire bene una vera scheda intorno a questo.
Quindi, questo è dove ho intenzione di applicare alcuni attributi CSS,
proprietà a questa particolare scheda qui, in
modo che sia una
struttura di schede bella e pulita che viene definita lì.
Quindi, creiamo alcune proprietà CSS per questo.
L' ultimo passaggio, passando a styles.css.
Dopo l'inverso della barra di navigazione,
introdurrò le classi CSS per il contenuto della scheda,
quindi specificherò per il contenuto della scheda,
border-left: 1px DDD solido.
E ho intenzione di applicare lo stesso per bordo-destra e in basso.
Non ho bisogno di applicare in alto perché la parte superiore è
già governata dalla navigazione delle schede.
E poi lasciami dare un padding di 10 pixel tutto intorno,
e quindi salvare le modifiche.
Andiamo a dare un'occhiata alla nostra pagina web dopo questo.
Tornando alla nostra pagina,
ora vedi una
struttura simile a una scheda bella e pulita che viene creata.
In modo che quando si naviga a ciascuno di essi,
le informazioni corrispondenti vengono visualizzate in modo appropriato nella propria scheda.
Questo completa questo esercizio in cui abbiamo esaminato
l'uso della navigazione a schede per la nostra pagina web.
E poi abbiamo visto come possiamo creare la navigazione scheda e racchiudere altri contenuti.
Questo è anche un buon momento per fare un commento Git con le schede dei messaggi.