1
00:00:00,230 --> 00:00:03,290
Sappiamo tutto ciò di cui abbiamo veramente bisogno per concentrarci sui colori.

2
00:00:03,300 --> 00:00:05,160
Iniziamo con un jumbotron.

3
00:00:05,460 --> 00:00:11,070
Quindi tutto all'interno del JumboTron è solo una diversa tonalità di blu e

4
00:00:11,070 --> 00:00:23,370
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

5
00:00:23,370 --> 00:00:31,860
colore e tutto dentro tutto di quel colore, proprio come quello, sono freschi e puoi vedere che tutto è cambiato

6
00:00:32,250 --> 00:00:37,880
in blu, incluso il dirupo A-Kon l'icona del glifo viene semplicemente trattata come testo.

7
00:00:37,980 --> 00:00:43,010
In realtà è un font, quindi puoi cambiarne il colore usando la proprietà color.

8
00:00:43,020 --> 00:00:45,950
Ora affrontiamo la barra di navigazione che è un po 'più complicata.

9
00:00:46,110 --> 00:00:47,730
Il colore di sfondo non è male.

10
00:00:47,740 --> 00:00:53,280
Tutto quello che dobbiamo fare è selezionare la barra di navigazione Inv. o potremmo fare.

11
00:00:53,340 --> 00:00:59,730
Ora se siamo attivi dopo la nostra correzione, ma eseguirò la barra di navigazione inversa e

12
00:01:01,650 --> 00:01:08,210
poi gli diamo un colore di sfondo di quello sfondo blu e lo incollo e lo aggiorno.

13
00:01:08,210 --> 00:01:09,830
E puoi vedere che cambia in blu.

14
00:01:10,020 --> 00:01:15,900
Ma per cambiare il colore qui voglio che siano bianchi piuttosto che grigi che sono.

15
00:01:15,900 --> 00:01:21,720
Se modifico semplicemente tutti gli inchiostri o i tag, che è quello per cui i tag di ancoraggio dello stile sono

16
00:01:21,720 --> 00:01:22,800
bianchi, non funzionerà affatto.

17
00:01:22,800 --> 00:01:23,980
Quindi ti mostrerò cosa intendo.

18
00:01:24,030 --> 00:01:28,070
Colore dell'ancoraggio bianco.

19
00:01:28,150 --> 00:01:29,630
Torna indietro.

20
00:01:29,910 --> 00:01:35,430
Non ha effetto e questo è un ottimo uso per l'ispettore se lo ispezioniamo.

21
00:01:35,610 --> 00:01:36,880
Dai un'occhiata a cosa sta succedendo.

22
00:01:37,260 --> 00:01:43,080
Quindi possiamo vedere che il nostro colore bianco è cancellato e il colore viene assegnato proprio qui.

23
00:01:43,410 --> 00:01:49,350
Questo colore è grigio e se lo deselezioniamo tornano ad essere il bianco che vogliamo

24
00:01:49,350 --> 00:01:50,050
che siano.

25
00:01:50,490 --> 00:01:53,280
E questo perché questo è un selettore più specifico.

26
00:01:53,460 --> 00:01:56,290
Se riesci a ripensare a quella lezione che ho fatto sulla specificità.

27
00:01:56,520 --> 00:02:03,180
Questo è calcolato per avere un numero più alto o un indice di specificità più alto di quello che avevamo qui, che è

28
00:02:03,180 --> 00:02:06,530
solo per un piccolo tag di ancoraggio rispetto a questo qui sopra.

29
00:02:06,630 --> 00:02:08,190
Sono classi multiple.

30
00:02:08,190 --> 00:02:12,330
Ricorda che ognuno di questi è dieci volte più specifico di un semplice tag di ancoraggio.

31
00:02:12,900 --> 00:02:18,480
Quindi quello che vogliamo fare è scrivere un selettore che sarà altrettanto specifico e possiamo semplicemente

32
00:02:18,480 --> 00:02:19,540
rubare questo qui.

33
00:02:20,280 --> 00:02:25,910
Quindi entreremo qui e incolleremo quello in e poi cambieremo colore per essere bianchi.

