Bentornato in questa lezione, continueremo a lavorare nel tuo campo.
Abbiamo già completato la configurazione iniziale.
Abbiamo aggiunto alcuni elementi di base aggiunti l'intestazione e il piè di pagina Parshall's abbiamo aggiunto il bootstrap
e abbiamo aggiunto la funzionalità di creare nuovi campeggi.
Ora andremo in stile nella pagina dei campeggi usando il bootstrap.
Quindi iniziamo.
La prima cosa che farò è assicurarsi che i miei server siano in esecuzione.
E dai un'occhiata a quello che abbiamo adesso.
Sicuramente un po 'travolgente.
Quindi ho due obiettivi principali.
Il primo è che vogliamo una migliore intestazione nel titolo qui, quindi questo dovrebbe apparire più bello.
Useremo quello che viene chiamato un jumbotron in Bootstrap e quindi anche nei campeggi l'elenco dei campeggi
non dovrebbe essere visualizzato in verticale come questo.
Invece vogliamo una griglia di immagini più piccole che attraversi e quella griglia dovrebbe essere reattiva.
Iniziamo con il primo che sta facendo apparire un po 'più bello questo testo del titolo.
Quindi aprirò i campeggi che sì, sto solo andando a lavorare qui.
Quindi ho intenzione di ridimensionarlo un po 'perché scriveremo un bel po' di HD mail
e non faremo nulla con un terminale.
Quindi, per lavorare sull'intestazione, useremo un tag header che non abbiamo mai visto prima.
Funzionalmente funziona allo stesso modo di qualcosa come un div.
L'unica differenza è che questo ha un po 'di significato semantico ad esso.
Usare l'intestazione piuttosto che un semplice div arbitrario ma non importa che sia solo un contenitore.
E gli daremo una classe di jumbotron e quindi al suo interno andremo ad aggiungere la copia di
questo H-1 e lasceremo solo quello e salveremo Frigo e aggiorneremo la nostra pagina.
Ora abbiamo quello che viene chiamato il Jumbotron.
Non è ancora bello.
La prossima cosa che dovremmo fare è creare tutto all'interno di un container di bootstrap.
Quindi tutto ciò che vediamo qui tutto ciò che ho intenzione di indentare e ho intenzione di aggiungere un div
con il contenitore di classi uguali proprio come quello.
E poi ci metteremo tutto dentro e questo aggiungerà un po 'di speculazione per noi ai lati.
Ricaricare.
Puoi vedere che non abbiamo più cose contro il lato sinistro qui.
Abbiamo un po 'di spazio e il nostro JumboTron sembra un po' più vicino e alla fine
apparirà una barra naff.
Quindi questo sembrerà un po 'più bello.
Per ora abbiamo solo il Jumbotron.
Ora cambiamo il testo stesso.
Quindi, piuttosto che questa è la pagina dei campeggi, mettiamo un messaggio di benvenuto Benvenuto nel campo.
libero di inserire qualsiasi contenuto desideri e aggiungerò anche
un paragrafo nel paragrafo Aggiungerò solo un piccolo tipo di tagline e dirò semplicemente di vedere la nostra mano e scegliere campeggi da tutto il mondo.
Sentiti
Qualcosa del genere non ha molta importanza.
Salveremo l'aggiornamento.
OK, ora abbiamo una piccola riga di tag e l'ultima cosa che vogliamo fare è prenderci cura di questo link.
Il link aggiungi nuovo campeggio.
Quindi ho intenzione di copiarlo e anche di inserirlo nel Jumbotron.
Comunque lo trasformerò in un pulsante.
bootstrap per farlo o per aggiungere un paragrafo e poi inserire il tag di ancoraggio all'interno di esso.
Uno dei pulsanti di
E lo sto facendo solo per la spaziatura.
Si desidera che questo sia sulla propria linea e quindi si assegnerà
alla classe button più classi di PTEN ETN primarie per il colore e tra trattini grandi come quello e verranno salvate.
Ora abbiamo avuto un nuovo pulsante per il campeggio.
Facciamo clic su di esso e ci porta al modulo completamente in stile.
Una cosa minore è che se ridimensiono questa finestra qui.
Nota come il nostro testo va dritto contro il bordo del Jumbotron che non è eccezionale.
Abbiamo una certa spaziatura qui e vogliono mantenere quella spaziatura ciò che dovremo
fare è semplicemente aggiungere un altro contenitore all'interno del Jumbotron in modo tale che la classe div sia uguale al contenitore e quindi quaggiù all'interno del Jumbotron prima della fine
al div di chiusura e quindi solo il rientro qualunque cosa.
E ora se ci aggiorniamo.
Sembrava la stessa, ma quando la riduciamo ora abbiamo un po 'di spazio.
OK, questa è la parte dell'intestazione.
Ora vogliamo lavorare su quella griglia di immagini e sarò in prima linea con te.
È decisamente un po 'più di lavoro.
OK, iniziamo con questa griglia e inizieremo creando una riga in modo tale che la classe div sia uguale alla
riga e inizierò con un piccolo messaggio qui.
Quindi aggiungeremo un equipo di classe div e farò in modo che occupi l'intera larghezza e avremo solo un messaggio
qui e H-3 che dice che i nostri siti più popolari sono i campeggi che conosci
non sembrerà molto
Per ora torniamo indietro e iniziamo aggiungendo in una riga di classe div che abbiamo bisogno di tutto nella nostra scuola
elementare di fila.
È una classe div uguale alla fila proprio così.
E ora dobbiamo parlare di questo per ogni ciclo perché ciò che vogliamo fare è invece che la nostra
griglia all'interno della riga per ogni campeggio che vogliamo creare un div che abbia una classe di colonna e una colonna
con la griglia di bootstrap.
Quindi lo farò ora dove metterò tutto questo codice per ogni loop che andrà a
rientrare proprio così.
E poi abbiamo bisogno del nostro tag div di chiusura qui.
Quindi questo è per la riga classica e questo è per il contenitore.
OK.
Quindi, la riga di una classe e piuttosto che lasciare questo contenuto come div e qui con una
H per un'immagine avremo ancora un'immagine, ma stiamo andando a cambiare questo div in modo che abbia una classe di colonne medium
tre in column small 6 e questo è solo per renderlo reattivo in modo da ottenere delle immagini più grandi quando le dimensioni
dello schermo sono maggiori.
E poi quando lo riduciamo, scenderà a due sole immagini per fila e poi si ridurrà ancora più in
basso a una sola immagine per riga.
è una classe di bootstrap che ci aiuterà a fare una piccola carta che farà sì che una
piccola griglia all'interno di quella miniatura aggiunga il immagine per iniziare proprio così.
Quindi all'interno di questo aggiungeremo in un altro div e questo div avrà una classe di miniature che
Abbiamo servizi di immagine pari al campeggio che RL e lasceremo a questo.
E per ora ci sbarazzeremo di questo e basta salvare e vediamo cosa otterremo se siamo freschi.
Tutto ok.
Quindi abbiamo una griglia di immagini ora.
Ce ne sono solo tre, ma stiamo ottenendo questa griglia.
E ti mostrerò cosa intendevo rendendolo reattivo.
Quindi, come un rimpicciolimento, noti come cambia in due quadrati o due elementi sullo schermo.
Ricorda che ci sono 12 unità.
Quindi, per prima cosa lo abbiamo diviso in quattro blocchi in cui ognuno ha tirato fuori tre unità e poi quando
la griglia diventa più piccola qui ognuno di loro occupa sei unità e anche più piccola diventa
automaticamente una.
E non abbiamo dovuto scriverlo perché il default extra piccolo è di usare 12 unità.
Quindi non abbiamo dovuto specificarlo.
Ora riprendiamo il titolo in questo nome del campeggio e non solo un'età in cui
uno può fare una nuova classe di bootstrap. Una classe div equivale alla didascalia.
E poi dentro ci sarà una H per il nome del campeggio.
OK salviamo vediamo come appare.
Eccoci.
Riceviamo queste belle piccole carte.
Questa è la classe delle miniature che lo ha fatto per noi.
Abbiamo le nostre immagini.
E vediamo cosa succede se abbiamo un sacco di immagini che vanno in un mucchio di oggetti.
Quindi non devi farlo ma inserirò questo qui.
Dacci qualche altro dato.
Saranno dati duplicati ma va bene.
E poi dobbiamo assicurarci di aggiungere le virgole corrette e quindi virgola lì e di venire lì.
Ora, se aggiorniamo, dobbiamo riavviare il server.
E ogni volta che abbiamo problemi con l'app.
Sì.
E ora, se ci aggiorniamo, vedremo che abbiamo un piccolo problema.
La nostra griglia è un po 'incasinata.
E quello che sta succedendo è che abbiamo immagini di differenti altezze.
Quindi questo Salmon Creek è diverso da questi.
Anche se la larghezza è la stessa in questo caso.
E questo sta buttando giù dalla griglia e c'è un modo semplice per risolverlo anche se è un po 'vistoso.
E ti mostrerò come lo facciamo al posto del nostro campeggio.
Sì.
Il giorno della riga della lezione aggiungerò un attributo di stile e lo farò solo temporaneamente.
un foglio di stile esterno, ma lo farò semplicemente in linea per renderlo più semplice da vedere.
Lo sposteremo su
Quindi abbiamo impostato lo stile per visualizzare il flex e l'involucro flessibile da avvolgere.
E quelle sono due proprietà che aiuteranno la nostra rete.
Quindi, se fossi fresco Ora finiamo con la griglia dove è più flessibile.
Non importa che abbiamo altezze diverse perché ora la griglia si adatta Quindi c'è più spazio
tra questi due ed eccolo qui.
Fondamentalmente calcola la quantità minima di spazio necessaria dove possiamo avere tutto su una linea
tutta insieme dove possiamo avere tutto perfettamente allineato.
E c'è un altro cambiamento che possiamo fare, che è quello di tornare indietro e aggiungere il centro del testo, che
è un bootstrap per noi che renderà il nostro testo centrato proprio lì.
E penso che sembra un po 'meglio.
Anche una questione di preferenze personali e ora abbiamo finito con la pagina del campeggio per il momento.
Speriamo che questo ti mostri come il bootstrap può davvero aiutarci a rendere le cose abbastanza facili,
soprattutto rispetto a farlo da zero.
E lascia che ti mostri la nostra bella griglia reattiva che abbiamo.
Quindi questo è su cellulare.
Otteniamo questo bel layout fino a quattro immagini che attraversano.
OK, quindi sono abbastanza felice di come sembra.
Ci vediamo nel prossimo video