Bentornata in questa lezione, vi mostrerò uno dei componenti più importanti e ampiamente usati
in tutto il Bootstrap, che è l'NFR, così potete vedere effettivamente su come ottenere Boucek dotcom.
Usano abbastanza componenti della barra proprio qui.
Ne utilizzeremo anche uno sulla nostra applicazione del campo Yelp e ridimensionando la barra di navigazione.
Si noti quanto sia reattivo e quindi si noti anche non appena tocchi TAB di quale taglia e dimensione mobile
si ottiene questo bel hamburger.
Quindi lavoreremo a tutto questo in questa lezione.
Ma inizieremo più semplice.
La prima cosa che dobbiamo fare è andare ai componenti e andare alla barra di navigazione e prima di andare molto più avanti ho
creato un nuovo file solo perché scriveremo un bel po 'di codice.
Il vecchio stava diventando ingombrante.
Lo chiamo Naff Bar H T M L.
All'interno di tutto ciò che hanno è il link al bootstrap che non cambia il titolo qui.
Lo chiamo semplicemente Nav barre di bootstrap.
Proprio così.
Ora andiamo ai documenti e diamo un'occhiata alla barra di navigazione predefinita.
Quindi questo esempio mostra tutte le caratteristiche importanti in cui possiamo avere un link di marca.
Possiamo avere altri collegamenti che possiamo avere abbandonato sui menu.
Possiamo avere un modulo barra di navigazione e un pulsante possiamo avere cose che sono sul lato destro cose che
sono sul lato sinistro.
Questo mostra davvero tutto.
È il lavello della cucina delle barre di bootstrap e di conseguenza il markup è un po 'lungo.
Lavoreremo con tutti questi pezzi entro la fine di questo video.
Ma voglio iniziare più semplice e inizierò mostrandoti il ​​modo più semplice per fare un numero.
Quindi abbiamo bisogno di creare un elemento nav e che l'elemento NAV abbia bisogno di avere due classi, vogliamo barra di navigazione
e barra di navigazione e possiamo iniziare con il salvataggio predefinito di Dasch.
E ora andiamo a guardare il file nel browser e aggiorniamo.
Potete vedere che spero che capiti e screencast c'è un bar abbastanza debole che passa in
alto così che questo è il modo in cui inizializziamo la barra NF.
Ora riempia con alcuni contenuti.
La prima cosa che daremo un'occhiata è come possiamo aggiungere questo marchio qui.
Fondamentalmente il nome della tua azienda.
Nella maggior parte dei casi.
E questo usa l'intestazione della barra di navigazione e poi all'interno dell'intestazione NFR usiamo un marchio della barra di navigazione.
Quindi iniziamo aggiungendo che la classe div è uguale all'intestazione del cruscotto della barra di navigazione e quindi al suo interno aggiungeremo nel marchio della barra
di navigazione che è un tag di ancoraggio.
Di solito quando si fa clic sul nome della società, si ritorna alla pagina iniziale.
Quindi lo faremo qui tag di ancoraggio e inizieremo con un traffico uguale a Thorpes quindi non
ci porterà ovunque.
La classe sarà uguale al marchio di barra di navigazione e creeremo solo un nome di società.
Vediamo se ho preso una tazza di caffè intorno a me, quindi andiamo con il caffè.
Ma per renderlo davvero un vero startup, abbiamo bisogno di cambiare un poco l'ortografia.
OK Alex.
Abbastanza buono per me.
Caffè con K.
Andiamo a dare un'occhiata.
Aggiorna e ora abbiamo il nostro marchio della barra NAV che è un link.
Lo clicco.
Non mi porta da nessuna parte in questo momento ma alla fine le nostre applicazioni lo faranno in
modo che quando si fa clic sul nome della società, si ritorna alla home page successiva.
Vediamo se possiamo aggiungere altri link come il contatto su.
Registrati per registrarti.
Tutti quei link comuni nella barra.
Iniziamo aggiungendo il link della pagina qui.
Quindi torneremo indietro e al di fuori dell'intestazione della barra di navigazione faremo un altro div in questo div
per raccogliere tutti i contenuti almeno sul lato sinistro della nostra barra NAV.
Quindi abbiamo l'intestazione e poi avremo del contenuto e poi se vogliamo qualcosa sul lato destro
avremo un altro div che ha un'altra classe.
Quindi la classe qui.
In realtà due vogliamo nav e dash dash dash nav.
Non chiedetemi di nominare la loro barra di navigazione nav cruscotto.
È una delle grandi critiche del bootstrap è che è un po 'brutto e a volte non
è molto significativo.
è stato creato in risposta alla semantica mancanza di significato del bootstrap se si chiamerà UI semantica.
E c'è in realtà un framework CSSA che
E questo è uno che mi piace davvero tanto.
E ho discusso l'insegnamento.
Ma alla fine non è così diffuso che non ci sono ancora tutorial fantastici.
Quindi torniamo al nostro diff qui.
Classe nav bar nav e nav classe entrambi.
E poi per ogni elemento che vogliamo su questo NFR abbiamo bisogno di aggiungere un alleato e poi all'interno della Y se vogliamo collegare
abbiamo appena avuto un tag di ancoraggio.
Quindi questo andrà da nessuna parte.
Ancora una volta e questo sarà per la pagina About.
E se torno indietro e aggiorni ora abbiamo un link a circa aggiungiamone un altro al contatto salva indietro.
Ora abbiamo due link ora andiamo avanti e aggiungere qualcosa sul lato destro della pagina.
Aggiungiamo due link uno per registrarsi o registrarsi e un altro per accedere sul lato destro della barra
per farlo.
è più convenzionale usarlo, lo farai allo stesso modo, ma vorrai avere alleati invece di un pozzo
anche se funzioneranno bene con un div poco più senso di essere al posto di un UL.
Abbiamo bisogno di un altro contenitore qui e in realtà invece di usare div
Quindi aggiungeremo un altro UL e questo sarà Nav. dash barra di navigazione nav e quindi barra di
navigazione.
Destra.
E dobbiamo assicurarci di scriverlo correttamente altrimenti quella classe non avrà effetto.
Quindi, ciò che questo farà diventerà un nuovo gruppo di contenuti per il lato destro di tale barra di navigazione.
E ora abbiamo solo bisogno di riempirlo.
Quindi aggiungerò due link entrambi in senso orario.
Il primo non andrà da nessuna parte e dirà la registrazione e poi ne avremo un altro che dice solo
il login.
Diamo un'occhiata.
Aggiorna la pagina e puoi vedere che abbiamo dei contenuti sulla destra.
Tuttavia è giusto andare oltre il limite e correggere che possiamo aggiungere in un contenitore a una barra sufficiente proprio
come usiamo il contenitore in precedenza per aggiungere una certa spaziatura al nostro contenuto principale.
Potremmo aggiungere uno invece di una barra di navigazione.
Quindi metto tutto nella barra dei neph invece di un contenitore.
Quindi la classe è uguale al contenitore.
Basta spostarlo verso il basso.
Assicurati che tutto sia rientrato correttamente.
Eccoci.
Proviamoci.
Bello.
Quindi ora tutto è centrato bene e correttamente.
Ti mostrerò se ho aggiunto il container all'esterno del nav e hanno inserito l'intera barra di navigazione all'interno.
Beh, guarda cosa succede
Ora, se fossi abbastanza fresco, in realtà ho tagliato e me ne sono andato solo per la strada.
Quindi container lo farà a qualunque cosa ne mettiamo dentro.
E in questo caso vogliamo il contenitore all'interno della barra di navigazione in modo che non
costringa l'effettiva parte di sé, ma limita il contenuto al suo interno.
OK.
Quindi, contenitore abbiamo il nostro Hetter, abbiamo la roba a sinistra e abbiamo alcuni contenuti sulla destra in modo che
tu possa vedere qui.
Ora, che passo un po 'e vai e prendi questa barra di navigazione di base o la
barra di navigazione predefinita che hanno nei documenti e copiamo l'intera cosa e la metterò appena sotto sono ora lontano fanno un po'
di spazio.
Un sacco di commenti per renderlo più chiaro.
Barra di navigazione predefinita.
E diamo un'occhiata a questo aggiornamento.
Quindi è questa barra di navigazione qui e ci sono alcune cose che voglio evidenziare.
Uno è che abbiamo abbandonato i menu ma in realtà non funzionano.
E anche quando ridimensioniamo la finestra otteniamo qui il menu dell'hamburger.
Quei collegamenti vanno via.
Il modulo scompare e per rivelarli dobbiamo cliccare qui.
Ma neanche questo funziona.
Quindi iniziamo a farlo funzionare e poi parleremo di tutti questi diversi pezzi e di ciò
che fanno per farlo funzionare.
Dobbiamo andare e includere il file javascript bootstrap.
Quindi, se torniamo ai documenti di bootstrap Faremo clic su download.
C'è anche un file javascript di cui abbiamo bisogno, che è proprio qui.
Userò la versione Cdn ma anche nella cartella che scarichi.
Si chiama semplicemente bootstrap.
Sì.
O la versione ridotta al minimo ha riavviato Mencius.
E aggiungiamolo e lo faremo in fondo al nostro corpo e salveremo.
E so che non abbiamo parlato di javascript.
Non sai cos'è una sceneggiatura e quale fonte qui non ha importanza.
Lo inseriremo in bootstrap.
E ora il nostro aggiornamento.
Possiamo risolvere un piccolo problema che ti mostrerò qui ci dice che javascript bootstraps richiede
una query.
Non preoccuparti di cosa sia e di come sia arrivato a questo messaggio.
Ma voglio solo mostrartelo in modo che tu veda il vero messaggio che riceviamo.
Abbiamo bisogno di richiedere una query J di cui non abbiamo nemmeno parlato.
Ma è abbastanza facile andare a prendere.
Non dobbiamo scrivere javascript.
Non devi conoscere alcun javascript.
Dobbiamo solo includerlo.
Quindi tutto quello che dobbiamo fare è cercare le query di Jay CDN che sono sul codice che Jay
dot com e quaggiù dovranno selezionare la versione più recente e copiare questo URL.
Questo è il file di Querrey e poi torneremo qui.
Aggiungeremo un altro di questi tag di script.
Fondamentalmente copia questo codice esatto.
In effetti lo farò per semplificare la duplicazione di quella riga esatta e cambiare questo URL per essere la
query jey che sei.
Se tutto il resto fallisce, puoi semplicemente scriverlo.
Non è poi così male se si è io, ma ho capito cercando Jay Mail CDN e si salverà e
questo deve venire prima del file javascript di bootstraps perché si basa su una query.
Quindi ancora una volta non preoccuparti troppo di come funziona la query di Jay.
Tutto questo succederà tra qualche minuto.
Ma per ottenere il massimo dal bootstrap e in particolare dalle barre di navigazione e dal menu a discesa.
Abbiamo solo bisogno di avere queste due linee ogni volta che la usiamo, quindi torneremo subito e aggiorneremo.
Prima di tutto vengono rilasciati sui menu ora funziona come puoi vedere ora abbiamo menu a tendina.
Non ne parleremo in questo video, ma mentre ridimensiono e ottengo quell'hamburger.
L'hamburger ora funziona quando faccio clic su di esso.
Attiva quel materiale nascosto.
Quindi il modo in cui funziona proprio qui è questo piccolo breakpoint proprio qui dove tutto
questo contenuto si nasconde e tutto ciò che vediamo è l'intestazione e quel pulsante.
poi, quando clicchiamo sul pulsante, tutti i contenuti precedentemente nascosti riappaiono. Facciamolo funzionare.
E
Ora per noi.
Ma stiamo andando a fare una versione molto meno complicata in cui vogliamo solo nascondere
questi quattro link in modo che quando ridimensioniamo questi quattro link sono nascosti e quindi molto velocemente verranno visualizzati.
Per iniziare, dai un'occhiata a come si realizza in questa versione predefinita questo mostro gigante
di una barra di navigazione.
E indicherò semplicemente la linea importante qui.
ciò che inseriamo all'interno di questo div verrà compresso quando raggiungiamo la dimensione del dispositivo mobile in modo che non sia il pulsante per noi.
Div categ crollo barra di navigazione comprimi tutto
Non eseguirà la commutazione nel riapparire in clandestinità ma nasconderà qualsiasi contenuto venga inserito al suo
interno quando raggiungiamo il tablet e le dimensioni del dispositivo mobile.
Quindi lo copiamo e abbiamo solo bisogno di avvolgere il contenuto che vogliamo
nascondere e vogliamo nasconderlo qui.
Questi due Juelz Quindi i quattro collegamenti che vogliamo nascondere quando raggiungiamo quella dimensione dello schermo più piccola.
Quindi aggiungi il tag di chiusura e salva e c'è una riga qui e questo è importante e ci arriverò
in un attimo.
Non ci influenzerà ancora, ma se ci aggiorniamo.
Vedrai.
Ora quando ridimensiono c'è un punto proprio qui dove tutto quel contenuto all'interno del div
crollo scompare.
Ora non riappare.
Non prendiamo questo hamburger.
Non otteniamo un clic su nulla ma è crollato è andato via.
E questo perché abbiamo aggiunto in questa linea qui div classe collapse nav bar collapse.
La prossima cosa che dobbiamo fare è aggiungere l'hamburger ed è un bel po 'di codice.
Purtroppo è ancora molto meglio che se dovessimo farlo da soli.
Ma l'hamburger è tutto questo proprio qui.
Quindi lo copierò e lo incollerò su all'interno di un pisolino o Hetter prima del nostro caffè incontattato.
E salveremo tornerò a quello che fa.
Facciamo solo il refresh.
E ora, se ridimensiono, prendo l'hamburger.
Eccoci.
Ora lascia che ti spieghi un po 'come funziona.
Quindi c'è un pulsante e poi all'interno di quel pulsante ci sono tre span e ognuno è
responsabile della creazione di una di queste barre.
Quindi non è un'immagine che stiamo vedendo qui in realtà è ogni squadra che sta facendo questo piccolo
spandino che viene stilizzato in quelle strette barre per fare quell'hamburger.
E poi, per quanto riguarda la visualizzazione e l'occultamento del contenuto quando facciamo clic su
di esso, ciò che è veramente importante è che abbiamo questo attributo target di dati e tutto ciò che è impostato nel nostro esempio B-S.
Ora per il nostro collasso una rete di esempio di bootstrap per il nostro club, quindi cambiamo semplicemente in sì.
Nav. demo proprio così.
Quindi dobbiamo cambiare l'ID del contenuto che vogliamo effettivamente collassare che vogliamo
mostrare e nascondere.
Quindi lo cambierò per abbinare vs nav demo.
Nota una differenza importante.
Non stiamo aggiungendo l'Arctic Thor Quindi è proprio come CSI quando selezioniamo qualcosa con C dice che dobbiamo usare
Octa Thorpe per identificare un ID in modo che lasciamo l'ID come solo il testo il nome.
Ora se la demo è qui, aggiungiamo che a Thorpe salverà l'aggiornamento.
Ora, se ridimensiono, prendiamo l'hamburger e loro cliccano sopra e funziona per rendere visibili e nascondere.
Grande.
L'ultima cosa che ti mostrerò è che se spostiamo qualcosa al di fuori di questo collasso.
Quindi prendiamo questi link qui.
L'account o il about e il contatto e spostiamo quelli proprio qui fuori dal div al collasso e
aggiorno posso vedere che in realtà non collassano rimangono lì e poi clicco su quello e gli altri due invece
che sul collasso sono attivati.
Ora non sto dicendo che questo sembra buono, ma illustra l'importanza di quel div crollo. per i diversi collegamenti a che sono sulla destra o sulla sinistra.
Quindi, qualunque cosa sia accaduta nel lato del collasso o qualunque cosa abbiamo nel nostro caso
Tutti crolleranno ogni volta che raggiungiamo quella dimensione mobile più piccola.
E poi per farli mostrare di nuovo, clicchiamo su questo pulsante qui e quel
pulsante ha un attributo di destinazione dei dati e qualsiasi ID a cui questo corrisponde sarà nascosto e mostrato quando clicchiamo su quello.
E questa sembra essere questa idea qui.
OK, quindi una specie di maratona.
Un sacco di cose che servono per creare una barra di navigazione bootstrap.
nostro file e analizzandone alcuni pezzi.
Ma di nuovo il modo in cui ci siamo arrivati ​​è stato semplicemente copiando questo nel
Ed è così
che ne ricaviamo abbastanza ogni volta che prendiamo quel codice di esempio e capiamo di quali pezzi abbiamo bisogno e andiamo da lì.