1
00:00:00,660 --> 00:00:05,550
Bem-vindo novamente nesta lição, vamos construir um pequeno projeto usando o que aprendemos até

2
00:00:05,550 --> 00:00:06,740
agora sobre o bootstrap.

3
00:00:06,770 --> 00:00:11,880
Ele incluirá muitos dos componentes dos quais estamos falando, incluindo agora o sistema

4
00:00:12,390 --> 00:00:13,590
jumbotron e grid.

5
00:00:13,920 --> 00:00:17,370
Eu também joguei uma ou duas coisas novas, incluindo os ícones aqui.

6
00:00:17,370 --> 00:00:19,180
Ainda não vimos como fazer aqueles ainda.

7
00:00:19,500 --> 00:00:25,590
E também o fato de que esta barra de navegação como eu rolar isso verá que ele permanece fixo para o topo,

8
00:00:25,590 --> 00:00:30,360
então ele não percorre a maneira como temos uma barra de navegação fixa, que também não vimos ainda.

9
00:00:30,360 --> 00:00:34,800
E, finalmente, estamos alterando algumas das cores dos componentes inicializados do bootstrapped.

10
00:00:34,800 --> 00:00:37,290
Então, esta é realmente uma tonalidade ligeiramente diferente de cinza.

11
00:00:37,380 --> 00:00:40,480
Esta é a sombra de azul e a barra de navegação tem cores diferentes.

12
00:00:40,560 --> 00:00:44,250
Então, vou mostrar-lhe como fazer tudo isso antes de começar a escrever qualquer código.

13
00:00:44,320 --> 00:00:49,420
Apenas quero dar um momento para apontar o fato de que essas imagens, em sua maior parte,

14
00:00:49,420 --> 00:00:52,620
são de um site da Web, um ótimo recurso chamado Splash.

15
00:00:52,920 --> 00:00:57,640
Então, splash oferece um monte de belas fotos rez altas que você pode fazer o que quiser.

16
00:00:57,750 --> 00:01:00,630
Você pode ler a licença aqui, mas é praticamente o que quiser.

17
00:01:00,630 --> 00:01:05,610
É uma licença criativa de comunhão blá blá blá. Tenho certeza de que eu realmente não me importo

18
00:01:05,610 --> 00:01:09,390
com isso, mas as fotos são realmente incríveis e estou usando muitos desses oito.

19
00:01:09,390 --> 00:01:11,450
Na verdade, na nossa galeria.

20
00:01:11,790 --> 00:01:17,280
E isso deixa uma imagem que é esta aqui mesmo que eu realmente me levei a tomar uma aula de

21
00:01:17,280 --> 00:01:21,090
fotografia e esta é a primeira coisa que eu tomei que parece meio decente.

22
00:01:21,090 --> 00:01:24,780
Eu acho que, mesmo que comparado com aqueles que não parecem tão gostosos.

23
00:01:24,780 --> 00:01:28,650
De qualquer forma, se você quiser usar essas mesmas imagens exatas que não são importantes.

24
00:01:28,740 --> 00:01:30,430
Isso funcionará com qualquer imagem.

25
00:01:30,450 --> 00:01:36,180
Mas se você quer exatamente os mesmos, inclua todos os links nesta galeria de arquivos M. D que carregaram junto com este vídeo

26
00:01:36,210 --> 00:01:41,310
e também incluíram as duas cores que vamos usar o azul escuro e

27
00:01:41,310 --> 00:01:42,570
o cinza claro.

28
00:01:42,740 --> 00:01:42,990
ESTÁ BEM.

29
00:01:42,990 --> 00:01:46,790
Então, com tudo isso fora do caminho, vamos começar o projeto.

30
00:01:47,100 --> 00:01:48,740
Então eu tenho uma galeria de arquivos vazia.

31
00:01:48,750 --> 00:01:49,620
Hm l.

32
00:01:49,860 --> 00:01:56,400
m l aqui e chamaremos essa galeria de imagens e a primeira coisa que precisamos fazer é incluir o bootstrap.

