Benvenuto torna in questa lezione ci concentreremo sullo stile della pagina dello spettacolo.
Quindi adesso la nostra pagina mostra è così.
Abbiamo un piccolo bar naffare qui con i pulsanti che non fanno nulla.
Abbiamo un H-1 con il nome del campeggio.
E abbiamo un'immagine e una descrizione e abbiamo un pulsante per aggiungere un nuovo commento e quindi tutti
i commenti sono visualizzati.
Ognuno un piccolo paragrafo.
Quindi il nostro obiettivo qui è di renderlo un po 'più simile a questo.
Quindi ho una barra laterale qui.
Non avremo ancora la mappa ma faremo spazio alla mappa e poi avremo
il nostro contenuto principale con la descrizione.
Alcuni testi il ​​titolo non abbiamo intenzione di fare ancora le valutazioni, ma poi avremo anche un elenco di
recensioni che assomiglierà a questo.
Il loro piccolo contenitore laggiù avrò un piccolo bottone per farne alcuni.
Generalmente è un po 'più stilizzato.
Possiamo aggiungere questo e quello dice quante recensioni sono state lasciate.
Quindi questo è ciò a cui miriamo.
E per iniziare ci concentreremo solo sulla griglia di bootstrap.
Ricorda che la griglia di bootstrap è di 12 unità.
Abbiamo intenzione di designarne tre su 12 per questa piccola barra laterale e quindi aggiungeremo
nove in per il contenuto principale.
Prima di iniziare a cambiare qualcosa, voglio sottolineare che sto lavorando in v 5 ora.
Quindi se vuoi seguire tutti questi cambiamenti sarà in V 5.
E la ragione per cui sto facendo è che dovremo creare un foglio di stile personalizzato.
Dovremo servire l'elenco pubblico e alcune altre cose che sono cambiamenti sostanziali.
Quindi volevo fare una versione separata.
Ma prima di farlo, la prima cosa che faremo è aggiungere un contenitore attorno a tutto questo
container di bootstrap.
Quindi, mostra che E. J. aggiungerà un div con classe il contenitore proprio così
e metteremo tutto dentro quello.
E inizierò aggiungendo la barra laterale e la riempiremo con alcuni dati fittizi come quelli che abbiamo qui.
in quella riga avremo un altro div in cui una classe è column medium tre proprio così.
Quindi DIVX e questo devono essere class equals pro e
E poi all'interno di qui aggiungeremo un paragrafo e otterremo questo testo che dice Joachim.
Quindi questo è un paragrafo in cui la classe è in testa e quindi stiamo per metterti in campo per
ora lo cambieremo alla fine.
Ma sì camp e poi aggiungere questi piccoli elementi di elenco che faremo un div con la classe è il
gruppo dash di elenco e quindi qui aggiungeremo un gruppo di alleati in ogni alleato con una classe di elementi del gruppo di elenchi.
E all'interno aggiungeremo solo alcuni dati fittizi e lo chiameremo semplicemente info 1 e
poi duplicherò queste informazioni in informazioni 3.
E poi vediamo come si presenta ora.
Quindi per aggiornare la pagina abbiamo una barra laterale qui e farò in modo che uno di questi elementi sia selezionato per iniziare.
E tutto ciò che dobbiamo fare è aggiungere un attivo proprio lì.
Se siamo freschi, ora vediamo che uno di loro è attivo.
E questo è davvero solo un segnaposto per avere qualcosa lì, quindi non abbiamo molti
spazi bianchi, ma di nuovo aggiungeremo dati reali e una mappa alla fine.
E solo per indicarlo la mappa andrà proprio qui all'interno di questo tre colonne di media alla fine,
ma non ancora.
OK, questa è una barra laterale.
Ora aggiungeremo il contenuto principale.
Quindi abbiamo bisogno di un'altra colonna e questa è la media della colonna di classe 9.
E invece di là dobbiamo avere l'H-1 di cui abbiamo bisogno per avere l'immagine, ma prima di tutto noterete
che in realtà è tutto in una di queste miniature proprio come abbiamo nella home page.
Ognuna di queste è una miniatura.
Faremo la stessa cosa per l'intera immagine nel titolo, i commenti e tutto il resto.
Quindi aggiungeremo un div e quel div avrà l'anteprima di classe equals.
E poi dentro di noi aggiungeremo l'immagine e io conserverò l'immagine che abbiamo già scritto e
la inserirò proprio lì.
Quindi questa sarà la nostra immagine del campeggio.
E poi vogliamo anche aggiungere una classe a quella che bootstrap ci dà quale immagine è Dasch responsive.
Eccoci.
Salvalo.
E se diamo un'occhiata a ciò che abbiamo ora e aggiorniamo, abbiamo almeno l'immagine e il
contenuto nel posto giusto.
Abbiamo un problema in cui questo non sta prendendo però con quello che vogliamo.
Voglio che tutto finisca e dovremo gestirlo con alcune CS personalizzate alla fine.
E ora torneremo indietro e aggiungeremo questo qui dove abbiamo il nome del campo e poi il
prezzo per notte che non abbiamo nel database.
Quindi saremo appena codificati.
Quindi facciamolo ora.
E questo è un altro div e questo ha una classe di dash caption piena.
E poi dentro di noi aggiungeremo una H per.
E lo tireremo a destra e faremo il tiro di classe pari a destra e poi qualunque cosa
metteremo qui sarà il prezzo.
E comincerò con $ 9 a notte ancora una volta questo verrà dal database alla fine.
Se siamo freschi Ora riceviamo $ 9 a notte sul lato destro e poi vogliamo ottenere il
nome del campeggio che copierò qui sul lato sinistro.
Quindi lo inseriremo subito in basso e se non aggiungiamo il comando a destra, esso andrà automaticamente
a sinistra, anche se è più grande di quello che avevo in mente e lo trasformerò in un H più piccolo e andrò per
aggiungere un tag di ancoraggio all'interno di lì proprio così e inserire il nome del campeggio all'interno del tag di ancoraggio.
E l'idea alla base è che alla fine torno indietro.
Questo dovrebbe essere un link al campeggio effettivo o alla pagina del servizio di parcheggio dove possiamo andare a prenotare qualcosa.
Per ora è solo il link verso il nulla.
OK.
Quindi lo abbiamo dentro
Abbiamo un prezzo
Ora aggiungiamo la descrizione nuovamente.
solo un tag di paragrafo e poi aggiungeremo nella nostra descrizione che è la descrizione del campeggio proprio lì.
Quindi questo sarà
E sarà un po 'deludente perché non abbiamo una sottoscrizione di grandi dimensioni in questo
momento, quindi potremmo voler andare a vedere il database con un po' di Lorem Ipsum
e lo ruberò e copierò e tornare al file seme.
E poi invece del file del nostro seme e cambierò la descrizione su tutti e tre.
Basta fare la stessa cosa piuttosto che blah blah blah.
Ora abbiamo un po 'più di Lorem Ipsum e salveremo.
E quindi per rendere questo in vigore dobbiamo riavviare il server perché questo riceverà il database.
E poi torniamo indietro e andiamo alla pagina dei campeggi.
Abbiamo tre campeggi.
Tuttavia ora hanno una descrizione più legittima del testo.
Ok, bene.
Diamo ora un'occhiata a cosa dobbiamo lavorare.
Ci sono alcune cose minori.
Per ora lasciamo le stelle nel conteggio delle recensioni e passeremo ai commenti.
Torniamo allo spettacolo che E. J. che sia nella stessa colonna qui.
Sì, possiamo chiudere i semi, per ora quello che faremo è aggiungere una buona lezione all'interno della colonna medium 9
perché vogliamo
Prendendo la stessa quantità di spazio.
Quindi per farlo basta andare proprio qui dopo la miniatura quindi questa e la didascalia proprio qui questa è la miniatura.
Quindi a destra stanno per aggiungere la classe div.
È uguale a
E poi all'interno di quella intenzione di aprirlo e questo è dove farà il loop through per aggiungere
i commenti.
Ma inizierò aggiungendo nel pulsante la leva del pulsante e faremo un semplice div
e questo div avrà una classe di trattini a destra.
E poi dentro di noi aggiungeremo il nostro tag di ancoraggio qui che dobbiamo già creare
un nuovo commento.
Mettilo qui.
È lunga, ma ricorda che è un tag di ancoraggio che ha una classe di successo del pulsante Button che
lo rende verde.
Ma l'arbitro è una parte davvero lunga.
I campeggi affollano i commenti della barra ID del campeggio, ma salvano e aggiornano.
OK.
Quindi puoi vedere che ora abbiamo il pozzo che ci dà il bello sfondo grigio sul bordo.
Questo è dove aggiungeremo nei commenti.
Quindi abbiamo bisogno di fare il prossimo è scorrere i commenti e abbiamo già fatto.
Ma piuttosto che creare un paragrafo per ognuno di noi, in realtà creeremo una riga separata.
Quindi ti mostrerò come appare quando lo copia o lo taglia.
E possiamo cancellare questo paragrafo in più e lo metteremo dopo il testo giusto.
E facciamo questo correttamente.
Quindi abbiamo il nostro ciclo e quindi passeremo in rassegna ogni commento e
aggiungeremo all'interno di qui una riga di classe div per ogni classe div uguale alla riga.
E poi all'interno di ciascuno aggiungeremo un'altra classe div uguale alla colonna medium 12 e la salviamo.
E se diamo un'occhiata a cosa abbiamo qui finiamo con il nome utente email slash username
che chiamiamo l'autore.
E poi a destra c'è questa volta 10 giorni fa, che sarà solo hard code per ora e poi
il commento effettivo verrà dopo.
Quindi per fare quel lavoro abbiamo bisogno di fare un po 'di testo e poi fare qualcosa sul
giusto testo destro e poi dobbiamo aggiungere un paragrafo per il commento stesso.
Quindi proviamoci e andiamo qui.
Abbiamo la nostra colonna media 12.
E all'interno di questo inizieremo con l'aggiunta dell'autore del commento.
Quindi aggiungiamolo proprio lì.
E poi sotto che andremo ad aggiungere in un intervallo e questo sarà sulla destra.
Quindi aggiungeremo il classico pull a destra.
E poi qui aggiungiamo solo dieci giorni fa per ora.
Bene, solo il codice rigido in
E poi l'ultima cosa che vogliono fare è mostrare il testo del commento.
Quindi ho intenzione di ottenere questo testo di commento qui e lo inseriremo all'interno del suo paragrafo
che abbiamo già qui proprio così, tranne che vogliamo spostarlo all'interno della colonna qui, proprio come abbiamo l'autore e i
10 giorni successivi .
Vogliamo che siano nella stessa colonna insieme e ora ma salvano e tornano indietro.
Guarda cosa otteniamo.
Tutto ok.
Quindi abbiamo un commento.
Questo è tutto.
Ma puoi vedere che abbiamo un pulsante per aggiungere un nuovo commento.
Assicurati che funzioni.
E i commenti sono visualizzati qui.
Ci manca la valutazione.
Quindi sembra un po 'strano ma per ora va bene.
Quello che vorremmo fare è aggiungere uno o due ulteriori commenti.
Quindi torna qui e usiamo ancora un po 'di lorem ipsum.
Quindi ho intenzione di copiare parti di questo e aggiungerle come commenti.
Basta usare un po 'di quello e l'autore qui sarà in campeggio.
Nonno.
Sottoscrivi.
OK.
Quindi ora stiamo ottenendo i nostri commenti qui bene.
Funziona.
Ho uno spazio che vogliamo aggiungere.
Se dai un'occhiata a quello che abbiamo qui, c'è una linea davvero debole che non so se ti
farai vedere sullo schermo.
C'è una linea molto debole che aggiunge un po 'di spaziatura e tutto ciò che dobbiamo fare per rendere quel
lavoro è aggiungere un h.
Quindi, subito dopo questo testo, che è il pulsante, aggiungiamo una regola orizzontale e, se aggiorniamo, ora abbiamo
un po 'di spazio.
Hai un pulsante e abbiamo tutti i nostri commenti visualizzati a breve termine.
Perché non costruiamo il nome utente.
Quindi torneremo qui e abbiamo già avuto questo e se ne sono sbarazzati, ma torneremo indietro
e aggiungeremo nuovamente un tag forte con l'autore e renderanno il tutto più semplice da vedere.
Eccoci.
Ancora non eccezionale ma abbastanza buono per ora.
Quindi questo è in realtà tutto il bootstrap che dobbiamo fare per ora.
Ma non abbiamo ancora finito.
Se torniamo indietro e daremo un'occhiata alla versione di ish finita, vedremo che l'immagine occupa l'intera
miniatura e semplicemente non lo fa.
Anche se ho fatto un punto per usare la stessa identica immagine, non riguarda l'immagine stessa.
Il problema si riduce al nostro stile.
E quello che vogliamo fare è entrare e dire a questa immagine di occupare il 100 percento del container.
Quindi ti mostrerò che possiamo ispezionarlo e questo è un ottimo uso per l'ispettore qui.
Possiamo selezionarlo qui e poi qui possiamo aggiungere uno stile al 100 percento.
E noi andiamo.
Questa è una cosa che vorremmo fare.
C'è ancora una piccola differenza che c'è un piccolo spazio lì che non
abbiamo su questo.
E per eliminare tutto ciò che vogliamo fare è andare nella miniatura attuale
e selezionare la miniatura che è proprio qui e daremo quel padding zero.
E ora, se guardiamo, sembra il modo in cui vogliamo che appaia o che quasi guardi in quel modo
quando guardare.
Aggiungiamo anche qualche spaziatura qui.
Puoi vedere che c'è qualche spaziatura qui e possiamo aggiustarlo subito.
Inoltre, esaminandolo e ricordando che non lo stiamo effettivamente risolvendo, lo stiamo solo testando nel browser
e poi torneremo indietro e apporteremo queste modifiche nel nostro foglio di stile.
Quindi quello che vogliamo fare è aggiungere un po 'di padding sul puledro didascalia che è questa scatola qui.
E il Padam che vogliamo è in alto a sinistra a destra e in basso e sarà di nove o 10 pixel.
Quindi faremo solo padding nove x.
E noi andiamo.
Finiamo con una bella spaziatura lì.
Non è quello che vogliamo fare è prendere quello stile e in realtà aggiunto in un foglio di stile che stiamo andando
a scrivere