Abbiamo appena completato una discussione sull'importanza di fornire la navigazione nel tuo sito web.
Abbiamo anche esaminato diversi modi in cui possiamo fornire la navigazione in un sito web.
Ora è il momento per noi di guardare il bootstrap e esaminare i componenti
che bootstrap fornisce che ci permettono di aggiungere la navigazione ai nostri siti web.
Due componenti importanti di bootstrap sono Navbar e Breadcrumbs.
Esamineremo entrambi in questo esercizio.
Iniziamo aggiungendo una barra di navigazione nella parte superiore della nostra pagina web.
Possiamo farlo usando il componente Navbar che fa parte di bootstrap.
Allora, come iniziamo?
Andiamo al corpo della nostra pagina HTML.
Quindi qui, ho index.HTML aperto.
E in alto,
ho intenzione di aggiungere un elemento usando quel tag HTML nav.
Ora il tag HTML di nav è destinato a fornire la navigazione.
Quindi, prendiamo il vantaggio di questo tag e costruiamo la nostra barra di navigazione usando il tag nav.
Quindi ora, in alto,
ho intenzione di aggiungere questo tag,
mettere il nav e costruire la barra di navigazione attorno a questo tag di navigazione.
Quindi, una volta aggiunto questo tag nav in index.HTML,
allora possiamo andare avanti e quindi applicare le classi bootstraps a questo tag nav.
Quindi, applico la barra di navigazione della classe.
Quindi, la classe navbar in bootstrap mi consente di creare una barra di navigazione.
Ci sono molti modi diversi di personalizzare la barra di navigazione,
che diamo un'occhiata come classi aggiuntive che aggiungeranno a questo tag di navigazione.
Insieme alla barra di navigazione,
aggiungiamo anche la classe successiva che è navbar-dark.
Ora voglio che la mia barra di navigazione sia di colore scuro,
con uno sfondo più scuro.
Perché questo va molto bene con il sito web che ho appena progettato.
Possiamo avere navbar-luce,
che è una barra di navigazione di colore più chiaro.
Quindi, puoi scegliere di utilizzare uno di essi nella tua pagina web.
La prossima classe che userò è la classe navbar-expand-sm.
Ora, e anche, specificherò la dimensione dello schermo sotto
la quale entra in esistenza il comportamento commutabile.
Ora, quando dico navbar-expand-sm,
ciò significa che per schermi piccoli ed extra piccoli,
questa barra di navigazione diventerà una barra di navigazione attivabile.
Significato che, sarà compresso in quelle dimensioni dello schermo.
Imparerai presto come funziona,
quando guarderemo a come possiamo aggiungere
il plugin di compressione alla barra di navigazione per abilitare quel tipo di comportamento.
Quindi, insieme a uno sm attivabile della barra di navigazione,
applicherò inizialmente un colore di sfondo alla barra di navigazione,
che sarebbe bg-primario.
Ora bg-primary è quel colore primario definito nel tuo bootstrap.
Per impostazione predefinita, questa è una versione di colore blu che viene utilizzata dai bootstraps.
Quindi inizierò con quello come il mio colore primario.
Più tardi, personalizzerò il colore della mia barra di navigazione usando alcune classi CSS.
Inoltre, applicherò anche
un'altra classe chiamata fixed-top a quella barra di navigazione.
Ciò che fixed-top fa, è che corregge la barra di navigazione nella parte superiore
della finestra del browser in cui viene visualizzata questa pagina web.
Anche quando si scorre la pagina bagnata,
la barra di navigazione era fino a rimanere nella parte superiore della pagina.
Puoi semplicemente usare il fondo fisso per fissare
la barra di navigazione nella parte inferiore della finestra del browser o puoi dire, in alto statico.
E inoltre, non puoi usare questa classe.
Se non lo usi, la
barra di navigazione scorrerà anche quando la tua pagina web viene spostata verso l'alto.
Nel mio sito Web, scelgo di mantenere la barra di navigazione fissa nella parte superiore della pagina.
Ci sono molte altre opzioni che sono
disponibili che si possono trovare nella documentazione bootstraps.
Quindi questo è un esempio dell'uso della barra di navigazione.
Ora inoltre, all'interno della barra di navigazione,
racchiuderò qualsiasi contenuto
verrà utilizzato nella barra di navigazione all'interno di un contenitore.
Quindi questo è dove userò un elemento div qui
e applicherò la classe contenitore a questo elemento div.
Quindi, qualunque cosa sia racchiusa dentro,
sarà limitata alla stessa larghezza del resto della mia pagina Web.
Come ricorderai, ho usato la classe contenitore per
definire l'ampiezza del contenuto nella mia pagina web,
quindi applicherò lo stesso anche alla mia barra di navigazione, in
modo che le informazioni della barra di navigazione vengano
visualizzate nella stessa larghezza del resto della mia pagina web.
È possibile scegliere di non utilizzare la classe contenitore nella barra di navigazione, nel qual caso,
il contenuto della barra di navigazione si diffonderà su tutta la larghezza dello schermo.
All' interno della barra di navigazione,
ho intenzione di aggiungere una classe a un tag qui.
Questa classe che chiamo come navbar-brand,
mi consente di visualizzare alcune informazioni come informazioni di branding nella mia barra di navigazione.
Quindi, se hai una società, ad esempio,
puoi visualizzare il nome della tua azienda o
il logo della tua azienda utilizzando il marchio navbar in
modo che venga visualizzato in modo visibile nella barra di navigazione.
Ovviamente, quando visiti molti siti web,
vedrai che il nome della società è da qualche parte visibile
nella barra di navigazione di quel sito web.
Quindi, lasciami aggiungere quel marchio navbar.
Questo può anche essere collegato alla home page del tuo sito web.
Quindi, lo lascio li'.
Nelle pagine rimanenti del mio sito web,
aggiungerò semplicemente l'href per riportarmi alla pagina index.HTML,
che è la homepage.
E qui dentro aggiungo il nome del mio ristorante.
Salviamo le modifiche e andiamo a dare
un'occhiata veloce allo stato attuale della mia barra di navigazione.
Andando alla pagina web nel browser, è
ora possibile vedere dove la barra di navigazione è visibile sulla mia pagina web nel browser.
La barra di navigazione è ora nella parte superiore della pagina e
puoi vedere che mentre scorro la mia pagina,
la barra di navigazione rimane ancora in alto perché ero abituato alla classe superiore fissa.
Puoi anche vedere
il marchio navbar-che mi permette di mostrare il nome del ristorante lì.
Più tardi lo sostituirò con il logo di questo ristorante.
Si nota che la barra di navigazione è parzialmente coperta nel Jumbotron.
Lo risolverai un po 'più tardi usando alcune personalizzazioni CSS.
La prossima cosa che ho intenzione di fare è aggiungere alcuni collegamenti alla mia barra di navigazione, in
modo che questi collegamenti mi condurranno alle altre pagine del mio sito web.
Allora, come facciamo?
Tornando a index.HTML,
ho intenzione di aggiungere un ul qui,
all'interno del quale ho intenzione di dichiarare
tutti i vari collegamenti che verranno visualizzati nella mia casella di navigazione.
Quindi questo ul a cui applicherò la classe come navbar-nav.
Quindi questa è la classe che mi aiuterà a definire
l'insieme di collegamenti che verranno inclusi nella mia barra di navigazione.
E questi collegamenti verranno visualizzati orizzontalmente all'interno della mia barra di navigazione.
La mr auto-class che ho applicato anche all'ul,
viene utilizzata per specificare il margine destro.
Quindi questa è una classe di utilità disponibile
in bootstrap che mi consente di specificare il margine destro.
Quindi, se dico, mr-auto,
ciò che significa è che sul lato destro,
il margine destro dovrebbe essere impostato il più possibile.
Quindi il che significa che il contenuto verrà spinto il più a sinistra
possibile all'interno della barra di navigazione.
All' interno di questo elenco non ordinato,
posso usare gli elementi
della lista per includere i vari collegamenti che faranno parte della mia barra di navigazione.
Quindi lì dentro, ho intenzione di aggiungere alcuni link lì
e inizierò specificando il primo lì con il link.
A ogni voce della lista nella barra di navigazione,
applicherai la classe come elemento di navigazione.
Ciò consente di visualizzare orizzontalmente queste voci di elenco come collegamenti nella mia barra di navigazione.
E poi qui dentro,
posso quindi usare il tag a per aggiungere
il link effettivo che farà parte della mia barra di navigazione.
Quindi dentro uso il tag a con
la classe nav-link e questo mi permette anche di usare l'href.
Attributo per definire il collegamento lì.
E il primo che includerò è Home.
Quindi, questo includerebbe un elemento chiamato Home in questa barra di navigazione.
Lasciami copiare e poi incollarlo.
E poi modificheremo alcuni di questi perché voglio
aggiungerne quattro diversi alla mia barra di navigazione.
Il primo è Home.
Il secondo sarebbe About.
Il terzo sarebbe Menu che ho intenzione di costruire come parte del prossimo corso.
E l'ultimo sarà Contatto.
Un tipico sito web aziendale avrebbe collegamenti come questo nella sua barra di navigazione.
Quindi con l'aggiunta di questi due,
ora quello che posso fare è
che possiamo identificare esplicitamente uno di questi link come il link attivo, il
che significa che quando sei su quella particolare pagina,
quel particolare link può essere evidenziato.
Quindi, per farlo, applicheremo qui la classe chiamata attiva a una di queste voci di elenco.
In questo caso, poiché questa è la pagina index.html,
sto applicando la classe attiva al link home lì.
Questo praticamente completa la mia barra di navigazione nella pagina index.HTML.
Una piccola cosa che vorrei risolvere qui è che il link Informazioni,
voglio collegarlo alla
pagina aboutus.HTML che abbiamo già incluso nel nostro sito web,
perché è lì che voglio che conduca.
Andiamo a dare un'occhiata veloce alla nostra barra di navigazione di questa parte.
Tornando alla nostra barra di navigazione,
è possibile vedere immediatamente il risultato di includere
tali elementi nella lista non ordinata lì.
Quindi, vedi Home,
Informazioni, Menu e Contatto lì,
e ognuno di essi è un link, ma questo è un elemento di navigazione qui.
E nota come la Home è evidenziata qui a causa dell'uso della classe attiva.
Quindi, se clicco su About,
dovrebbe portarmi al passo About.
Ecco, eccoci qui.
Ma mi rendo conto che non ho un modo per tornare indietro,
quindi il che significa che ho anche bisogno di consegnare questa barra di navigazione alla pagina aboutus.HTML.
Ci arriveremo in breve tempo.
Per ora, ho intenzione di navigare rapidamente utilizzando il pulsante Indietro del
mio browser per tornare alla mia pagina index.HTML.
Una cosa che volevo anche dimostrarti era come
questa barra di navigazione crollerà per schermi di dimensioni piccole ed extra piccole.
Quindi, accendiamo la vista usando la vista reattiva,
quindi lasciami andare al Galaxy S5.
E ho notato che quando uso il Galaxy S5 in questo modo,
puoi vedere che questo viene visualizzato prima di quanto stia già coprendo lo schermo.
Non e' questo il comportamento che voglio.
Voglio essere in grado di nasconderlo quando sto visualizzando questo su uno schermo piccolo ed extra piccolo.
E poi forse aggiungo un pulsante qui che posso usare
per attivare e disattivare la visualizzazione di questi link.
Hai visto queste cose nei siti web mobili.
Come lo facciamo in bootstrap?
Andiamo a quel passo dopo.
Tornando alla nostra barra di navigazione qui.
Permettetemi di aggiungere un pulsante lì,
che fungerà da interruttore per mostrare e nascondere
i miei collegamenti dalla mia barra di navigazione quando viene visualizzato su schermi extra intelligenti e piccoli.
Quindi, per aggiungere lì,
lasciami aggiungere un pulsante e applicare alcune classi a questo pulsante.
Parleremo di più sui pulsanti in bootstrap nella prossima lezione.
Ma per aggiungere un pulsante in bootstrap,
dovresti applicare la classe per questo particolare pulsante come navbar-toggler.
Quindi, questo è un navigatore.
Quindi, come suggerisce il nome,
stai già iniziando a capire cosa farà questo pulsante in questo caso.
E poi aggiungerei il tipo come pulsante per indicare che questo agisce come un pulsante.
E poi passa i dati come collasso.
Ora, questo attributo data-toggle che vedrai qui è in realtà
un utilizzo del componente JavaScript in bootstrap.
Stiamo andando a guardare a questo tipo di dati trattini bar tipo di attributi più nel prossimo modulo,
dove vedremo i componenti JavaScript bootstraps.
La barra di navigazione richiede uno di quei componenti JavaScript per essere in grado di
attivare e disattivare i miei collegamenti nella mia barra di navigazione, Quindi,
questo è il motivo per cui ho introdotto rapidamente questo concetto qui,
ma torneremo per esaminare
questo bootstrap componenti JavaScript più nel modulo successivo.
Quindi, il crollo dei dati e
quindi il target dei dati come #Navbar.
Ora, ho intenzione di introdurre un altro div con l'ID come barra di navigazione.
Quindi, quando specifico una data o un target #Navbar,
che si riferisce all'ID di quell'altro elemento che sarà
il target di questo particolare pulsante qui.
Quindi, questa è la parte che aggiungo in fondo.
E anche, voglio che il pulsante mostri qualcosa qui.
E in genere, quando vedi questo tipo di pulsanti nei siti web per dispositivi mobili,
conterrebbe linee libere lì, in
modo che viene tipicamente chiamato come l'icona Navbar-Toggle.
Quindi, includerò un'icona speciale
inclusa nel bootstrap, chiamata navbar-toggler icon.
Quindi, se applico questa classe al tag span,
allora questo introdurrà un'icona di navbar-toggler al mio pulsante qui.
Quindi, questo introduce un pulsante.
Vedremo come sembra tra un po'.
Ora, quando faccio clic su questo pulsante,
voglio essere in grado di mostrare e nascondere questi collegamenti.
Per consentirmi di farlo,
quello che farò è circondare questo ul con un div qui.
Quindi, ho intenzione di entrare e introdurre un div intorno a questo ul.
E a questo div,
applicherò la classe come collasso,
e poi navbar-collapse, e poi gli do un ID come barra di navigazione.
Ora, stai iniziando a vedere la correlazione tra
queste classi e l'ID e ciò che ho dichiarato nell'interruttore dati e nella destinazione dati.
Quindi, qui il target dati che specifico come #Navbar e quindi l'ID dato a questo div è barra di navigazione.
E specifico l'attivazione/disattivazione dei dati come collasso.
Collapse è uno dei componenti JavaScript bootstrap,
che vedremo più in dettaglio nel prossimo modulo.
Quindi, racchiudendo questo all'interno del div per schermi piccoli ed extra piccoli,
questo sarebbe nascosto per impostazione predefinita,
ma quando clicco sul pulsante,
il contenuto di questo div verrà rivelato sullo schermo.
Permettetemi anche di aggiungere un mr-auto al marchio navarbar-classe lì in modo da
introdurre automaticamente un margine destro sufficiente a questo marchio navbar.
Ora, andiamo a dare un'occhiata a questo nel nostro browser.
Andando al browser, ora puoi vedere come
la mia barra di navigazione è compressa su schermi di dimensioni piccole ed extra piccole.
E notate questo pulsante sul lato sinistro.
Quando faccio clic sul pulsante,
i collegamenti nella barra di navigazione vengono visualizzati e nascosti.
Questo è il comportamento che voglio per l'implementazione reattiva della mia barra di navigazione.
Se passo a uno
schermo normale e più grande, la barra di navigazione viene completamente visualizzata, inclusi i collegamenti.
Ma quando visualizzo la stessa cosa su uno schermo più piccolo come questo,
i collegamenti della barra di navigazione sono nascosti dietro
questo pulsante e quindi verranno attivati e disattivati facendo clic su quel pulsante.
Quindi questo è il comportamento reattivo che puoi
costruire nella barra di navigazione sul tuo sito web.
Ora che abbiamo completato la barra di navigazione sulla mia pagina index.HTML,
voglio essere in grado di introdurre la stessa barra di navigazione nella pagina aboutus.HTML.
Prima di arrivare, andiamo al piè di pagina qui.
E poi si nota che nel piè di pagina,
abbiamo questi collegamenti.
Voglio essere in grado di aggiornare questo link anche per puntare
a aboutus.HTML in modo che anche facendo clic sul collegamento nel mio piè di pagina,
andrei comunque alla pagina di informazioni.
Ora, tornando qui,
quello che farò è semplicemente copiare questo codice di questa barra di navigazione da qui.
E poi, vai alla pagina aboutus.HTML e poi incollalo nella mia pagina aboutus.HTML.
Non solo, ho bisogno di fare qualche aggiustamento a questo,
perché questo è ora nella pagina aboutus.HTML.
Quindi, ovviamente, ci sono alcune cose che devo aggiornare.
Innanzitutto, questo marchio navbar che dovrebbe riportarmi
alla mia home page dovrebbe ora essere aggiornato come index.HTML qui.
E poi, la voce di elenco qui ora la seconda della home page di nuovo,
voglio aggiornarla a index.HTML lì e poi il secondo link al about,
perché questa è la pagina aboutus.HTML,
ho intenzione di rimetterla a quell'hash lì e poi rimuoverò
la classe attiva dal primo e quindi applicare la classe attiva al secondo elemento,
perché questa è la pagina Informazioni su e quindi dovrebbe essere quella evidenziata.
Ancora una volta, andando al piè di pagina della pagina Informazioni.
Nel piè di pagina, eseguirò gli stessi aggiornamenti ai collegamenti qui in modo
che la home page mi riporti a index.HTML e quindi lasciami salvare le modifiche.
Quindi ora anche la mia pagina Informazioni su come viene aggiornata correttamente.
Andando al browser,
è ora possibile vedere che sono sulla mia Home Page e poi quando clicco sulla pagina su,
andrò alla pagina Informazioni su.
Nota come viene visualizzata la stessa barra di navigazione in
About Page, quindi devi essere evidenziato perché ho
applicato la classe attiva a quella e quindi posso
tornare alla mia Home Page facendo clic sul narvar-brand o sulla Home.
Quindi facciamo clic sul narvar-marca e siamo di nuovo nella nostra
principale o Home Page o index.HTML.
Quindi, ora la navigazione è impostata correttamente sia nella home page che nella pagina Informazioni.
Un paio di cose aggiuntive che ho intenzione di fare è applicare se vedi che
è la classe che posso cambiare il colore della mia barra di navigazione
e inoltre vorrei aggiungere
un breadcrumb a questa pagina Informazioni su e in modo che il breadcrumb mi dia anche un altro modo
di tornare alla mia Home Page e anche lo farà indica
la gerarchia nel mio sito web in cui mi trovo al momento.
Quindi facciamo questi due passi dopo.
Tornando a quell'editor in styles.css.
Ho intenzione di aggiungere un paio di altre classi qui.
Hai notato che la mia barra di navigazione nascondeva parte del jumbotron.
Per evitare
ciò, quello che ho intenzione di fare è al mio corpo,
ho intenzione di dare un padding di 50 pixel in
alto in modo che quei 50 pixel saranno lasciati per la barra di navigazione da coprire.
Ogni volta che si utilizza una barra di navigazione superiore fissa, è
una buona idea dare questo padding al corpo della
pagina web in modo che la navigazione non copra
l'elemento più in alto nel corpo della pagina web.
Quindi, i restanti che lascerò come
zero pixel e anche lo z-index per il mio corpo come zero.
Dalla tua conoscenza dei CSS capisci cosa fa lo z-index
e il prossimo che farò è
sovraccaricare la classe navbar-dark aggiungendo un altro colore per
la classe navbar e il colore che
sceglierò è 512DA8.
Questo è un colore viola scuro che sembra molto buono nel mio sito web.
Infatti, Se hai interesse dove ho trovato questi colori puoi visitare
www.android.com e poi cercare la loro documentazione per il design del materiale e lì,
hanno suggerimenti su come i colori possono essere utilizzati
nella tua applicazione Android, ma la stessa cosa vale anche per un sito web,
quindi è dove sono andato e ho selezionato questi colori da utilizzare nel mio sito web.
Quindi, applicando questo, ora quando lo
faccio, devo tornare alla mia pagina index.HTML e
quindi dalla barra di navigazione dovrei rimuovere questo bg-primario.
Altrimenti, il colore che ho suggerito nel CSS non verrà applicato a questo.
Allo stesso modo, vai alla pagina aboutus.HTML e quindi scorri fino
alla barra di navigazione e quindi rimuovi anche il bg-primario da quello.
Ora, mentre sono nella pagina aboutus.HTML,
lasciami introdurre un breadcrumb nel mio contenitore,
la prima riga del mio contenitore lì.
Quindi questo è dove il titolo About Us era
lì, quindi lì ho intenzione di entrare e introdurre un ol.
Sto solo usando il tag ol come un modo per introdurre il pangrattato.
Puoi usare anche un div per questo e funzionerà ancora bene.
Succede che l'esempio sulla documentazione di bootstraps abbia usato un ol così,
sto attenendosi al fatto che anche un semplice div funzionerà bene qui.
Quindi, io dico ol classe col-12 pangrattato.
Quindi le classi breadcrumb sono state applicate e
non il significato col-12 che ha allungato l'intero schermo.
E lì dentro, entrerò e aggiungo due voci della lista.
Ora vedi perché l'uso di ol è utile qui,
perché posso usare le voci di elenco per descrivere l'elemento breadcrumb.
Quindi, elemento breadcrumb qui,
quindi includo un elemento breadcrumb e poi dentro userò
il tag A per definire un collegamento alla mia Home Page.
Quindi dico, «A» e poi a questo A,
do l'href come index.HTML e poi
includo nel mio primo breadcrumb e poi dopo questo,
il prossimo che includerò è un altro elemento della lista e
il secondo elemento della lista applicherò la classe come elemento breadcrumb e attivo.
Quindi nota l'uso della classe attiva qui e poi dentro dirò «su di
noi» Non ho bisogno di un link qui perché sono già sulla pagina in
modo che non debba essere incluso per questa voce della lista.
Salviamo le modifiche,
in modo da poter vedere come il breadcrumb è stato introdotto in questa
particolare pagina About Us qui.
Andiamo a dare un'occhiata alla pagina web risultante.
Andando alla mia pagina web, ora puoi vedere che il colore della barra di navigazione
è ora cambiato in viola scuro che vengono introdotti
attraverso il CSS e questo sembra bello sullo schermo qui.
Dark Purple, seguito da un viola più chiaro e poi in
basso ancora più chiaro viola per il mio piè di pagina.
Beh, io non sono un designer,
ma questo è il meglio che ho potuto venire con in termini di aggiunta vicino ai siti web.
Come sapete dalla storia gli uomini sono daltonici.
Quindi abbiamo molto scarso gusto nei colori.
Se sei sposata tua moglie te lo ricordera' sicuramente.
Andiamo alla pagina Informazioni e vediamo come appare.
Quindi questa è la pagina About e nella pagina About puoi
vedere la barra di navigazione con il colore corretto
lì e notare il breadcrumb incluso nel About Us quaggiù.
Così si può vedere la casa che ti porta di nuovo alla pagina indice e
poi Chi siamo come hai visto abbiamo applicato link
attivo, classe attiva a questo.
Così è così che il About Us è display e la home page.
Quindi, questo è lo stile di breadcrumb predefinito usato
nel bootstrap e se clicco sulla home page tornerò alla mia home page.
Con questo completiamo questo esercizio su navbar e pangrattato.
Questo è un buon momento per fare un commit git con il messaggio «barra di navigazione e breadcumbs».