33
00:01:56,400 --> 00:01:58,670
Vou adicionar no meu esqueleto h d

34
00:01:58,800 --> 00:02:06,490
E eu apenas vou copiar sobre o CD termina de um projeto antigo, então eu vou fazer isso agora.

35
00:02:06,900 --> 00:02:07,640
Aqui vamos nós.

36
00:02:07,710 --> 00:02:09,830
Estou ligando para o CDN do bootstrap.

37
00:02:10,200 --> 00:02:18,300
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

38
00:02:18,300 --> 00:02:23,580
aqueles no fundo aqui para que, quando adicionamos a barra de navegação, não precisamos ir caçar para

39
00:02:23,580 --> 00:02:25,990
esses arquivos ou para as tags de script.

40
00:02:26,250 --> 00:02:30,250
Então, um salva e a primeira coisa que podemos fazer é adicionar no nosso Jumbotron.

41
00:02:30,510 --> 00:02:32,160
Isso é bom e fácil.

42
00:02:32,400 --> 00:02:38,470
Então teremos uma div e essa será a classe igual a Jumbotron.

43
00:02:38,880 --> 00:02:47,520
E então dentro do Jumbotron começará com um H1 que apenas diz a galeria de imagens.

44
00:02:47,670 --> 00:02:51,420
Aí vamos e salvaremos e vamos ter certeza de que isso funciona.

45
00:02:51,720 --> 00:02:53,660
Então abrirá este arquivo.

46
00:02:54,060 --> 00:02:55,330
Então, nós incluímos o Boucek.

47
00:02:55,350 --> 00:02:56,780
Estamos vendo a mudança de fonte.

48
00:02:56,820 --> 00:02:58,980
Estamos a ver este cinza do Jumbotron.

49
00:02:58,980 --> 00:03:04,560
Vamos agora nos certificar de que está dentro de um recipiente, como está aqui, e não o que temos

50
00:03:04,560 --> 00:03:07,040
onde ele vai todo o caminho pela tela.

51
00:03:07,320 --> 00:03:12,850
Então, nós faremos que a classe div seja igual ao contêiner.

52
00:03:14,010 --> 00:03:21,900
Lá vamos e vamos fazer isso de forma adequada e atualizar e voltaremos.

53
00:03:21,900 --> 00:03:25,140
Tudo bem, então temos o Jumbotron, mas adicione este parágrafo.

54
00:03:25,140 --> 00:03:33,080
Agora vamos voltar e fazer o ícone, mas isso é apenas uma etiqueta de parágrafo abaixo do H-1, vamos salvar.

55
00:03:33,090 --> 00:03:38,040
Sinta-se livre para colocar o texto que quiser, e acabamos com o Jumbotron por enquanto.

56
00:03:38,730 --> 00:03:43,950
vamos agora fazer a barra de navegação e não vou escrever a barra do zero por duas razões.

57
00:03:43,950 --> 00:03:45,190
Então, vamos voltar e

58
00:03:45,210 --> 00:03:46,970
Um deles é um pouco de código.

59
00:03:47,010 --> 00:03:48,000
Vai demorar muito tempo.

60
00:03:48,010 --> 00:03:48,840
E este vídeo.

61
00:03:48,960 --> 00:03:52,870
Mas dois é o fato de eu quase nunca digitar o Ackbar a partir do zero.

62
00:03:53,220 --> 00:03:58,800
Como mencionei no vídeo da NASCAR a maior parte do tempo, meu fluxo de trabalho é que eu vou para o site de bootstrap

63
00:03:58,800 --> 00:04:02,580
ou para um site anterior que fiz com uma barra de NAV e eu copio isso.

64
00:04:02,580 --> 00:04:04,990
E eu apenas verifiquei e eu me livre das peças que eu não quero.

65
00:04:05,010 --> 00:04:06,530
Eu adiciono algumas peças novas no.

66
00:04:06,570 --> 00:04:08,020
Então é aí que vou fazer aqui.

67
00:04:08,160 --> 00:04:14,160
Eu já tenho parte suficiente que eu fiz na barra de navegação disse cada aplicação HTML.

