Sappiamo tutto ciò di cui abbiamo veramente bisogno per concentrarci sui colori.
Iniziamo con un jumbotron.
Quindi tutto all'interno del JumboTron è solo una diversa tonalità di blu e
quella sfumatura di blu che ho in questo documento qui per vedere 3 5 0 andrà al nostro foglio di stile e possiamo solo selezionare il jumbotron e dargli un
colore e tutto dentro tutto di quel colore, proprio come quello, sono freschi e puoi vedere che tutto è cambiato
in blu, incluso il dirupo A-Kon l'icona del glifo viene semplicemente trattata come testo.
In realtà è un font, quindi puoi cambiarne il colore usando la proprietà color.
Ora affrontiamo la barra di navigazione che è un po 'più complicata.
Il colore di sfondo non è male.
Tutto quello che dobbiamo fare è selezionare la barra di navigazione Inv. o potremmo fare.
Ora se siamo attivi dopo la nostra correzione, ma eseguirò la barra di navigazione inversa e
poi gli diamo un colore di sfondo di quello sfondo blu e lo incollo e lo aggiorno.
E puoi vedere che cambia in blu.
Ma per cambiare il colore qui voglio che siano bianchi piuttosto che grigi che sono.
Se modifico semplicemente tutti gli inchiostri o i tag, che è quello per cui i tag di ancoraggio dello stile sono
bianchi, non funzionerà affatto.
Quindi ti mostrerò cosa intendo.
Colore dell'ancoraggio bianco.
Torna indietro.
Non ha effetto e questo è un ottimo uso per l'ispettore se lo ispezioniamo.
Dai un'occhiata a cosa sta succedendo.
Quindi possiamo vedere che il nostro colore bianco è cancellato e il colore viene assegnato proprio qui.
Questo colore è grigio e se lo deselezioniamo tornano ad essere il bianco che vogliamo
che siano.
E questo perché questo è un selettore più specifico.
Se riesci a ripensare a quella lezione che ho fatto sulla specificità.
Questo è calcolato per avere un numero più alto o un indice di specificità più alto di quello che avevamo qui, che è
solo per un piccolo tag di ancoraggio rispetto a questo qui sopra.
Sono classi multiple.
Ricorda che ognuno di questi è dieci volte più specifico di un semplice tag di ancoraggio.
Quindi quello che vogliamo fare è scrivere un selettore che sarà altrettanto specifico e possiamo semplicemente
rubare questo qui.
Quindi entreremo qui e incolleremo quello in e poi cambieremo colore per essere bianchi.
Quindi sostituiremo semplicemente lo stesso schlechter che aveva il bootstrap.
Ed è importante che i nostri stili si verifichino dopo il bootstrap in modo che possiamo sovrascriverlo e, se siamo freschi,
ora abbiamo dei link bianchi.
Infine faremo la stessa cosa con il marchio nav bar.
Quindi, come puoi vedere, è all'interno del marchio del cruscotto della barra di navigazione.
Se selezioniamo ora Daut per il nostro marchio e diamo un colore bianco e lo salviamo, non funziona ancora e
abbiamo lo stesso problema.
Quindi, se lo ispezioniamo, vedrai che è stato cancellato dal nostro stile quaggiù dove stiamo trasformando
il bianco è stato cancellato e piuttosto i colori vengono cambiati da questa linea.
Ora se il marchio Bar all'interno della barra di navigazione Inv. quindi possiamo anche rubarlo e sovrascriverlo.
Quindi abbiamo solo bisogno di quella barra di navigazione inv. Ora per il nostro marchio.
Quindi, in pratica, stiamo scrivendo
stili che si scontreranno in una battaglia tra gli stili tra bootstrap e i nostri stili e sono identici nei selettori.
Quindi, dato che il nostro arriva secondo, stanno per uscire in cima.
Vogliono tornare indietro aggiornare e non andare mai.
Abbiamo fatto la maggior parte degli stili.
C'è una cosa davvero piccola
che probabilmente non noterai sullo schermo che il colore del grigio sul JumboTron è sempre leggermente diverso.
Quindi ho quel colore qui, lo copierò e poi andrò
su RC SS e cambieremo semplicemente lo sfondo del Jumbotron per essere di colore grigio e presta molta attenzione come aggiornamento.
Spero che tu possa vederlo cambiare.
È appena cambiato
È un grigio un po 'più bluastro.
Quindi testiamo tutto.
Ridimensioniamo il nostro lavoro sulla barra NAV.
Il Javascript funziona bene.
Eccoci.
Tutto sembra a posto.
L'ultima cosa che ti mostrerò è come possiamo usare un'icona diversa qui.
Quello che sto usando proviene da una libreria chiamata
fun awesome fun awesome è una semplice libreria che include un sacco di icone diverse.
Molto più del built-in Bootstrap con icone in modo da poter arrivare a Funt impressionante.
Non prenderla.
So che sono sulla home page qui.
E se clicchiamo sulle icone ci sono oltre 580 icone diverse che puoi vedere tutte qui.
E una delle belle funzionalità che puoi cercare attraverso di loro
e che non puoi davvero fare su Pucelle molto facilmente.
Quindi possiamo cercare la foto e otteniamo la fotocamera e la retro della fotocamera, che è quello che ho usato.
Ma prima di poterne usare uno, dobbiamo installarlo.
Quindi se vai per iniziare.
Hanno una bella CDN che puoi semplicemente copiare e mettere semplicemente quella all'interno della tua applicazione.
Quindi lo faremo pagare in alto all'improvviso.
E ora possiamo usare divertenti icone fantastiche ed è davvero molto semplice.
In realtà se fai clic su qualsiasi icona che ti piace che dice che
voglio usare il segno di pace, posso cliccarci sopra e ti danno il pezzettino di codice che puoi copiare.
Quindi è un'icona di classe uguale a f a per divertimento.
Eccezionale.
E poi F. UN. tratteggiare il nome dell'icona.
Sostituiamo semplicemente l'icona della fotocamera con questo in modo che possa salvare e aggiornare un grande segno di pace.
E abbiamo un segno di pace.
Quindi il divertimento è fantastico.
È molto popolare
Un sacco di icone grandiose come puoi vedere praticamente qualsiasi icona di cui avresti mai avuto bisogno.
Hanno un mucchio di quelli standard.
Metti in pausa il pulsante di riproduzione.
Inoltra all'indietro diverse icone per la tecnologia e le diverse icone di Internet.
Ma hanno anche alcuni più divertenti come i segni di pace.
E penso che abbiano anche una mano di Spock
Quindi puoi usare uno di questi proprio come fai con qualsiasi altro font.
Quindi se vuoi cambiare il colore devi solo cambiare la proprietà del colore se vuoi cambiare la dimensione.
In realtà cambi la dimensione del carattere.
Quindi userò di nuovo quella ricerca
della fotocamera retrò, che è retro della fotocamera, quindi ho bisogno di fare una lineetta tratteggiata retro e salvare l'aggiornamento e otteniamo quella fotocamera retrò.
Bene, quindi abbiamo finito con la galleria.
A parte cambiare in realtà l'immagine che farai, non appena finirò questa conclusione.
Probabilmente non vuoi guardare comunque, ma nel caso lo includessi lo includerò alla fine.
Quindi abbiamo abbastanza Bartra qui ha fatto un piccolo cambiamento che è stato
utilizzato ora inverso molto lontano, che è il modo in cui abbiamo ottenuto la barra di navigazione in bianco e nero.
Ma poi abbiamo effettivamente cambiato i colori, quindi non importava davvero.
E poi abbiamo anche usato la barra di navigazione fissa in alto, che è come rimane in alto.
Usiamo un sistema a griglia qui e poi usiamo un jumbotron.
Ho introdotto il glifo un concetto costruito in icone Bootstrap che sono relativamente limitate.
Ci sono molte delle cose che useresti, ma a volte non avranno qualcosa o,
a volte, preferisci il modo in cui le icone divertenti e divertenti sembrano divertenti.
Impressionante è sicuramente più popolare di quello con le noci
pecan e l'altra cosa nuova che ti ho mostrato è stata la classe delle miniature che
puoi semplicemente racchiudere in un'immagine e che limiterà l'immagine in una griglia e aggiungerà qui questo grazioso bordo.
E infine abbiamo parlato della specificità e di come abbiamo
dovuto combattere gli stili di bootstrap se volevamo cambiare il colore del colore di sfondo.
Vuoi cambiare il colore di sfondo di Nav. o il colore del carattere per i collegamenti e anche il colore del Nev.
marchio proprio qui.
OK, così è nel prossimo video.
Ti mostrerò come possiamo creare una pagina di destinazione con bootstrap.
E come ho promesso, ora andrò a
copiare e incollare quei collegamenti immagine per creare nove immagini diverse qui.
Quindi, se è qualcosa che vuoi vedere, aspetta un minuto o due.
OK.
Quindi dividerò lo schermo e copierò alcuni
di questi su questo primo e sostituirò questo qui e poi farò il prossimo.
Vecchio posto
Questo qui.
E poi il prossimo sono
sicuro che questo è avvincente e continuerò ad andare avanti così.
Bene, siamo a metà strada.
immagini diverse.
Ci stiamo
avvicinando e l'ultimo penso che lo abbiamo fatto diciamo assicuratevi che tutto sia in ordine o fresco e abbiamo nove
Eccezionale.
Tutto ok.
Quindi ora ho finito.
Speriamo sia piaciuto fare quella galleria di immagini.
Ci vediamo nel prossimo video.