34
00:02:25,950 --> 00:02:29,560
Quindi sostituiremo semplicemente lo stesso schlechter che aveva il bootstrap.

35
00:02:29,610 --> 00:02:35,790
Ed è importante che i nostri stili si verifichino dopo il bootstrap in modo che possiamo sovrascriverlo e, se siamo freschi,

36
00:02:36,000 --> 00:02:37,370
ora abbiamo dei link bianchi.

37
00:02:37,650 --> 00:02:41,050
Infine faremo la stessa cosa con il marchio nav bar.

38
00:02:41,670 --> 00:02:45,490
Quindi, come puoi vedere, è all'interno del marchio del cruscotto della barra di navigazione.

39
00:02:45,960 --> 00:02:57,360
Se selezioniamo ora Daut per il nostro marchio e diamo un colore bianco e lo salviamo, non funziona ancora e

40
00:02:57,360 --> 00:02:59,800
abbiamo lo stesso problema.

41
00:02:59,820 --> 00:03:06,120
Quindi, se lo ispezioniamo, vedrai che è stato cancellato dal nostro stile quaggiù dove stiamo trasformando

42
00:03:06,450 --> 00:03:11,700
il bianco è stato cancellato e piuttosto i colori vengono cambiati da questa linea.

43
00:03:11,700 --> 00:03:17,770
Ora se il marchio Bar all'interno della barra di navigazione Inv. quindi possiamo anche rubarlo e sovrascriverlo.

44
00:03:17,970 --> 00:03:21,500
Quindi abbiamo solo bisogno di quella barra di navigazione inv. Ora per il nostro marchio.

45
00:03:21,930 --> 00:03:23,220
Quindi, in pratica, stiamo scrivendo

46
00:03:23,280 --> 00:03:28,500
stili che si scontreranno in una battaglia tra gli stili tra bootstrap e i nostri stili e sono identici nei selettori.

47
00:03:28,500 --> 00:03:32,580
Quindi, dato che il nostro arriva secondo, stanno per uscire in cima.

48
00:03:32,700 --> 00:03:36,280
Vogliono tornare indietro aggiornare e non andare mai.

49
00:03:36,300 --> 00:03:41,100
Abbiamo fatto la maggior parte degli stili.

50
00:03:41,100 --> 00:03:42,530
C'è una cosa davvero piccola

51
00:03:42,630 --> 00:03:48,000
che probabilmente non noterai sullo schermo che il colore del grigio sul JumboTron è sempre leggermente diverso.

52
00:03:48,000 --> 00:03:51,600
Quindi ho quel colore qui, lo copierò e poi andrò

53
00:03:52,740 --> 00:04:00,120
su RC SS e cambieremo semplicemente lo sfondo del Jumbotron per essere di colore grigio e presta molta attenzione come aggiornamento.

54
00:04:00,600 --> 00:04:05,510
Spero che tu possa vederlo cambiare.

55
00:04:05,520 --> 00:04:07,000
È appena cambiato

56
00:04:07,110 --> 00:04:08,200
È un grigio un po 'più bluastro.

57
00:04:08,200 --> 00:04:10,990
Quindi testiamo tutto.

58
00:04:11,040 --> 00:04:12,500
Ridimensioniamo il nostro lavoro sulla barra NAV.

59
00:04:12,720 --> 00:04:16,080
Il Javascript funziona bene.

60
00:04:16,170 --> 00:04:18,720
Eccoci.

61
00:04:18,720 --> 00:04:19,740
Tutto sembra a posto.

62
00:04:19,830 --> 00:04:21,400
L'ultima cosa che ti mostrerò è come possiamo usare un'icona diversa qui.

63
00:04:21,420 --> 00:04:24,870
Quello che sto usando proviene da una libreria chiamata

64
00:04:25,140 --> 00:04:30,510
fun awesome fun awesome è una semplice libreria che include un sacco di icone diverse.

65
00:04:30,570 --> 00:04:31,860
Molto più del built-in Bootstrap con icone in modo da poter arrivare a Funt impressionante.

66
00:04:31,860 --> 00:04:37,520
Non prenderla.