68
00:04:14,280 --> 00:04:19,570
Está bem aqui e eu só vou copiar isso e depois o ajustaremos um pouco.

69
00:04:19,620 --> 00:04:26,940
Então, vamos copiá-lo e eu vou voltar e vamos colocar isso no topo do arquivo exatamente assim.

70
00:04:27,330 --> 00:04:32,770
E vamos ver o que recebemos são frescos e temos a barra de navegação.

71
00:04:33,030 --> 00:04:34,010
Está perto.

72
00:04:34,050 --> 00:04:36,410
Queremos mudar a marca aqui.

73
00:04:36,420 --> 00:04:40,740
Nós também queremos mudar a cor eventualmente e queremos ter certeza de que está fixado no topo,

74
00:04:40,760 --> 00:04:43,020
o que não é agora, mas vamos chegar lá.

75
00:04:43,290 --> 00:04:45,500
Vamos voltar e mudar a marca.

76
00:04:45,690 --> 00:04:49,980
Então, em vez de café, liguei para as minhas imagens, você pode chamar isso do que quiser.

77
00:04:49,980 --> 00:04:53,970
Certamente, certifique-se de que tudo bem.

78
00:04:54,250 --> 00:05:00,490
A próxima coisa que vou mostrar é uma mudança rápida que podemos fazer para alterar a cor onde aparece em vez

79
00:05:00,490 --> 00:05:01,690
de cochilo ou padrão.

80
00:05:01,700 --> 00:05:06,880
Nós podemos fazer agora se o bar em verso e eu vou mostrar o que isso parece.

81
00:05:06,880 --> 00:05:11,770
Agora ficamos escuros por agora ou as cores foram invertidas onde o texto é leve e temos

82
00:05:11,770 --> 00:05:12,500
um fundo escuro.

83
00:05:12,750 --> 00:05:15,660
Ainda não é a cor azul que eu vou para aqui.

84
00:05:16,030 --> 00:05:19,740
E a fonte também não é branca, mas vamos voltar e corrigir isso.

85
00:05:19,750 --> 00:05:21,650
Isso está próximo o suficiente por enquanto.

86
00:05:21,670 --> 00:05:26,100
Agora, podemos nos concentrar na galeria de imagens atual nessa grade aqui.

87
00:05:26,350 --> 00:05:29,640
E vamos começar por ver como ele se comporta na solução.

88
00:05:29,860 --> 00:05:39,160
desce para dois e depois desce para dois e, finalmente, no tamanho pequeno, ele vai para um como você pode ver aqui.

89
00:05:39,160 --> 00:05:44,480
Então, ele começa com três imagens cruzando e então, como eu redimensiono,

90
00:05:44,720 --> 00:05:47,110
E temos uma imagem cruzada.

91
00:05:47,500 --> 00:05:52,780
Vamos começar por configurar a grade para este grande tamanho, onde temos três em frente.

92
00:05:52,780 --> 00:05:54,850
Lembre-se que temos 12 unidades no total.

93
00:05:54,910 --> 00:05:59,730
Então, se quisermos três, vamos designar cada um deles como quatro unidades.

94
00:06:00,160 --> 00:06:04,420
Então vamos configurar isso logo abaixo do nosso Jumbotron.

95
00:06:04,420 --> 00:06:13,900
Ainda dentro do contêiner, embora simplesmente façamos a classe div igual a linha e, em seguida, dentro disso, teremos igualdade

96
00:06:13,900 --> 00:06:17,680
de div e queremos que sejam quatro unidades.

97
00:06:17,770 --> 00:06:27,120
Então, vamos fazer a coluna grande dash 4 e apertei enter e podemos começar apenas colocando algum texto aqui e depois

98
00:06:27,120 --> 00:06:30,260
vou duplicar isso porque queremos três desses.

99
00:06:30,430 --> 00:06:35,170
E não vou me preocupar em corrigir a indentação ainda porque vamos fazer uma mudança maior em apenas

100
00:06:35,170 --> 00:06:35,770
um momento.

