Bem-vindo novamente nesta lição, vamos construir um pequeno projeto usando o que aprendemos até
agora sobre o bootstrap.
Ele incluirá muitos dos componentes dos quais estamos falando, incluindo agora o sistema
jumbotron e grid.
Eu também joguei uma ou duas coisas novas, incluindo os ícones aqui.
Ainda não vimos como fazer aqueles ainda.
E também o fato de que esta barra de navegação como eu rolar isso verá que ele permanece fixo para o topo,
então ele não percorre a maneira como temos uma barra de navegação fixa, que também não vimos ainda.
E, finalmente, estamos alterando algumas das cores dos componentes inicializados do bootstrapped.
Então, esta é realmente uma tonalidade ligeiramente diferente de cinza.
Esta é a sombra de azul e a barra de navegação tem cores diferentes.
Então, vou mostrar-lhe como fazer tudo isso antes de começar a escrever qualquer código.
Apenas quero dar um momento para apontar o fato de que essas imagens, em sua maior parte,
são de um site da Web, um ótimo recurso chamado Splash.
Então, splash oferece um monte de belas fotos rez altas que você pode fazer o que quiser.
Você pode ler a licença aqui, mas é praticamente o que quiser.
É uma licença criativa de comunhão blá blá blá. Tenho certeza de que eu realmente não me importo
com isso, mas as fotos são realmente incríveis e estou usando muitos desses oito.
Na verdade, na nossa galeria.
E isso deixa uma imagem que é esta aqui mesmo que eu realmente me levei a tomar uma aula de
fotografia e esta é a primeira coisa que eu tomei que parece meio decente.
Eu acho que, mesmo que comparado com aqueles que não parecem tão gostosos.
De qualquer forma, se você quiser usar essas mesmas imagens exatas que não são importantes.
Isso funcionará com qualquer imagem.
Mas se você quer exatamente os mesmos, inclua todos os links nesta galeria de arquivos M. D que carregaram junto com este vídeo
e também incluíram as duas cores que vamos usar o azul escuro e
o cinza claro.
ESTÁ BEM.
Então, com tudo isso fora do caminho, vamos começar o projeto.
Então eu tenho uma galeria de arquivos vazia.
Hm l.
m l aqui e chamaremos essa galeria de imagens e a primeira coisa que precisamos fazer é incluir o bootstrap.
Vou adicionar no meu esqueleto h d
E eu apenas vou copiar sobre o CD termina de um projeto antigo, então eu vou fazer isso agora.
Aqui vamos nós.
Estou ligando para o CDN do bootstrap.
E enquanto eu estiver aqui também vou pegar o bootstraps CSSA e Jay queery city e que fizemos na aula de barra de navegação e colocamos
aqueles no fundo aqui para que, quando adicionamos a barra de navegação, não precisamos ir caçar para
esses arquivos ou para as tags de script.
Então, um salva e a primeira coisa que podemos fazer é adicionar no nosso Jumbotron.
Isso é bom e fácil.
Então teremos uma div e essa será a classe igual a Jumbotron.
E então dentro do Jumbotron começará com um H1 que apenas diz a galeria de imagens.
Aí vamos e salvaremos e vamos ter certeza de que isso funciona.
Então abrirá este arquivo.
Então, nós incluímos o Boucek.
Estamos vendo a mudança de fonte.
Estamos a ver este cinza do Jumbotron.
Vamos agora nos certificar de que está dentro de um recipiente, como está aqui, e não o que temos
onde ele vai todo o caminho pela tela.
Então, nós faremos que a classe div seja igual ao contêiner.
Lá vamos e vamos fazer isso de forma adequada e atualizar e voltaremos.
Tudo bem, então temos o Jumbotron, mas adicione este parágrafo.
Agora vamos voltar e fazer o ícone, mas isso é apenas uma etiqueta de parágrafo abaixo do H-1, vamos salvar.
Sinta-se livre para colocar o texto que quiser, e acabamos com o Jumbotron por enquanto.
vamos agora fazer a barra de navegação e não vou escrever a barra do zero por duas razões.
Então, vamos voltar e
Um deles é um pouco de código.
Vai demorar muito tempo.
E este vídeo.
Mas dois é o fato de eu quase nunca digitar o Ackbar a partir do zero.
Como mencionei no vídeo da NASCAR a maior parte do tempo, meu fluxo de trabalho é que eu vou para o site de bootstrap
ou para um site anterior que fiz com uma barra de NAV e eu copio isso.
E eu apenas verifiquei e eu me livre das peças que eu não quero.
Eu adiciono algumas peças novas no.
Então é aí que vou fazer aqui.
Eu já tenho parte suficiente que eu fiz na barra de navegação disse cada aplicação HTML.
Está bem aqui e eu só vou copiar isso e depois o ajustaremos um pouco.
Então, vamos copiá-lo e eu vou voltar e vamos colocar isso no topo do arquivo exatamente assim.
E vamos ver o que recebemos são frescos e temos a barra de navegação.
Está perto.
Queremos mudar a marca aqui.
Nós também queremos mudar a cor eventualmente e queremos ter certeza de que está fixado no topo,
o que não é agora, mas vamos chegar lá.
Vamos voltar e mudar a marca.
Então, em vez de café, liguei para as minhas imagens, você pode chamar isso do que quiser.
Certamente, certifique-se de que tudo bem.
A próxima coisa que vou mostrar é uma mudança rápida que podemos fazer para alterar a cor onde aparece em vez
de cochilo ou padrão.
Nós podemos fazer agora se o bar em verso e eu vou mostrar o que isso parece.
Agora ficamos escuros por agora ou as cores foram invertidas onde o texto é leve e temos
um fundo escuro.
Ainda não é a cor azul que eu vou para aqui.
E a fonte também não é branca, mas vamos voltar e corrigir isso.
Isso está próximo o suficiente por enquanto.
Agora, podemos nos concentrar na galeria de imagens atual nessa grade aqui.
E vamos começar por ver como ele se comporta na solução.
desce para dois e depois desce para dois e, finalmente, no tamanho pequeno, ele vai para um como você pode ver aqui.
Então, ele começa com três imagens cruzando e então, como eu redimensiono,
E temos uma imagem cruzada.
Vamos começar por configurar a grade para este grande tamanho, onde temos três em frente.
Lembre-se que temos 12 unidades no total.
Então, se quisermos três, vamos designar cada um deles como quatro unidades.
Então vamos configurar isso logo abaixo do nosso Jumbotron.
Ainda dentro do contêiner, embora simplesmente façamos a classe div igual a linha e, em seguida, dentro disso, teremos igualdade
de div e queremos que sejam quatro unidades.
Então, vamos fazer a coluna grande dash 4 e apertei enter e podemos começar apenas colocando algum texto aqui e depois
vou duplicar isso porque queremos três desses.
E não vou me preocupar em corrigir a indentação ainda porque vamos fazer uma mudança maior em apenas
um momento.
Mas vamos atualizar e nós recebemos essas três colunas.
Então, a próxima coisa que queremos fazer é obter algumas imagens e todos começam, mas apenas levando a L
da minha foto da Golden Gate Bridge e vamos adicionar uma imagem em vez de texto.
imagem é igual a que a Golden Gate Bridge você está doente e eu apenas vou colar isso três vezes e salvar.
Então, a fonte da
E se voltamos, temos um problema que é que essa imagem é enorme mesmo que tenhamos essas
três colunas.
Nossa imagem não fica dentro da nossa coluna, não está diminuindo.
Você pode ver o que faremos para consertar isso é adicionar adicionando um pouco mais de bootstrap.
Eu ainda não mostrei que você crie essa pequena e agradável borda ao redor e é chamada de miniatura.
Tudo o que precisamos fazer é escrever uma div com classe igual à miniatura e, em
seguida, qualquer imagem que colocemos dentro dela seja reduzida para dentro da coluna.
E também obtém essa pequena fronteira aqui, que acho que parece muito legal.
Então, para fazer isso, eu realmente vou me livrar do que temos com aqueles
para voltar a uma única imagem e adicionar uma classe div igual a miniatura e feito isso corretamente.
E nós envolvemos isso ao redor da imagem e salvamos.
Agora, se atualizarmos.
Você verá se obtemos uma única imagem que ocupe a quantidade apropriada de espaço dentro dessa grade.
Esta é a coluna e tem uma pequena borda ao redor e a imagem não é gigantesca, o que é ótimo.
Então, vamos ter certeza de que funciona se duplicarmos isso.
Então, esta é uma imagem, vamos duplicar isso três vezes e ver o que acontece atualizar.
E nós vamos lá.
Temos três imagens.
Vou seguir em frente e adicionar mais seis.
Então, temos nove total como nós fazemos aqui.
E nós realmente não precisamos adicionar linhas separadas.
Nós podemos simplesmente colocá-los todos na mesma linha.
Então copie os três que temos até agora e economize.
Isso nos dará nove imagens.
E se eu atualizar, verá que eles se enrolam automaticamente para a próxima linha.
Então, nós só temos que ter uma linha e adicionar nessas colunas que você conhece nos médicos.
Se quisermos que cada imagem ocupe quatro unidades, isso significa três por linha e então precisamos de três
linhas de imagens.
Eu vou voltar e mudar toda essa imagem que você elves no final do vídeo.
Eu não quero fazer você assistir isso.
Muito interessante apenas copiando e colando, mas vamos nos concentrar no resto dessa grade.
Então, agora, assim que um meio de sucesso, ele vai para uma imagem em que não é o que
queremos, o que procuramos é duas imagens no ponto de interrupção do meio.
E então, após o ponto médio de quebra que está lá, batemos pequenos e ainda queremos que ele fique no 2.
Então, para corrigir isso no nosso ou ele vai para um imediatamente no ponto de interrupção grande ou o
ponto de interrupção médio e, em seguida, pequeno e extra pequeno fica em 1.
Podemos voltar aqui e mudaremos tudo isso que você conhece, selecione e aperte o comando d selecione todas as instâncias de chamadas para grandes e então
vou clicar na seta para a esquerda ou para a direita para mover o cursor.
Agora eu posso editar todos de uma só vez.
E o que eu quero fazer, eu poderia adicionar na coluna média seis porque queremos a Perrow e isso funcionará.
E se eu voltar e atualizar, você verá que ficam em 3 por linha e então eu atinge o ponto de parada mediano e
eles vão para 2.
Mas então eu bati pequeno e salta para um e para o nosso quando atingimos pequeno, a solução permanece em 2.
Então, para consertar isso, em vez de fazer a coluna de meio seis, podemos fazer a coluna pequena 6 e voltar novamente,
atualizar essa versão.
Nós atingimos o meio.
Vamos para dois.
Nós atingimos pequenas.
Nós ficamos às 2 e depois vamos para extra pequeno e estamos em 1 1 imagem por linha.
Perfeito.
Então, é tudo o que temos que fazer para a grade e acabamos com a maioria das funcionalidades aqui.
Muito rápido para começar a funcionar.
O que queremos focar agora são algumas das cores e também os ícones.
Vou começar mostrando como nós adicionamos ícones usando o bootstrap.
você for aos componentes, há esses ícones de glifos no topo e há um monte deles para escolher.
Então, obtenha bootstrap se
E encontraremos um que queremos usar e aquele que estou usando.
Vou fazer uma busca, acho que é uma câmera.
Então, esta câmera está aqui e eu não estou usando essa câmera.
É um pouco diferente.
Aquele que estou usando é uma câmera mais retro e vou mostrar-lhe como adicionar isso.
Na verdade, não faz parte do bootstrap. Mas vamos começar com a câmera comum que vem com o bootstrap.
Então, escrevemos Clifford Kahn e depois vamos com a câmera de derivação.
E se você rolar mais para baixo, você pode ver onde eles explicam como usá-lo para criar uma extensão onde
uma classe é igual a Con e, em seguida, glifo, pode traçar o nome do ícone do glifo.
Então, vamos copiar esse espaço e vamos começar por fazê-lo dentro do H-1,
basta colocá-lo no início da H-1 e queremos uma rápida câmera A-Kon dash e vamos economizar e atualizar.
E assim, você pode obter uma câmera lá.
E se queremos espaço, podemos fazê-lo através do preenchimento ou podemos simplesmente adicionar um espaço ali mesmo.
E nós conseguimos um espaço que podemos fazer exatamente a mesma coisa para a barra de navegação e eu usei um que é
chamado de Foto, vá verificar novamente aqui.
Você pode fazer uma pesquisa nesta página para foto foto.
Aí está.
Pode ir se ele pode jogar a imagem.
Então, iremos até a marca da barra de navegação aqui e colamos nesse espaço novamente.
E então dentro do espaço, a classe deve clicar na imagem e também adicionaremos um espaço.
Nós voltamos para o nosso site são frescos e agora temos uma pequena foto lá.
E também temos a câmera.
Em seguida, vamos abordar a barra de navegação e vamos começar por fazê-lo fixado no topo para que você possa ver agora.
Isso sonha nos nossos pergaminhos.
Mas na solução permanece lá.
E para fazer isso, é uma classe única que temos de adicionar à nossa barra de NAV.
Então, aqui em cima, queremos que o barramento do nav barrecione o topo das guias e salve.
E se estamos frescos, você verá que está fixado no topo.
Há uma pequena questão, que é que o nosso conteúdo está atrasado um pouco e queremos
ter esse espaçamento normal acima do Jumbotron.
O que precisamos fazer é adicionar um pouco de preenchimento ao nosso corpo e acontece com 70 pixels.
Os documentos do bootstrap dir-lhe-ão que se você esquecer 70 pixels de preenchimento é o que queremos, essa
é a largura do agora quatro.
Então, iremos aqui e vamos criar uma folha de estilos agora e irei chamá-la de galeria Dotsie
SS e, em seguida, dentro do preenchimento de corpo selecionado top 70 pixels e então precisamos adicionar isso em relação a essa
folha de estilos que é Gallery CS S.
Agora vamos ter certeza de que está funcionando.
Aqui vamos nós.
Nós temos o nosso espaçamento para trás e NFR ainda está fixado no topo, como você pode ver perfeito