1
00:00:00,230 --> 00:00:03,290
Saiba tudo sobre o que realmente precisamos nos concentrar nas cores.

2
00:00:03,300 --> 00:00:05,160
Vamos começar com um jumbotron.

3
00:00:05,460 --> 00:00:11,070
Então, tudo dentro do JumboTron é apenas uma sombra diferente de azul e essa

4
00:00:11,070 --> 00:00:23,370
sombra de azul eu tenho neste documento aqui para ver 3 5 0 vai para a nossa folha de estilo e podemos apenas selecionar o jumbotron e dar uma cor

5
00:00:23,370 --> 00:00:31,860
e tudo dentro de Tudo isso é tão simples como se estivesse fresco e você pode ver tudo mudado para ser

6
00:00:32,250 --> 00:00:37,880
azul, incluindo o penhasco A-Kon, o ícone do glifo apenas é tratado como texto.

7
00:00:37,980 --> 00:00:43,010
Na verdade, é uma fonte para que você possa alterar a cor usando a propriedade de cores.

8
00:00:43,020 --> 00:00:45,950
Agora vamos abordar a barra de navegação, que é um pouco mais complicada.

9
00:00:46,110 --> 00:00:47,730
A cor de fundo não é ruim.

10
00:00:47,740 --> 00:00:53,280
Tudo o que precisamos fazer é selecionar nav bar Inv. ou nós poderíamos fazer.

11
00:00:53,340 --> 00:00:59,730
Agora, se estivermos atrás da nossa parada fixa, mas vou fazer uma barra de navegação

12
00:01:01,650 --> 00:01:08,210
inversa e depois dar uma cor de fundo desse fundo azul e colar isso e atualizar.

13
00:01:08,210 --> 00:01:09,830
E você pode ver que isso muda para ser azul.

14
00:01:10,020 --> 00:01:15,900
Mas para mudar a cor aqui eu quero que eles sejam brancos e não cinza que eles são.

15
00:01:15,900 --> 00:01:21,720
Se eu apenas estilo todas as tintas ou tags que é o que são para apenas tags de âncora de estilo para

16
00:01:21,720 --> 00:01:22,800
ser branco, não funcionará.

17
00:01:22,800 --> 00:01:23,980
Então, vou mostrar o que quero dizer.

18
00:01:24,030 --> 00:01:28,070
Cor da etiqueta da âncora em branco.

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

20
00:01:29,910 --> 00:01:35,430
Isso não produz efeito e isso é um ótimo uso para o inspetor se o inspecionarmos.

21
00:01:35,610 --> 00:01:36,880
Dê uma olhada no que está acontecendo.

22
00:01:37,260 --> 00:01:43,080
Então, podemos ver que nossa cor branca é cortada e a cor está sendo atribuída aqui.

23
00:01:43,410 --> 00:01:49,350
Essa cor de linha é cinza e, se a desmarcamos, elas voltam a ser o branco que queremos que

24
00:01:49,350 --> 00:01:50,050
elas sejam.

25
00:01:50,490 --> 00:01:53,280
E isso é porque este é um seletor mais específico.

26
00:01:53,460 --> 00:01:56,290
Se você consegue pensar nessa lição que eu fiz com especificidade.

27
00:01:56,520 --> 00:02:03,180
Isso é calculado para ter um número maior ou um índice de especificidade superior do que o que tivemos aqui, o que

28
00:02:03,180 --> 00:02:06,530
é apenas para uma pequena marca de âncora versus isso aqui.

29
00:02:06,630 --> 00:02:08,190
São várias classes.

30
00:02:08,190 --> 00:02:12,330
Lembre-se de cada um desses é dez vezes mais específico do que apenas uma marca de âncora.

31
00:02:12,900 --> 00:02:18,480
Então, o que queremos fazer é escrever um seletor que será tão específico e só podemos

32
00:02:18,480 --> 00:02:19,540
roubar esse aqui.

33
00:02:20,280 --> 00:02:25,910
Então vamos entrar aqui e colar isso e depois mudar de cor para ser branco.