101
00:06:36,100 --> 00:06:40,170
Mas vamos atualizar e nós recebemos essas três colunas.

102
00:06:40,180 --> 00:06:47,050
Então, a próxima coisa que queremos fazer é obter algumas imagens e todos começam, mas apenas levando a L

103
00:06:47,050 --> 00:06:52,860
da minha foto da Golden Gate Bridge e vamos adicionar uma imagem em vez de texto.

104
00:06:52,910 --> 00:07:00,820
imagem é igual a que a Golden Gate Bridge você está doente e eu apenas vou colar isso três vezes e salvar.

105
00:07:01,210 --> 00:07:02,620
Então, a fonte da

106
00:07:02,620 --> 00:07:09,430
E se voltamos, temos um problema que é que essa imagem é enorme mesmo que tenhamos essas

107
00:07:09,430 --> 00:07:10,310
três colunas.

108
00:07:10,360 --> 00:07:14,010
Nossa imagem não fica dentro da nossa coluna, não está diminuindo.

109
00:07:14,010 --> 00:07:19,010
Você pode ver o que faremos para consertar isso é adicionar adicionando um pouco mais de bootstrap.

110
00:07:19,030 --> 00:07:24,670
Eu ainda não mostrei que você crie essa pequena e agradável borda ao redor e é chamada de miniatura.

111
00:07:24,700 --> 00:07:29,520
Tudo o que precisamos fazer é escrever uma div com classe igual à miniatura e, em

112
00:07:29,530 --> 00:07:33,250
seguida, qualquer imagem que colocemos dentro dela seja reduzida para dentro da coluna.

113
00:07:33,250 --> 00:07:37,090
E também obtém essa pequena fronteira aqui, que acho que parece muito legal.

114
00:07:37,090 --> 00:07:43,720
Então, para fazer isso, eu realmente vou me livrar do que temos com aqueles

115
00:07:43,720 --> 00:07:52,600
para voltar a uma única imagem e adicionar uma classe div igual a miniatura e feito isso corretamente.

116
00:07:52,930 --> 00:07:57,880
E nós envolvemos isso ao redor da imagem e salvamos.

117
00:07:57,880 --> 00:08:00,350
Agora, se atualizarmos.

118
00:08:01,150 --> 00:08:06,470
Você verá se obtemos uma única imagem que ocupe a quantidade apropriada de espaço dentro dessa grade.

119
00:08:06,730 --> 00:08:11,710
Esta é a coluna e tem uma pequena borda ao redor e a imagem não é gigantesca, o que é ótimo.

120
00:08:12,700 --> 00:08:15,980
Então, vamos ter certeza de que funciona se duplicarmos isso.

121
00:08:16,060 --> 00:08:22,430
Então, esta é uma imagem, vamos duplicar isso três vezes e ver o que acontece atualizar.

122
00:08:22,780 --> 00:08:23,610
E nós vamos lá.

123
00:08:23,710 --> 00:08:25,380
Temos três imagens.

124
00:08:25,380 --> 00:08:27,290
Vou seguir em frente e adicionar mais seis.

125
00:08:27,360 --> 00:08:29,790
Então, temos nove total como nós fazemos aqui.

126
00:08:30,490 --> 00:08:32,830
E nós realmente não precisamos adicionar linhas separadas.

127
00:08:33,040 --> 00:08:35,110
Nós podemos simplesmente colocá-los todos na mesma linha.

128
00:08:35,200 --> 00:08:40,420
Então copie os três que temos até agora e economize.

129
00:08:40,480 --> 00:08:42,730
Isso nos dará nove imagens.

130
00:08:42,730 --> 00:08:46,950
E se eu atualizar, verá que eles se enrolam automaticamente para a próxima linha.

131
00:08:47,230 --> 00:08:52,390
Então, nós só temos que ter uma linha e adicionar nessas colunas que você conhece nos médicos.

132
00:08:52,480 --> 00:08:57,820
Se quisermos que cada imagem ocupe quatro unidades, isso significa três por linha e então precisamos de três

133
00:08:57,820 --> 00:08:58,720
linhas de imagens.