67
00:04:37,610 --> 00:04:38,390
So che sono sulla home page qui.

68
00:04:38,430 --> 00:04:40,890
E se clicchiamo sulle icone ci sono oltre 580 icone diverse che puoi vedere tutte qui.

69
00:04:41,280 --> 00:04:47,220
E una delle belle funzionalità che puoi cercare attraverso di loro

70
00:04:47,550 --> 00:04:52,470
e che non puoi davvero fare su Pucelle molto facilmente.

71
00:04:52,470 --> 00:04:53,580
Quindi possiamo cercare la foto e otteniamo la fotocamera e la retro della fotocamera, che è quello che ho usato.

72
00:04:53,670 --> 00:05:01,870
Ma prima di poterne usare uno, dobbiamo installarlo.

73
00:05:02,100 --> 00:05:05,180
Quindi se vai per iniziare.

74
00:05:05,400 --> 00:05:07,750
Hanno una bella CDN che puoi semplicemente copiare e mettere semplicemente quella all'interno della tua applicazione.

75
00:05:07,800 --> 00:05:14,160
Quindi lo faremo pagare in alto all'improvviso.

76
00:05:14,160 --> 00:05:18,650
E ora possiamo usare divertenti icone fantastiche ed è davvero molto semplice.

77
00:05:19,140 --> 00:05:24,190
In realtà se fai clic su qualsiasi icona che ti piace che dice che

78
00:05:24,330 --> 00:05:31,320
voglio usare il segno di pace, posso cliccarci sopra e ti danno il pezzettino di codice che puoi copiare.

79
00:05:31,320 --> 00:05:35,100
Quindi è un'icona di classe uguale a f a per divertimento.

80
00:05:35,100 --> 00:05:38,300
Eccezionale.

81
00:05:38,310 --> 00:05:38,660
E poi F. UN. tratteggiare il nome dell'icona.

82
00:05:38,670 --> 00:05:42,010
Sostituiamo semplicemente l'icona della fotocamera con questo in modo che possa salvare e aggiornare un grande segno di pace.

83
00:05:42,990 --> 00:05:51,240
E abbiamo un segno di pace.

84
00:05:52,380 --> 00:05:53,640
Quindi il divertimento è fantastico.

85
00:05:53,850 --> 00:05:55,820
È molto popolare

86
00:05:55,830 --> 00:05:57,110
Un sacco di icone grandiose come puoi vedere praticamente qualsiasi icona di cui avresti mai avuto bisogno.

87
00:05:57,120 --> 00:06:01,970
Hanno un mucchio di quelli standard.

88
00:06:01,980 --> 00:06:03,620
Metti in pausa il pulsante di riproduzione.

89
00:06:03,690 --> 00:06:04,940
Inoltra all'indietro diverse icone per la tecnologia e le diverse icone di Internet.

90
00:06:04,950 --> 00:06:09,400
Ma hanno anche alcuni più divertenti come i segni di pace.

91
00:06:09,480 --> 00:06:12,260
E penso che abbiano anche una mano di Spock

92
00:06:12,320 --> 00:06:16,090
Quindi puoi usare uno di questi proprio come fai con qualsiasi altro font.

93
00:06:16,380 --> 00:06:19,460
Quindi se vuoi cambiare il colore devi solo cambiare la proprietà del colore se vuoi cambiare la dimensione.

94
00:06:19,500 --> 00:06:23,970
In realtà cambi la dimensione del carattere.

95
00:06:24,360 --> 00:06:26,510
Quindi userò di nuovo quella ricerca

96
00:06:26,880 --> 00:06:35,730
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ò.

97
00:06:35,730 --> 00:06:44,880
Bene, quindi abbiamo finito con la galleria.

98
00:06:44,880 --> 00:06:46,710
A parte cambiare in realtà l'immagine che farai, non appena finirò questa conclusione.

99
00:06:46,710 --> 00:06:52,370
Probabilmente non vuoi guardare comunque, ma nel caso lo includessi lo includerò alla fine.

100
00:06:52,380 --> 00:06:56,310
Quindi abbiamo abbastanza Bartra qui ha fatto un piccolo cambiamento che è stato