34
00:02:25,950 --> 00:02:29,560
Então, vamos substituir exatamente o mesmo Schlechter que o bootstrap teve.

35
00:02:29,610 --> 00:02:35,790
E é importante que nossos estilos ocorram após o bootstrap para que possamos substituí-lo e se estamos frescos. Agora

36
00:02:36,000 --> 00:02:37,370
nós obtivemos links brancos.

37
00:02:37,650 --> 00:02:41,050
Por fim, faremos o mesmo para a marca da barra de navegação.

38
00:02:41,670 --> 00:02:45,490
Então, como você pode ver, está dentro da marca nav bar dash.

39
00:02:45,960 --> 00:02:57,360
Se selecionarmos aquele Daut agora para a nossa marca e nós damos uma cor de branco e economizamos e voltemos ainda não funciona

40
00:02:57,360 --> 00:02:59,800
e temos o mesmo problema.

41
00:02:59,820 --> 00:03:06,120
Então, se inspecionarmos, você verá que é cortado nossos estilos aqui em baixo, onde estamos ficando

42
00:03:06,450 --> 00:03:11,700
brancos, foi cortado e, ao contrário, as cores estão sendo alteradas por esta linha.

43
00:03:11,700 --> 00:03:17,770
Agora, se marca Bar dentro do nav nav Inv. então também podemos roubar isso e substituí-lo.

44
00:03:17,970 --> 00:03:21,500
Então, precisamos apenas da barra de navegação inv. Agora para a nossa marca.

45
00:03:21,930 --> 00:03:23,220
Então, basicamente, estamos escrevendo estilos que

46
00:03:23,280 --> 00:03:28,500
vão chocar de cabeça para frente em uma batalha dos estilos entre bootstrap e nossos estilos e eles são idênticos nos seletores.

47
00:03:28,500 --> 00:03:32,580
Então, porque o nosso vem em segundo lugar, eles vão sair no topo.

48
00:03:32,700 --> 00:03:36,280
Eles vão ganhar, volte a atualizar e nunca vá.

49
00:03:36,300 --> 00:03:41,100
Nós temos a maioria dos estilos feitos.

50
00:03:41,100 --> 00:03:42,530
Há uma coisa muito pequena

51
00:03:42,630 --> 00:03:48,000
que você provavelmente não notará na tela. A cor do cinza no JumboTron é tão ligeiramente diferente.

52
00:03:48,000 --> 00:03:51,600
Então eu tenho essa cor aqui, vou apenas copiá-lo e

53
00:03:52,740 --> 00:04:00,120
depois ir para RC SS e nós vamos mudar o fundo do Jumbotron para ser cinzento e prestar muita atenção como atualização.

54
00:04:00,600 --> 00:04:05,510
Espero que você possa ver isso mudar.

55
00:04:05,520 --> 00:04:07,000
Simplesmente mudou.

56
00:04:07,110 --> 00:04:08,200
É um cinza ligeiramente mais azulado.

57
00:04:08,200 --> 00:04:10,990
Então vamos testar tudo.

58
00:04:11,040 --> 00:04:12,500
Vamos redimensionar o nosso trabalho de barra NAV.

59
00:04:12,720 --> 00:04:16,080
O Javascript funciona bem.

60
00:04:16,170 --> 00:04:18,720
Aqui vamos nós.

61
00:04:18,720 --> 00:04:19,740
Tudo parece bem.

62
00:04:19,830 --> 00:04:21,400
A última coisa que vou mostrar é como podemos usar um ícone diferente aqui.

63
00:04:21,420 --> 00:04:24,870
Aquele que eu estou usando é de uma biblioteca

64
00:04:25,140 --> 00:04:30,510
chamada diversão divertida e divertida é uma biblioteca simples que inclui muitos ícones diferentes.

65
00:04:30,570 --> 00:04:31,860
Muito mais do que o construído no Bootstrap com ícones para que você possa chegar a ele em Funt.

66
00:04:31,860 --> 00:04:37,520
Não a pegue.

