Saiba tudo sobre o que realmente precisamos nos concentrar nas cores.
Vamos começar com um jumbotron.
Então, tudo dentro do JumboTron é apenas uma sombra diferente de azul e essa
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
e tudo dentro de Tudo isso é tão simples como se estivesse fresco e você pode ver tudo mudado para ser
azul, incluindo o penhasco A-Kon, o ícone do glifo apenas é tratado como texto.
Na verdade, é uma fonte para que você possa alterar a cor usando a propriedade de cores.
Agora vamos abordar a barra de navegação, que é um pouco mais complicada.
A cor de fundo não é ruim.
Tudo o que precisamos fazer é selecionar nav bar Inv. ou nós poderíamos fazer.
Agora, se estivermos atrás da nossa parada fixa, mas vou fazer uma barra de navegação
inversa e depois dar uma cor de fundo desse fundo azul e colar isso e atualizar.
E você pode ver que isso muda para ser azul.
Mas para mudar a cor aqui eu quero que eles sejam brancos e não cinza que eles são.
Se eu apenas estilo todas as tintas ou tags que é o que são para apenas tags de âncora de estilo para
ser branco, não funcionará.
Então, vou mostrar o que quero dizer.
Cor da etiqueta da âncora em branco.
Volte.
Isso não produz efeito e isso é um ótimo uso para o inspetor se o inspecionarmos.
Dê uma olhada no que está acontecendo.
Então, podemos ver que nossa cor branca é cortada e a cor está sendo atribuída aqui.
Essa cor de linha é cinza e, se a desmarcamos, elas voltam a ser o branco que queremos que
elas sejam.
E isso é porque este é um seletor mais específico.
Se você consegue pensar nessa lição que eu fiz com especificidade.
Isso é calculado para ter um número maior ou um índice de especificidade superior do que o que tivemos aqui, o que
é apenas para uma pequena marca de âncora versus isso aqui.
São várias classes.
Lembre-se de cada um desses é dez vezes mais específico do que apenas uma marca de âncora.
Então, o que queremos fazer é escrever um seletor que será tão específico e só podemos
roubar esse aqui.
Então vamos entrar aqui e colar isso e depois mudar de cor para ser branco.
Então, vamos substituir exatamente o mesmo Schlechter que o bootstrap teve.
E é importante que nossos estilos ocorram após o bootstrap para que possamos substituí-lo e se estamos frescos. Agora
nós obtivemos links brancos.
Por fim, faremos o mesmo para a marca da barra de navegação.
Então, como você pode ver, está dentro da marca nav bar dash.
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
e temos o mesmo problema.
Então, se inspecionarmos, você verá que é cortado nossos estilos aqui em baixo, onde estamos ficando
brancos, foi cortado e, ao contrário, as cores estão sendo alteradas por esta linha.
Agora, se marca Bar dentro do nav nav Inv. então também podemos roubar isso e substituí-lo.
Então, precisamos apenas da barra de navegação inv. Agora para a nossa marca.
Então, basicamente, estamos escrevendo estilos que
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.
Então, porque o nosso vem em segundo lugar, eles vão sair no topo.
Eles vão ganhar, volte a atualizar e nunca vá.
Nós temos a maioria dos estilos feitos.
Há uma coisa muito pequena
que você provavelmente não notará na tela. A cor do cinza no JumboTron é tão ligeiramente diferente.
Então eu tenho essa cor aqui, vou apenas copiá-lo e
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.
Espero que você possa ver isso mudar.
Simplesmente mudou.
É um cinza ligeiramente mais azulado.
Então vamos testar tudo.
Vamos redimensionar o nosso trabalho de barra NAV.
O Javascript funciona bem.
Aqui vamos nós.
Tudo parece bem.
A última coisa que vou mostrar é como podemos usar um ícone diferente aqui.
Aquele que eu estou usando é de uma biblioteca
chamada diversão divertida e divertida é uma biblioteca simples que inclui muitos ícones diferentes.
Muito mais do que o construído no Bootstrap com ícones para que você possa chegar a ele em Funt.
Não a pegue.
Eu sei que estou na página inicial aqui.
E se clicarmos nos ícones, existem mais de 580 ícones diferentes, você pode vê-los todos aqui.
E um dos recursos agradáveis ​​que você pode pesquisar através deles, o que
você realmente não pode fazer com Pucelle com muita facilidade.
Então, podemos procurar fotos e nós pegamos câmera e a câmera retro, que é o que eu usei.
Mas antes que possamos usar qualquer um, precisamos instalá-lo.
Então, se você começar a começar.
Eles têm um bom CDN que você pode simplesmente copiar e simplesmente colocar isso dentro de sua aplicação.
Então, vamos fazer isso melhor pagar de repente.
E agora podemos usar ícones maravilhosos e divertidos e é realmente muito fácil.
Na verdade, se você clicar em qualquer ícone que quiser, diga que eu quero
usar o sinal de paz, posso clicar nele e eles lhe dão o pequeno código que você pode copiar.
Então, é um ícone com classe igual a f para diversão.
Impressionante.
E então F. UMA. trace o nome do ícone.
Vamos substituir o ícone da câmera por isso, então ele terá um grande sinal de paz, economizando e atualizando.
E temos um sinal de paz.
Então, divertido, incrível.
É muito popular.
Muitos ícones excelentes, como você pode ver praticamente qualquer ícone que você precisaria.
Eles têm um monte de padrões.
Pause play button.
Avançar para trás diferentes ícones para tecnologia e diferentes ícones da Internet.
Mas eles também têm alguns mais divertidos como sinais de paz.
E eu acho que eles também têm uma mão Spock, então nós vamos.
Então você pode usar qualquer um destes, como você usa qualquer outra fonte.
Então, se você quiser alterar a cor, basta alterar a propriedade de cores se quiser alterar o tamanho.
Você realmente muda o tamanho da fonte.
Então, eu vou usar essa câmera retro
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.
Tudo bem, então terminamos com a galeria.
Além de realmente mudar a imagem, você será o que eu farei assim que terminar este encerramento.
Você provavelmente não quer assistir de qualquer maneira, mas no caso de você, eu vou incluí-lo no final.
Então, nós temos o suficiente, o Bartra aqui fez uma pequena
mudança, que usamos agora muito inverso, e é como nós conseguimos a barra de navegação preto e branco.
Mas, em seguida, mudamos de cor de qualquer maneira, de modo que realmente não importava.
E então, também usamos o top da barra de navegação top, que é como ele permanece no topo.
Usamos um sistema de grade aqui e depois usamos um jumbotron.
Eu introduzi o glyph um conceito construído em ícones Bootstrap que são relativamente limitados.
Há a maioria das coisas que você usaria, mas, ocasionalmente, elas não terão algo ou
às vezes você apenas prefere a maneira como os ícones divertidos e divertidos parecem divertidos.
Awesome é definitivamente mais popular do que o show de alimentos com nozes
e a outra coisa nova que mostrei que você era a classe de miniatura, que você pode simplesmente colocar em torno
de uma imagem e isso irá restringir essa imagem em uma grade e adicionar esta pequena e agradável pequena fronteira aqui.
E, finalmente, falamos sobre especificidade e como devemos lutar contra
os estilos do bootstrap se quisermos mudar a cor da cor do fundo.
Deseja alterar a cor de fundo da Nav. ou a cor da fonte para links e também a cor do Nev.
marca aqui.
OK, então é isso no próximo vídeo.
Eu vou mostrar-lhe como podemos criar uma página de destino com o bootstrap.
E como prometi, agora vou copiar e
colar esses links de imagens para criar nove imagens diferentes aqui.
Então, se isso é algo que você quer ver, arraste o próximo minuto ou dois.
ESTÁ BEM.
Então, vou dividir a tela e copi
algumas delas por esta primeira e só vou substituir essa aqui e depois vou fazer a próxima.
Lugar antigo.
Este aqui.
E então, o próximo, tenho
certeza de que isso é fascinante e continuarei na linha exatamente assim.
Tudo bem, estamos a meio caminho.
imagens diferentes.
Estamos chegando
perto e o último que penso que fizemos, digamos, certifique-se de que tudo esteja bom ou fresco e temos nove
Impressionante.
Tudo bem.
Então agora eu terminei.
Espero ter gostado de fazer essa galeria de imagens.
Vejo você no próximo vídeo.