Questo video continueremo a disegnare il campo.
Aggiungeremo una barra di navigazione ad ogni singola pagina e quella barra di navigazione sarà abbastanza vuota per ora.
Ma alla fine avrà pulsanti come login e disconnessione registra tutte quelle funzionalità.
Ma fino ad allora inseriremo solo un testo segnaposto e poi modificheremo anche la
forma del nuovo campeggio perché al momento è in forma piuttosto approssimativa.
Quindi iniziamo il server e diamo un'occhiata a ciò che abbiamo.
Quindi, ecco la nostra pagina di destinazione.
Ecco la nostra visione di tutto il campo cambia la lista dei campeggi.
Sembra piuttosto okay.
Vogliamo una barra di navigazione qui.
Stessa cosa per aggiungere un nuovo campeggio.
Concentreremo il modulo e impileremo questi due input uno sopra l'altro piuttosto che farli
stare fianco a fianco.
Ma inizieremo con la barra di navigazione e lavoriamo sul modello del campeggio.
Quindi torneremo qui e apriremo il modello dei campeggi per iniziare.
markup e la nostra non sarà così lunga almeno per non cominciare quando non abbiamo tutti i pulsanti nel menu a discesa.
Aprirò la casella bootstrapped e passerò ai componenti e quindi alla barra di navigazione e
mi ritroverò su questa sezione tutto il tempo, anche se bootstrap rende davvero facile aggiungere la barra di navigazione
che puoi ancora vedere è un bel po 'di
Cominceremo in modo semplice e semplice, ma anche in questo caso ci sono ancora molte classi che dobbiamo ricordare.
Quindi non c'è da vergognarsi nel tirare su il bootstrap Darcs proprio come qualsiasi altra cosa in questa
classe che non dovresti vergognarti di cercare le cose.
Ma in particolare bootstrap a volte può essere solo un casino di queste classi ed elementi e
non c'è modo di farlo senza guardare i documenti.
OK, torneremo indietro e creerò un po 'di spazio nella parte superiore del mio modello
di campeggio e inizieremo a definire un Nav. che di nuovo proprio come l'intestazione.
Potremmo fare solo un div ma un Nav. è un po 'più significativo.
È più semantico.
Quindi eseguirò un nav con la barra di navigazione della classe e quindi il dash dash predefinito.
Ci sono diversi tipi e colori diversi o possiamo avere una barra di navigazione invertita,
ma andiamo con quella predefinita.
tag di ancoraggio con la classe uguale al trattino della barra di navigazione per una fine del genere.
E poi dentro aggiungeremo un div con una classe uguale a container fluid e questo ci renderà
solo un bel padding e un po 'di spazio e poi aggiungeremo un altro div con la classe uguale
all'intestazione della barra di navigazione e poi all'interno di la classe è uguale alla nostra intestazione, aggiungiamo un
E poi possiamo impostare il link per essere solo una barra e poi chiuderemo quella e aggiungeremo nel campo yelper
proprio così.
E vediamo cosa otteniamo con questo semplice markup.
Quindi abbiamo il nostro NAV con un container all'interno con l'intestazione della barra di navigazione e l'intestazione della barra di navigazione ha solo un elemento che
è il marchio della barra di neph.
Rinnova.
OK, quindi abbiamo la barra di navigazione e quindi abbiamo il nostro marchio qui e questo è
un link che quando clicciamo ci ricondurrà alla pagina di atterraggio orribile.
OK, quindi aggiungiamo alcuni segnaposti qui per l'accesso e la registrazione.
Non funzioneranno o non faranno nulla se non a noi sembra buono, quindi facciamolo ora andare al nostro campo.
E. J. come modello quindi all'interno della barra di navigazione e del contenitore ma non all'interno del N. F. bar Hetter.
Aggiungiamo un altro div e questo div avrà una classe di collasso che vedrà cosa
farà.
E solo un momento e poi Neph bar Dasch crolla proprio così.
E poi all'interno aggiungeremo un UL e questo UL avrà una classe di barra di navigazione nav e poi anche barra di navigazione a destra che
la sposterà sul lato destro e poi all'interno di quello che stiamo per avere
tre collegamenti per ora e ognuno sarà un alleato.
E poi all'interno che Ally avrà un tag di ancoraggio e darà il primo accesso.
E per ora l'H ref sarà impostato sul nostro percorso di instradamento perché non abbiamo ancora alcun accesso e faremo la
stessa cosa per il registro.
Facciamo Sign-Up e poi disconnettiamo proprio così.
OK.
Quindi vediamo come si presenta.
Prima di parlare di ciò che fa il collasso se ci aggiorniamo e non sembra buono, abbiamo
perso una classe secondaria qui sull'UL.
Sembra che non abbiamo aggiunto ora, quindi abbiamo aggiunto la barra di navigazione.
Ora non ho mai capito bene, ma non abbiamo aggiunto in nav stesso, quindi il salvataggio ora verrà aggiornato e
finiremo con tutti e tre i collegamenti sul lato destro del NAV e anche quando cambio la dimensione qui.
Si noti che proprio qui proprio lì è crollato.
E alla fine quello che avremo è una piccola icona di hamburger.
Sembra proprio quello in cui si fa clic e si tratta del menu.
Per ora li nascondiamo solo quando arriviamo a quelle dimensioni.
OK.
Quindi questo è tutto ciò che dobbiamo fare per la barra di navigazione ad eccezione del fatto che è solo su questa pagina.
Quindi aggiungiamolo a tutte le pagine.
Quindi copiamolo o tagliandolo e lo sposteremo nell'intestazione.
Quindi spostati in testa o in parte.
Lo aprirò.
Utilizzando la riga di comando C9 visualizza la barra di intestazione di Parshall. Ijaw Sì.
E poi proprio nella parte superiore del corpo lo aggiungeremo.
Facciamo un rientro corretto.
OK, andiamo.
E abbiamo la nostra barra di navigazione nell'intestazione in modo che qualsiasi file che includiamo
l'intestazione parziale ora avrà la barra di navigazione ma riavvierà il server.
Quindi è ancora qui se aggiungiamo un nuovo campeggio abbiamo anche quel bar.
E se andiamo alla home page abbiamo anche la barra sufficiente.
Grande.
Quindi passiamo a rendere questo aspetto un po 'migliore.
Quindi, come ho detto prima, ci sono due grandi cose che voglio fare in questa forma.
Il primo consiste nel centrarlo al centro della pagina e il secondo è impilare il modulo
verticalmente piuttosto che avere i tre input oi due input e il pulsante allineato orizzontalmente
sullo schermo.
Vuoi prenderli e impilarli uno sull'altro.
Iniziamo aprendo il file corretto che è il nuovo punto.
Sì.
Quindi faremo le battute di C9 sapendo che Ejay noi e poi ecco la nostra forma che abbiamo finora.
Cominciamo in modo semplice e aggiungiamo alcune classi di bootstrap ai moduli o agli input e questo è il
controllo del dash di forma.
E lo vogliamo su entrambi gli input e sul pulsante.
Aggiungiamo nella classe Bootstrap PTEN ETN grande proprio così.
E facciamo anche tra l'errore e vediamo come appare.
Quindi nodo dopo J.
Si aggiorna.
OK, quindi stiamo ottenendo i controlli di bootstrap qui e il pulsante bootstrap anche se è decisamente enorme e
non lo vogliamo.
Quindi per risolvere questo ci sono alcune cose che possiamo fare.
Il primo è che metteremo tutto all'interno di un contenitore.
Quindi siamo entrati in un contenitore div
class equals e mi limiterò a spostarlo verso il basso.
Eccoci e facciamo un rientro corretto.
Salva modifiche molto minori.
Ora otteniamo una certa spaziatura, ma è ancora una forma massiccia.
Quindi la prossima cosa che farò è usare il sistema di griglia.
Quindi aggiungeremo un altro div e questo avrà una classe uguale a row proprio così.
Prendiamo questo e copialo nella riga.
Quindi l'intero modulo va in fila ora.
E anche questo è fatto.
OK salva l'aggiornamento non è ancora una grande differenza.
Quello che andremo a fare è usare il CSSA e scrivere effettivamente i nostri stili in cima al
bootstrap per centrarlo dando margine.
Auto tutto questo qui sul lato sinistro e destro.
E volevamo solo prendere circa il 30 percento di questo container in cui si trova.
Quindi l'abbiamo fatto prima di tornare indietro e ho intenzione di infrangere una delle regole, così ti
hanno detto poco fa "Non fare stili in linea".
E questa è sicuramente una buona idea non farlo.
Ma per ora fino a quando non avremo una nuova versione in cui creeremo i nostri fogli di stile, lo farò
in linea.
Quindi creerò un nuovo div in cui inseriremo la forma.
Proprio così.
E poi darò quello stile div e inizierò col dire che è del 30 percento.
E lasciamo perdere e non vediamo più una forma più piccola.
Ora vogliamo centrarlo.
Quindi torniamo qui.
Dire margine zero in alto e in basso e Otto a sinistra ea destra.
Ora abbiamo la forma centrata.
La prossima cosa che faremo è fare in modo che il pulsante occupi l'intera larghezza, che è ancora piuttosto lunga.
Ma quello che faremo è dargli un blocco DTN che è un modo costruito in Bootstrap per renderlo un elemento di blocco.
E ora occupa l'intera linea.
Diamo ora una spaziatura tra tutti questi elementi per farlo.
Useremo i bootstrap costruiti nella classe del gruppo di moduli.
Quindi abbiamo bisogno di un gruppo di dash di tipo ECO di classe div e ne avremo bisogno per ogni input.
Quindi ogni input va all'interno di uno di quelli proprio così e poi lo duplicherò
e ne avremo un altro qui e questo entrerà in quello.
E poi ne abbiamo ancora uno per il pulsante.
Quindi abbiamo tre volte il gruppo di forme classiche e abbiamo anche bisogno dei tag div di chiusura.
Ce ne andiamo oh ce n'è uno e abbiamo bisogno dell'altra tag div di chiusura qui.
OK.
In questo modo, il gruppo di forma fa semplicemente un salto di qualità.
Ma ci dà anche un po 'di spazio.
Ora abbiamo questo pulsante qui.
La prossima cosa su cui potremmo concentrarci è centrare il testo e farlo, anche se dobbiamo fare è
dargli un centro di allineamento del testo.
E di nuovo ho intenzione di farlo in linea.
Non è una buona idea a lungo termine, ma questo è un ottimo modo per fare solo qualcosa velocemente.
Quindi, stile e faremo centro di allineamento del testo.
Salva ora quello centrato nel mezzo.
La prossima cosa che dovremmo fare è cambiare il colore di questo pulsante.
Il bianco non sta andando molto bene.
Facciamo in modo che sia il pulsante primario primario che lo renderà blu.
Sì, sembra molto meglio.
Spostiamo anche questo link sul link indietro fino al centro pure.
Quindi lo copiamo e tutto ciò che dobbiamo fare è metterlo all'interno di questo margine.
Auto div in modo che questo div qui dopo il modulo sia proprio così e salva.
Eccoci.
è aggiungere un po 'di padding o margine in modo che non sia giusto contro questo H-1 farlo.
Abbiamo il nostro ritorno e l'ultima cosa che dovremmo fare
Torneremo indietro e abbiamo già questo div che abbiamo selezionato.
Quindi, piuttosto che lo zero a margine, possiamo solo dargli un margine di 20 pixel per iniziare.
Vediamo come sembra.
Ok, sembra un po 'meglio.
Facciamo qualcosa di più simile a 50.
E potrebbe essere un po 'troppo.
Sicuramente la tua preferenza.
Torniamo indietro e facciamo 25.
Tutto ok.
Questo è abbastanza buono per ora.
Gioca con questo quanto vuoi e puoi rendere gli input più ampi se ti piacciono o sono
più ristretti, ma puoi vedere che è reattivo che rimarrà nel mezzo e si restringerà
un po '.
Ultima cosa liberiamoci di questo marchio.
Sicuramente non ne hai più bisogno.
Nella parte inferiore del nostro footer, andremo al file del footer e io baro.
Basta fare questo per ora e ci libereremo di quel salvataggio.
Ora abbiamo la nostra forma non sembra troppo male può tornare indietro otteniamo una lista di campeggi abbiamo abbastanza
barra che possiamo aggiungere uno.
Possiamo anche tornare indietro e visualizzare la pagina di destinazione che non è ancora stata eseguita.
Quello probabilmente ha più lavoro e sarà molto diverso rispetto alle altre pagine, sarà molto
più bello e avrà molti più stili personalizzati.
Ecco perché lo sto salvando fino a dopo.
E poi abbiamo anche il nostro numero qui con i nostri finti pulsanti che non fanno nulla.
Tutto ok