67
00:04:37,610 --> 00:04:38,390
Eu sei que estou na página inicial aqui.

68
00:04:38,430 --> 00:04:40,890
E se clicarmos nos ícones, existem mais de 580 ícones diferentes, você pode vê-los todos aqui.

69
00:04:41,280 --> 00:04:47,220
E um dos recursos agradáveis ​​que você pode pesquisar através deles, o que

70
00:04:47,550 --> 00:04:52,470
você realmente não pode fazer com Pucelle com muita facilidade.

71
00:04:52,470 --> 00:04:53,580
Então, podemos procurar fotos e nós pegamos câmera e a câmera retro, que é o que eu usei.

72
00:04:53,670 --> 00:05:01,870
Mas antes que possamos usar qualquer um, precisamos instalá-lo.

73
00:05:02,100 --> 00:05:05,180
Então, se você começar a começar.

74
00:05:05,400 --> 00:05:07,750
Eles têm um bom CDN que você pode simplesmente copiar e simplesmente colocar isso dentro de sua aplicação.

75
00:05:07,800 --> 00:05:14,160
Então, vamos fazer isso melhor pagar de repente.

76
00:05:14,160 --> 00:05:18,650
E agora podemos usar ícones maravilhosos e divertidos e é realmente muito fácil.

77
00:05:19,140 --> 00:05:24,190
Na verdade, se você clicar em qualquer ícone que quiser, diga que eu quero

78
00:05:24,330 --> 00:05:31,320
usar o sinal de paz, posso clicar nele e eles lhe dão o pequeno código que você pode copiar.

79
00:05:31,320 --> 00:05:35,100
Então, é um ícone com classe igual a f para diversão.

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

81
00:05:38,310 --> 00:05:38,660
E então F. UMA. trace o nome do ícone.

82
00:05:38,670 --> 00:05:42,010
Vamos substituir o ícone da câmera por isso, então ele terá um grande sinal de paz, economizando e atualizando.

83
00:05:42,990 --> 00:05:51,240
E temos um sinal de paz.

84
00:05:52,380 --> 00:05:53,640
Então, divertido, incrível.

85
00:05:53,850 --> 00:05:55,820
É muito popular.

86
00:05:55,830 --> 00:05:57,110
Muitos ícones excelentes, como você pode ver praticamente qualquer ícone que você precisaria.

87
00:05:57,120 --> 00:06:01,970
Eles têm um monte de padrões.

88
00:06:01,980 --> 00:06:03,620
Pause play button.

89
00:06:03,690 --> 00:06:04,940
Avançar para trás diferentes ícones para tecnologia e diferentes ícones da Internet.

90
00:06:04,950 --> 00:06:09,400
Mas eles também têm alguns mais divertidos como sinais de paz.

91
00:06:09,480 --> 00:06:12,260
E eu acho que eles também têm uma mão Spock, então nós vamos.

92
00:06:12,320 --> 00:06:16,090
Então você pode usar qualquer um destes, como você usa qualquer outra fonte.

93
00:06:16,380 --> 00:06:19,460
Então, se você quiser alterar a cor, basta alterar a propriedade de cores se quiser alterar o tamanho.

94
00:06:19,500 --> 00:06:23,970
Você realmente muda o tamanho da fonte.

95
00:06:24,360 --> 00:06:26,510
Então, eu vou usar essa câmera retro

96
00:06:26,880 --> 00:06:35,730
procurando por isso novamente, o que é o retro da câmera, então eu preciso fazer uma dash camera dash retro e salvar a atualização e nós conseguimos essa câmera retro.

97
00:06:35,730 --> 00:06:44,880
Tudo bem, então terminamos com a galeria.

98
00:06:44,880 --> 00:06:46,710
Além de realmente mudar a imagem, você será o que eu farei assim que terminar este encerramento.

99
00:06:46,710 --> 00:06:52,370
Você provavelmente não quer assistir de qualquer maneira, mas no caso de você, eu vou incluí-lo no final.