134
00:08:58,780 --> 00:09:02,150
Eu vou voltar e mudar toda essa imagem que você elves no final do vídeo.

135
00:09:02,160 --> 00:09:03,600
Eu não quero fazer você assistir isso.

136
00:09:03,630 --> 00:09:08,580
Muito interessante apenas copiando e colando, mas vamos nos concentrar no resto dessa grade.

137
00:09:08,580 --> 00:09:16,360
Então, agora, assim que um meio de sucesso, ele vai para uma imagem em que não é o que

138
00:09:16,360 --> 00:09:21,420
queremos, o que procuramos é duas imagens no ponto de interrupção do meio.

139
00:09:21,700 --> 00:09:27,940
E então, após o ponto médio de quebra que está lá, batemos pequenos e ainda queremos que ele fique no 2.

140
00:09:28,750 --> 00:09:34,690
Então, para corrigir isso no nosso ou ele vai para um imediatamente no ponto de interrupção grande ou o

141
00:09:35,110 --> 00:09:39,310
ponto de interrupção médio e, em seguida, pequeno e extra pequeno fica em 1.

142
00:09:39,460 --> 00:09:48,430
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

143
00:09:48,880 --> 00:09:53,970
vou clicar na seta para a esquerda ou para a direita para mover o cursor.

144
00:09:53,990 --> 00:09:55,840
Agora eu posso editar todos de uma só vez.

145
00:09:56,020 --> 00:10:04,240
E o que eu quero fazer, eu poderia adicionar na coluna média seis porque queremos a Perrow e isso funcionará.

146
00:10:04,410 --> 00:10:10,690
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

147
00:10:10,720 --> 00:10:11,920
eles vão para 2.

148
00:10:12,280 --> 00:10:20,820
Mas então eu bati pequeno e salta para um e para o nosso quando atingimos pequeno, a solução permanece em 2.

149
00:10:20,830 --> 00:10:31,830
Então, para consertar isso, em vez de fazer a coluna de meio seis, podemos fazer a coluna pequena 6 e voltar novamente,

150
00:10:31,890 --> 00:10:33,390
atualizar essa versão.

151
00:10:33,730 --> 00:10:34,680
Nós atingimos o meio.

152
00:10:34,680 --> 00:10:35,590
Vamos para dois.

153
00:10:35,800 --> 00:10:36,750
Nós atingimos pequenas.

154
00:10:36,760 --> 00:10:43,530
Nós ficamos às 2 e depois vamos para extra pequeno e estamos em 1 1 imagem por linha.

155
00:10:43,810 --> 00:10:44,620
Perfeito.

156
00:10:44,910 --> 00:10:49,060
Então, é tudo o que temos que fazer para a grade e acabamos com a maioria das funcionalidades aqui.

157
00:10:49,170 --> 00:10:51,050
Muito rápido para começar a funcionar.

158
00:10:51,220 --> 00:10:55,570
O que queremos focar agora são algumas das cores e também os ícones.

159
00:10:55,870 --> 00:10:58,890
Vou começar mostrando como nós adicionamos ícones usando o bootstrap.

160
00:10:59,080 --> 00:11:06,180
você for aos componentes, há esses ícones de glifos no topo e há um monte deles para escolher.

161
00:11:06,180 --> 00:11:07,670
Então, obtenha bootstrap se

162
00:11:08,320 --> 00:11:11,840
E encontraremos um que queremos usar e aquele que estou usando.

163
00:11:12,100 --> 00:11:14,710
Vou fazer uma busca, acho que é uma câmera.

164
00:11:14,710 --> 00:11:17,920
Então, esta câmera está aqui e eu não estou usando essa câmera.

165
00:11:18,040 --> 00:11:19,310
É um pouco diferente.

166
00:11:19,330 --> 00:11:23,080
Aquele que estou usando é uma câmera mais retro e vou mostrar-lhe como adicionar isso.

167
00:11:23,080 --> 00:11:28,220
Na verdade, não faz parte do bootstrap. Mas vamos começar com a câmera comum que vem com o bootstrap.

