Bentornato in questa lezione costruiremo un piccolo progetto usando quello che abbiamo imparato
finora sul bootstrap.
Comprenderà molti dei componenti di cui abbiamo parlato includendo ora il jumbotron e il
sistema di griglia.
Ho anche lanciato una o due nuove cose, incluse le icone qui.
Non abbiamo ancora visto come farlo.
E anche il fatto che questa barra di spostamento mentre lo scorrimento lo vedrà rimane fisso in alto in modo che non
scorra il modo in cui abbiamo una barra di navigazione fissa che non abbiamo ancora visto ancora.
E infine, stiamo cambiando alcuni dei colori dei componenti bootstrap predefiniti.
Quindi questa è in realtà una sfumatura leggermente diversa di grigio.
Questa è l'ombra del blu e la barra di navigazione ha alcuni colori diversi.
Quindi ti mostrerò come fare tutto questo prima di iniziare a scrivere qualsiasi codice.
Voglio solo prendere un momento per sottolineare il fatto che queste immagini per la maggior parte
provengono da un sito Web una grande risorsa chiamata Splash.
Quindi splash offre una miriade di bellissime foto in alta risoluzione che puoi fare quello che vuoi.
Puoi leggere la licenza qui ma è praticamente quello che vuoi.
È una licenza Creative Commons bla bla bla, sono sicuro che non mi interessa davvero, ma
le foto sono davvero fantastiche e sto usando molti di questi otto.
Infatti nella nostra galleria.
E questo lascia un'immagine che è proprio qui che in realtà mi sono fatto prendere una classe di fotografia
e questa è la prima cosa che ho preso che sembra abbastanza decente.
Penso anche se rispetto a questi non sembra così caldo.
Ad ogni modo se vuoi usare queste stesse identiche immagini che non è importante.
Questo funzionerà con qualsiasi immagine.
Ma se vuoi gli stessi identici ho incluso tutti i link in questa galleria di file M. D che sono stati caricati insieme a questo
video e hanno incluso anche i due colori che utilizzeremo il blu scuro e
il grigio chiaro.
OK.
Quindi, con tutto questo fuori mano, ora iniziamo il progetto.
Quindi ho una galleria di file vuota.
H m l.
m l e chiameremo solo questa galleria di immagini e la prima cosa che dobbiamo fare è includere il bootstrap.
Aggiungerò qui il mio scheletro h d
E ho intenzione di copiare i CD da un vecchio progetto, quindi lo farò adesso.
Eccoci qui.
Sto collegando il CDN bootstrap.
E mentre sono qui prenderò anche i bootstraps CSSA e Jay queery city e che abbiamo fatto nella lezione di nav bar e li abbiamo messi in
fondo qui in modo che quando aggiungiamo la barra di navigazione non dobbiamo andare a caccia per
questi file o per i tag di script.
Quindi un salvataggio e la prima cosa che possiamo fare è aggiungere il nostro Jumbotron.
È carino e facile.
Quindi avremo un div e questa sarà la classe uguale a Jumbotron.
E poi all'interno del Jumbotron inizierà con un H1 che dice solo la galleria di immagini.
Eccoci e salveremo e assicuriamoci che funzioni.
Quindi aprirà questo file.
Quindi abbiamo incluso Boucek.
Stiamo vedendo il cambiamento di carattere.
Stiamo vedendo questo grigio dal Jumbotron.
Ora assicuriamoci che si trovi all'interno di un contenitore come se fosse qui piuttosto che in quello
che abbiamo dove va tutto attraverso lo schermo.
Quindi faremo quella classe div uguale al contenitore.
Eccoci, andiamo a farlo correttamente e aggiorniamo e torneremo indietro.
Va bene, quindi abbiamo il Jumbotron ma aggiungiamo questo paragrafo.
Ora torneremo e faremo l'icona ma questo è solo un tag di paragrafo sotto l'H-1 che salveremo.
Sentiti libero di inserire qualsiasi testo tu voglia e ora abbiamo finito con il Jumbotron.
facciamo ora la barra di navigazione e non inserirò abbastanza barre da zero per due motivi.
Quindi torniamo indietro e
Uno è che è un bel po 'di codice.
Ci vorrà molto tempo.
E questo video.
Ma due è il fatto che non scrivo quasi mai in Ackbar da zero.
Come ho accennato nel video di NASCAR il più delle volte il mio flusso di lavoro è che vado sul sito di bootstrap
o su un sito precedente che ho creato con una barra NAV e lo copio.
E l'ho appena controllato e mi sono sbarazzato dei pezzi che non voglio.
Aggiungo alcuni nuovi pezzi in.
Ecco dove farò qui.
Ho già abbastanza parti che ho fatto nella barra di navigazione ha detto ogni applicazione HTML.
È proprio qui e sto per copiarlo e poi lo modificheremo un po '.
Quindi copiamolo e tornerò e lo metteremo proprio in cima al file proprio così.
E vediamo cosa otteniamo sono freschi e abbiamo la barra di navigazione.
È chiusa.
Vogliamo cambiare il marchio qui.
Vogliamo anche cambiare il colore alla fine e vogliamo assicurarci che sia corretto in alto che
non è in questo momento ma ci arriveremo.
Torniamo indietro e cambiamo solo il marchio.
Quindi, al posto del caffè, ho chiamato le mie immagini, puoi chiamarlo come vuoi.
Certo, assicurati che funzioni bene.
La prossima cosa che ti mostrerò è un rapido cambiamento che possiamo fare per alterare il colore in cui appaiono invece
di nap o default.
Possiamo farlo ora se bar in versi e ti mostrerò come si presenta.
Per ora otteniamo un oscuramento o i colori sono stati invertiti dove il testo è chiaro e otteniamo
uno sfondo scuro.
Non è ancora il colore blu che sto andando qui.
E il carattere non è bianco, ma torneremo e sistemeremo tutto.
Questo è abbastanza vicino per ora.
Ora possiamo concentrarci sull'effettiva galleria di immagini su quella griglia quaggiù.
E iniziamo osservando come si comporta sulla soluzione.
scende a due e poi scende a due e infine alla piccola dimensione va a una come puoi vedere qui.
Quindi inizia con tre immagini che attraversano e poi, quando ridimensiono,
E abbiamo un'immagine che attraversa.
Iniziamo impostando la griglia per questa grande dimensione in cui ne abbiamo attraversate tre.
Ricorda che abbiamo 12 unità in totale.
Quindi, se vogliamo che tre attraversino, designeremo ciascuno di essi come quattro unità.
Quindi sistemiamolo appena sotto il nostro Jumbotron.
Sempre all'interno del contenitore, però, faremo solo una riga div class equals, quindi all'interno di questo avremo div class
uguali e vogliamo che siano quattro unità.
Quindi faremo il grande trattino 4 della colonna e premiamo invio e possiamo iniziare semplicemente inserendo del testo qui e
poi lo duplicherò perché ne vogliamo tre.
E non mi preoccuperò di aggiustare ancora la rientranza perché faremo un cambiamento più grande in un
solo momento.
Ma rinnoviamo e otteniamo quelle tre colonne che attraversano.
Quindi la prossima cosa che vogliamo fare è ottenere alcune immagini in corso e tutto parte ma basta prendere la
L della mia foto del Golden Gate Bridge e aggiungeremo un tag immagine piuttosto che un testo.
immagini equivale al fatto che il Golden Gate Bridge sei malato e io lo incollo per tre volte e salvo.
Quindi la fonte di
E se torniamo indietro abbiamo un problema che è che quell'immagine è enorme anche se abbiamo queste
tre colonne.
La nostra immagine non sta all'interno della nostra colonna, non si sta riducendo.
Puoi vedere cosa faremo per risolvere questo problema aggiungendo un po 'più bootstrap.
Non ti ho ancora mostrato di creare questo bel piccolo bordo attorno ad esso e si chiama miniatura.
Tutto quello che dobbiamo fare è scrivere un div con la classe uguale alla miniatura e poi
qualsiasi immagine che mettiamo al suo interno verrà ridimensionata per adattarsi alla colonna.
E anche questo piccolo confine qui sembra molto carino.
Quindi, per farlo, in realtà mi libererò di ciò che abbiamo con quelli
per tornare a una singola immagine e aggiungere in una classe div uguale alla miniatura e fatto correttamente.
E lo avvolgiamo attorno all'immagine e salviamo.
Ora se ci aggiorniamo.
Vedrai se otteniamo una singola immagine che occupa la giusta quantità di spazio all'interno di quella griglia.
Questa è la colonna e ha un piccolo margine attorno e l'immagine non è gigantesca, il che è grande.
Quindi assicuriamoci che funzioni se duplichiamo questo.
Quindi questa è un'immagine, dupliciamola tre volte e vediamo cosa succede aggiornando.
E noi andiamo.
Abbiamo tre immagini.
Andrò avanti e ne aggiungerò altri sei.
Quindi abbiamo nove totali come facciamo qui.
E in realtà non dobbiamo aggiungere righe separate.
Possiamo semplicemente metterli tutti nella stessa riga.
Quindi copia tutte e tre le cose che abbiamo finora a volte e risparmia.
Questo ci darà nove immagini.
E se aggiorno vedrai che si avvolgono automaticamente alla riga successiva.
Quindi dobbiamo solo avere una riga e aggiungere quelle colonne che conosci medicalmente.
Se vogliamo che ogni immagine occupi quattro unità, significa tre per riga e quindi abbiamo bisogno di tre
file di immagini.
Tornerò indietro e cambierò tutte queste immagini elfi alla fine del video.
Non voglio farti guardare.
Molto interessante solo copia e incolla, ma concentriamoci sul resto di questa griglia.
In questo momento, non appena un mezzo di successo, passa a un'immagine su cui non è quello che
vogliamo ciò che stiamo cercando sono due immagini in quel breakpoint medio.
E poi, dopo il punto di rottura medio che è lì, colpiamo piccolo e vogliamo ancora che rimanga al 2.
Quindi, per risolvere il problema nel nostro o va a uno immediatamente al punto di rottura grande o il
punto di rottura medio e poi piccoli e piccoli extra rimane a 1.
Possiamo tornare qui e cambieremo tutti quelli che conosci selezionare e premi il comando d seleziona tutte le istanze di chiamali per
grandi e poi premo le frecce sinistra o destra per spostare il cursore.
Ora posso modificarli tutti in una volta.
E quello che voglio fare potrei aggiungere nella colonna medium six perché vogliamo Perrow e funzionerà.
E se torno indietro e aggiorno vedrai che rimangono a 3 per fila e poi ho raggiunto il punto di interruzione mediano
e vanno a 2.
Ma poi colpisco piccolo e salta a uno e al nostro quando colpiamo piccolo la soluzione rimane a 2.
Quindi per risolvere questo problema invece di fare il medium della colonna sei possiamo fare una piccola colonna 6 e tornare di nuovo ad
aggiornare questa versione.
Colpiamo media.
Andiamo a due.
Colpiamo piccolo.
Rimaniamo alle 2 e poi passiamo a small extra e siamo a 1 1 immagine per riga.
Perfezionare.
Quindi questo è tutto ciò che dobbiamo fare per la griglia e abbiamo finito con la maggior parte delle funzionalità qui.
Molto molto veloce per farlo funzionare.
Ciò su cui vogliamo concentrarci ora sono alcuni dei colori e anche le icone.
Inizierò mostrandoti come aggiungiamo icone utilizzando il bootstrap.
se vai ai componenti ci sono queste icone di glifi in alto e ce ne sono un sacco da cui scegliere.
Quindi, per ottenere il bootstrap
E ne troveremo uno che vogliamo usare e quello che sto usando.
Farò solo una ricerca, penso che sia una telecamera.
Quindi c'è questa fotocamera qui e io non sto usando quella telecamera.
È leggermente diverso.
Quello che sto usando è una fotocamera più retrò e ti mostrerò come aggiungerla.
In realtà non fa parte del bootstrap Ma iniziamo con la normale fotocamera che viene fornita con il bootstrap.
Quindi scriviamo Clifford Kahn e poi usiamo la fotocamera del cruscotto.
E se scorri più in basso puoi vedere dove spiegano come usarlo per creare un'estensione in cui una
classe è uguale a Con e quindi glifo può scagliare il nome dell'icona del glifo.
Quindi copiamo questo span e inizieremo a farlo all'interno dell'H-1, lo
inseriamo proprio all'inizio dell'H-1 e vogliamo una rapida fotocamera A-Kon dash e salveremo e aggiorneremo.
E proprio così puoi avere una macchina fotografica lì dentro.
E se vogliamo spazio possiamo farlo attraverso il padding o possiamo semplicemente aggiungere uno spazio proprio lì.
E otteniamo uno spazio in cui possiamo fare esattamente la stessa cosa per la barra di navigazione e ne ho usato uno che viene
chiamato Photo go double check up qui.
Puoi fare una ricerca su questa pagina per l'immagine fotografica.
Eccolo.
Può andare se può trattenere un'immagine.
Quindi saliremo al marchio della barra di navigazione proprio qui e lo incolleremo di nuovo in quell'intervallo.
E poi all'interno della classe dovrebbe essere cliccare sull'immagine e aggiungeremo anche lì uno spazio.
Torniamo al nostro sito sono freschi e ora abbiamo una piccola immagine lì.
E abbiamo anche la fotocamera.
Quindi affrontiamo la barra di navigazione e inizieremo fissandola in alto in modo che tu possa vedere in questo momento.
Quel pisolino i nostri pergamene.
Ma sulla soluzione rimane lì.
E per farlo è una singola classe che dobbiamo aggiungere alla nostra barra NAV.
Quindi, qui sopra, vogliamo che il cruscotto del cruscotto nav sia in alto e salvare.
E se siamo freschi vedrai che è fisso in alto.
C'è un piccolo problema che è che il nostro contenuto è ora dietro un po 'e vogliamo che
abbia una spaziatura normale sopra il Jumbotron.
Quello che dobbiamo fare è aggiungere un po 'di imbottitura al nostro corpo e succede che sia 70 pixel.
I documenti di bootstrap ti diranno che se mai dimentichi 70 pixel di padding è ciò che vogliamo
è la larghezza del quarto ora.
Quindi andremo qui e creeremo un foglio di stile ora e lo chiamerò galleria Dotsie SS
e poi all'interno selezioneremo il riempimento del corpo con i primi 70 pixel e quindi dobbiamo aggiungerlo in quel foglio
di stile che è Gallery CS S.
Ora assicuriamoci che funzioni.
Eccoci.
Abbiamo la nostra spaziatura indietro e NFR è ancora fissato in alto come puoi vedere perfetto