100
00:06:52,380 --> 00:06:56,310
Então, nós temos o suficiente, o Bartra aqui fez uma pequena

101
00:06:56,310 --> 00:07:02,340
mudança, que usamos agora muito inverso, e é como nós conseguimos a barra de navegação preto e branco.

102
00:07:02,340 --> 00:07:04,110
Mas, em seguida, mudamos de cor de qualquer maneira, de modo que realmente não importava.

103
00:07:04,230 --> 00:07:07,650
E então, também usamos o top da barra de navegação top, que é como ele permanece no topo.

104
00:07:07,650 --> 00:07:12,380
Usamos um sistema de grade aqui e depois usamos um jumbotron.

105
00:07:12,480 --> 00:07:16,100
Eu introduzi o glyph um conceito construído em ícones Bootstrap que são relativamente limitados.

106
00:07:16,100 --> 00:07:20,960
Há a maioria das coisas que você usaria, mas, ocasionalmente, elas não terão algo ou

107
00:07:21,000 --> 00:07:26,160
às vezes você apenas prefere a maneira como os ícones divertidos e divertidos parecem divertidos.

108
00:07:26,160 --> 00:07:29,000
Awesome é definitivamente mais popular do que o show de alimentos com nozes

109
00:07:29,010 --> 00:07:33,630
e a outra coisa nova que mostrei que você era a classe de miniatura, que você pode simplesmente colocar em torno

110
00:07:33,630 --> 00:07:38,550
de uma imagem e isso irá restringir essa imagem em uma grade e adicionar esta pequena e agradável pequena fronteira aqui.

111
00:07:38,550 --> 00:07:41,700
E, finalmente, falamos sobre especificidade e como devemos lutar contra

112
00:07:41,700 --> 00:07:46,080
os estilos do bootstrap se quisermos mudar a cor da cor do fundo.

113
00:07:46,080 --> 00:07:48,520
Deseja alterar a cor de fundo da Nav. ou a cor da fonte para links e também a cor do Nev.

114
00:07:48,620 --> 00:07:54,180
marca aqui.

115
00:07:54,210 --> 00:07:55,450
OK, então é isso no próximo vídeo.

116
00:07:55,620 --> 00:07:57,410
Eu vou mostrar-lhe como podemos criar uma página de destino com o bootstrap.

117
00:07:57,420 --> 00:08:00,230
E como prometi, agora vou copiar e

118
00:08:00,300 --> 00:08:05,160
colar esses links de imagens para criar nove imagens diferentes aqui.

119
00:08:05,160 --> 00:08:05,590
Então, se isso é algo que você quer ver, arraste o próximo minuto ou dois.

120
00:08:05,760 --> 00:08:09,160
ESTÁ BEM.

121
00:08:09,660 --> 00:08:13,380
Então, vou dividir a tela e copi

122
00:08:15,510 --> 00:08:23,790
algumas delas por esta primeira e só vou substituir essa aqui e depois vou fazer a próxima.

123
00:08:23,790 --> 00:08:28,760
Lugar antigo.

124
00:08:29,140 --> 00:08:29,580
Este aqui.

125
00:08:29,580 --> 00:08:31,360
E então, o próximo, tenho

126
00:08:32,610 --> 00:08:37,110
certeza de que isso é fascinante e continuarei na linha exatamente assim.

127
00:08:39,710 --> 00:08:47,350
Tudo bem, estamos a meio caminho.

128
00:08:47,350 --> 00:08:48,660
imagens diferentes.

129
00:08:48,660 --> 00:08:49,650
Estamos chegando

130
00:08:59,220 --> 00:09:10,470
perto e o último que penso que fizemos, digamos, certifique-se de que tudo esteja bom ou fresco e temos nove

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

132
00:09:11,700 --> 00:09:12,360
Tudo bem.

133
00:09:12,660 --> 00:09:12,960
Então agora eu terminei.

134
00:09:12,960 --> 00:09:14,120
Espero ter gostado de fazer essa galeria de imagens.

135
00:09:14,190 --> 00:09:16,020
Vejo você no próximo vídeo.

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