168
00:11:28,810 --> 00:11:32,040
Então, escrevemos Clifford Kahn e depois vamos com a câmera de derivação.

169
00:11:32,160 --> 00:11:38,230
E se você rolar mais para baixo, você pode ver onde eles explicam como usá-lo para criar uma extensão onde

170
00:11:38,230 --> 00:11:43,450
uma classe é igual a Con e, em seguida, glifo, pode traçar o nome do ícone do glifo.

171
00:11:43,480 --> 00:11:49,600
Então, vamos copiar esse espaço e vamos começar por fazê-lo dentro do H-1,

172
00:11:49,600 --> 00:11:58,200
basta colocá-lo no início da H-1 e queremos uma rápida câmera A-Kon dash e vamos economizar e atualizar.

173
00:11:58,600 --> 00:12:01,060
E assim, você pode obter uma câmera lá.

174
00:12:01,410 --> 00:12:07,350
E se queremos espaço, podemos fazê-lo através do preenchimento ou podemos simplesmente adicionar um espaço ali mesmo.

175
00:12:08,260 --> 00:12:14,590
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 é

176
00:12:15,050 --> 00:12:16,970
chamado de Foto, vá verificar novamente aqui.

177
00:12:16,980 --> 00:12:22,780
Você pode fazer uma pesquisa nesta página para foto foto.

178
00:12:22,890 --> 00:12:24,080
Aí está.

179
00:12:24,260 --> 00:12:26,890
Pode ir se ele pode jogar a imagem.

180
00:12:27,730 --> 00:12:32,890
Então, iremos até a marca da barra de navegação aqui e colamos nesse espaço novamente.

181
00:12:33,120 --> 00:12:41,420
E então dentro do espaço, a classe deve clicar na imagem e também adicionaremos um espaço.

182
00:12:41,460 --> 00:12:45,880
Nós voltamos para o nosso site são frescos e agora temos uma pequena foto lá.

183
00:12:46,360 --> 00:12:47,930
E também temos a câmera.

184
00:12:48,150 --> 00:12:54,570
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.

185
00:12:54,790 --> 00:12:56,470
Isso sonha nos nossos pergaminhos.

186
00:12:56,950 --> 00:12:59,210
Mas na solução permanece lá.

187
00:12:59,640 --> 00:13:04,460
E para fazer isso, é uma classe única que temos de adicionar à nossa barra de NAV.

188
00:13:04,480 --> 00:13:11,800
Então, aqui em cima, queremos que o barramento do nav barrecione o topo das guias e salve.

189
00:13:12,120 --> 00:13:16,570
E se estamos frescos, você verá que está fixado no topo.

190
00:13:16,570 --> 00:13:23,080
Há uma pequena questão, que é que o nosso conteúdo está atrasado um pouco e queremos

191
00:13:23,230 --> 00:13:25,800
ter esse espaçamento normal acima do Jumbotron.

192
00:13:25,810 --> 00:13:32,770
O que precisamos fazer é adicionar um pouco de preenchimento ao nosso corpo e acontece com 70 pixels.

193
00:13:32,770 --> 00:13:37,720
Os documentos do bootstrap dir-lhe-ão que se você esquecer 70 pixels de preenchimento é o que queremos, essa

194
00:13:37,710 --> 00:13:39,320
é a largura do agora quatro.

195
00:13:39,490 --> 00:13:47,250
Então, iremos aqui e vamos criar uma folha de estilos agora e irei chamá-la de galeria Dotsie

196
00:13:48,120 --> 00:13:58,300
SS e, em seguida, dentro do preenchimento de corpo selecionado top 70 pixels e então precisamos adicionar isso em relação a essa

197
00:13:58,410 --> 00:14:01,850
folha de estilos que é Gallery CS S.

198
00:14:01,920 --> 00:14:03,760
Agora vamos ter certeza de que está funcionando.

199
00:14:03,790 --> 00:14:04,330
Aqui vamos nós.

200
00:14:04,360 --> 00:14:10,860
Nós temos o nosso espaçamento para trás e NFR ainda está fixado no topo, como você pode ver perfeito