101
00:06:56,310 --> 00:07:02,340
utilizzato ora inverso molto lontano, che è il modo in cui abbiamo ottenuto la barra di navigazione in bianco e nero.

102
00:07:02,340 --> 00:07:04,110
Ma poi abbiamo effettivamente cambiato i colori, quindi non importava davvero.

103
00:07:04,230 --> 00:07:07,650
E poi abbiamo anche usato la barra di navigazione fissa in alto, che è come rimane in alto.

104
00:07:07,650 --> 00:07:12,380
Usiamo un sistema a griglia qui e poi usiamo un jumbotron.

105
00:07:12,480 --> 00:07:16,100
Ho introdotto il glifo un concetto costruito in icone Bootstrap che sono relativamente limitate.

106
00:07:16,100 --> 00:07:20,960
Ci sono molte delle cose che useresti, ma a volte non avranno qualcosa o,

107
00:07:21,000 --> 00:07:26,160
a volte, preferisci il modo in cui le icone divertenti e divertenti sembrano divertenti.

108
00:07:26,160 --> 00:07:29,000
Impressionante è sicuramente più popolare di quello con le noci

109
00:07:29,010 --> 00:07:33,630
pecan e l'altra cosa nuova che ti ho mostrato è stata la classe delle miniature che

110
00:07:33,630 --> 00:07:38,550
puoi semplicemente racchiudere in un'immagine e che limiterà l'immagine in una griglia e aggiungerà qui questo grazioso bordo.

111
00:07:38,550 --> 00:07:41,700
E infine abbiamo parlato della specificità e di come abbiamo

112
00:07:41,700 --> 00:07:46,080
dovuto combattere gli stili di bootstrap se volevamo cambiare il colore del colore di sfondo.

113
00:07:46,080 --> 00:07:48,520
Vuoi cambiare il colore di sfondo di Nav. o il colore del carattere per i collegamenti e anche il colore del Nev.

114
00:07:48,620 --> 00:07:54,180
marchio proprio qui.

115
00:07:54,210 --> 00:07:55,450
OK, così è nel prossimo video.

116
00:07:55,620 --> 00:07:57,410
Ti mostrerò come possiamo creare una pagina di destinazione con bootstrap.

117
00:07:57,420 --> 00:08:00,230
E come ho promesso, ora andrò a

118
00:08:00,300 --> 00:08:05,160
copiare e incollare quei collegamenti immagine per creare nove immagini diverse qui.

119
00:08:05,160 --> 00:08:05,590
Quindi, se è qualcosa che vuoi vedere, aspetta un minuto o due.

120
00:08:05,760 --> 00:08:09,160
OK.

121
00:08:09,660 --> 00:08:13,380
Quindi dividerò lo schermo e copierò alcuni

122
00:08:15,510 --> 00:08:23,790
di questi su questo primo e sostituirò questo qui e poi farò il prossimo.

123
00:08:23,790 --> 00:08:28,760
Vecchio posto

124
00:08:29,140 --> 00:08:29,580
Questo qui.

125
00:08:29,580 --> 00:08:31,360
E poi il prossimo sono

126
00:08:32,610 --> 00:08:37,110
sicuro che questo è avvincente e continuerò ad andare avanti così.

127
00:08:39,710 --> 00:08:47,350
Bene, siamo a metà strada.

128
00:08:47,350 --> 00:08:48,660
immagini diverse.

129
00:08:48,660 --> 00:08:49,650
Ci stiamo

130
00:08:59,220 --> 00:09:10,470
avvicinando e l'ultimo penso che lo abbiamo fatto diciamo assicuratevi che tutto sia in ordine o fresco e abbiamo nove

131
00:09:10,470 --> 00:09:11,440
Eccezionale.

132
00:09:11,700 --> 00:09:12,360
Tutto ok.

133
00:09:12,660 --> 00:09:12,960
Quindi ora ho finito.

134
00:09:12,960 --> 00:09:14,120
Speriamo sia piaciuto fare quella galleria di immagini.

135
00:09:14,190 --> 00:09:16,020
Ci vediamo nel prossimo video.

136
00:09:16,050 --> 00:09:17,060