1
00:00:00,330 --> 00:00:05,740
Bem-vindo novamente nesta lição, vamos usar o bootstrap para criar uma página de destino para uma inicialização fictícia.

2
00:00:06,070 --> 00:00:08,760
Nosso arranque é chamado de correspondência perfeita.

3
00:00:08,760 --> 00:00:09,210
Muito engraçado.

4
00:00:09,210 --> 00:00:15,300
Eu sei que é um aplicativo de namoro de felino humano e deixarei isso para você interpretar o que namoro

5
00:00:15,300 --> 00:00:21,750
de felino humano pode ser relativamente inócuo, poderia ser apenas combinar os gatos de Sheldrick com seres humanos solitários poderia ser

6
00:00:21,750 --> 00:00:22,430
outra coisa.

7
00:00:22,440 --> 00:00:23,260
Eu não sei.

8
00:00:23,550 --> 00:00:27,690
Vamos começar fazendo um rápido passeio pelo site e escrevemos para ela.

9
00:00:27,690 --> 00:00:29,920
Realmente apenas quero dizer apontar alguns recursos.

10
00:00:29,970 --> 00:00:31,250
Não há muito aqui.

11
00:00:31,290 --> 00:00:33,780
Na verdade, não temos isso conectado, não faz nada ainda.

12
00:00:33,840 --> 00:00:37,770
Então, é realmente apenas mounseers HD, mas isso é tudo o que cobrimos até agora.

13
00:00:38,100 --> 00:00:42,510
Então, temos o suficiente na nossa casa de combinação perfeita sobre os comprimentos de incontact.

14
00:00:42,510 --> 00:00:50,100
Eles na verdade não vão a qualquer lugar se inscrever e logar no lado direito dois pequenos ícones lá, nós

15
00:00:50,100 --> 00:00:51,030
conseguimos seu hambúrguer.

16
00:00:51,180 --> 00:00:52,320
Posso clicar nele.

17
00:00:52,380 --> 00:00:55,980
Todos esses links estão agora dentro desse hambúrguer.

18
00:00:55,980 --> 00:01:01,650
Então temos uma grande imagem de fundo que permanece centrada e cobre todo o plano de fundo.

19
00:01:01,740 --> 00:01:07,590
Então, no meio, temos o nome da nossa combinação perfeita com o nosso e, em seguida, temos nossa legenda O

20
00:01:07,650 --> 00:01:09,750
único feed humano no aplicativo de namoro.

21
00:01:09,750 --> 00:01:15,420
E então temos um pouco H R aqui regra horizontal e, em seguida, um botão para começar com um ícone.

22
00:01:15,810 --> 00:01:21,990
E enquanto encolho isso, tudo fica no meio e também se move um pouco para que não tenhamos algum tipo

23
00:01:21,990 --> 00:01:26,960
de layout estranho no seu dispositivo móvel, onde o texto começa a meio caminho da página.

24
00:01:27,060 --> 00:01:29,690
Então, movemos um pouco e permanece centrado.

25
00:01:29,700 --> 00:01:33,900
Esses layouts são realmente fáceis de fazer e inicializar, mas é relativamente eficaz para a página de destino.

26
00:01:33,900 --> 00:01:38,180
Tudo o que temos é uma única coluna que ocupa toda a largura.

27
00:01:38,220 --> 00:01:40,850
Então, esta coluna passa por 12 unidades.

28
00:01:40,860 --> 00:01:46,890
Não estamos dividindo isso em nenhuma seção apenas para uma coluna de 12 unidades e, em seguida,

29
00:01:46,890 --> 00:01:48,510
concentramos tudo dentro dessa coluna.

30
00:01:48,540 --> 00:01:49,860
Então vamos começar.

31
00:01:49,860 --> 00:01:52,350
A primeira coisa que precisamos fazer é fazer um arquivo.

32
00:01:52,440 --> 00:01:54,640
Eu tenho um índice chamado no DML.

33
00:01:54,720 --> 00:01:58,890
Eu adicionarei isso em minha partida normal e

34
00:02:01,700 --> 00:02:04,950
melhorarei e adicionarei no Bootstrap e

35
00:02:08,580 --> 00:02:10,410
usarei CDN Bitstrips CDN.

36
00:02:11,490 --> 00:02:14,350
Vamos fazer o SS e o Javascript aqui.

37
00:02:14,400 --> 00:02:16,860
Nós precisaremos desse javascript para a barra de tarefas.

38
00:02:17,220 --> 00:02:19,130
Então precisamos ligar a tag.

39
00:02:19,710 --> 00:02:22,770
Então, obtemos o javascript.

40
00:02:22,770 --> 00:02:24,030
Entendido.

41
00:02:24,090 --> 00:02:32,030
Coloque isso na parte inferior, que é uma etiqueta de script e, em seguida, estabelecemos a fonte igual à que você é.

42
00:02:32,520 --> 00:02:41,040
Agora, se abrimos isso, abra o console, temos um pequeno problema, que é necessário que a Jay consulte

43
00:02:41,040 --> 00:02:43,390
também para o javascript bootstrap.

44
00:02:43,450 --> 00:02:46,290
Lembre-se da lição da barra de navegação que precisamos para exigir J.

45
00:02:46,290 --> 00:02:46,750
Querrey.

46
00:02:46,860 --> 00:02:52,500
Então, obteremos um CDN para isso.

47
00:02:53,730 --> 00:02:55,290
Vamos fazer a versão modificada.

48
00:02:55,290 --> 00:02:57,500
Copie esse URL.

49
00:02:57,600 --> 00:03:04,110
E, finalmente, voltamos aqui e temos que fazê-lo antes do vinculado ao bootstrap para o javascript.

50
00:03:04,440 --> 00:03:09,360
Caso contrário, ainda não saberá sobre sua consulta, então ele precisa carregar a consulta primeiro.

51
00:03:09,360 --> 00:03:10,650
Agora vamos tentar de novo.

52
00:03:10,870 --> 00:03:11,960
Atualização de incêndio.

53
00:03:12,520 --> 00:03:17,490
OK, não vemos nada que seja um bom sinal porque não vemos erros.

54
00:03:18,570 --> 00:03:20,850
Vamos começar com o texto no meio.

55
00:03:20,850 --> 00:03:22,480
Todo esse conteúdo aqui.

56
00:03:22,620 --> 00:03:29,570
para o contêiner de classe de ECO de div e, em seguida, dentro de lá, temos outra div, sempre precisamos dessa linha.

57
00:03:30,870 --> 00:03:35,870
Então, precisamos criar um recipiente e, em seguida, dentro do recipiente, precisamos de uma linha

58
00:03:35,930 --> 00:03:45,780
Sempre que estiver usando o sistema de grade e, em seguida, nossa div que vai ser classe igual a 12

59
00:03:46,230 --> 00:03:47,220
da coluna.

60
00:03:48,240 --> 00:03:50,750
E isso abrangerá todo esse contenedor.

61
00:03:51,210 --> 00:03:59,330
E então, dentro, se eles tiverem um H1 que apenas dirá uma combinação perfeita e salve.

62
00:03:59,520 --> 00:04:02,280
E vamos deixá-lo naquele refresco.

63
00:04:02,580 --> 00:04:06,660
E não é realmente o que queremos ainda e isso é porque há algumas coisas que precisamos fazer.

64
00:04:06,660 --> 00:04:09,010
O primeiro é que precisamos centrar tudo naquela coluna.

65
00:04:09,300 --> 00:04:16,700
Então, se nós inspecionamos o que estamos lidando aqui, você pode ver que o H1 vai todo o caminho

66
00:04:16,710 --> 00:04:19,190
e precisamos apenas centrá-lo dentro disso.

67
00:04:19,410 --> 00:04:21,680
E o segundo é que precisamos empurrá-lo um pouco.

68
00:04:21,720 --> 00:04:26,250
Precisamos adicionar algum preenchimento ou margem, de modo que não vá diretamente ao topo da nossa página.

69
00:04:26,250 --> 00:04:28,480
Vamos começar adicionando o resto do conteúdo.

70
00:04:28,830 --> 00:04:36,180
Então, também temos o único aplicativo de namoro felino humano e isso só será um

71
00:04:36,180 --> 00:04:46,110
H 3 e poderemos realmente jogar com esse elemento que queremos, mas vou tornar um H-3 o único aplicativo de

72
00:04:46,590 --> 00:04:47,730
namoro felino humano.

73
00:04:48,090 --> 00:04:54,060
E então, podemos adicionar essa regra horizontal que não parecerá muito, mas vamos desenhá-la depois

74
00:04:54,060 --> 00:04:59,180
do fato e então também adicionaremos um botão na classe nesse botão.

75
00:04:59,240 --> 00:05:01,680
Demos uma olhada.

76
00:05:02,100 --> 00:05:06,010
Este é um botão de bootstrap padrão e é um botão grande.

77
00:05:06,330 --> 00:05:07,830
Vamos voltar.

78
00:05:07,830 --> 00:05:18,120
Então, precisamos de PTEN e, em seguida, a cor padrão e, em seguida, o tamanho entre o LG para grande e

79
00:05:18,120 --> 00:05:20,520
aqui, vamos apenas adicionar o

80
00:05:24,290 --> 00:05:29,320
texto que é iniciado e salvar, vamos ver o que acabamos.

81
00:05:29,340 --> 00:05:30,330
Tudo bem.

82
00:05:30,330 --> 00:05:34,270
Então, temos nosso conteúdo agora próximo, mas Centro dentro da grade.

83
00:05:34,470 --> 00:05:36,920
E então nos concentraremos no preenchimento e desceremos.

84
00:05:36,930 --> 00:05:41,430
Mas para começar com o centro dentro desta grade e para facilitar isso, vou agrupar tudo dentro

85
00:05:41,430 --> 00:05:44,720
de uma div para que não tenhamos que centrar cada coisa individualmente.

86
00:05:44,760 --> 00:05:49,680
Temos que centrar o H-1 e, em seguida, os três e, em seguida, o botão em vez disso, podemos agrupar em um div

87
00:05:49,680 --> 00:05:51,430
e apenas Centro que div com uma linha.

88
00:05:51,750 --> 00:06:01,490
Vamos fazer uma div e vou dar uma identificação de Cantet e então vamos colocar tudo dentro de lá.

89
00:06:01,560 --> 00:06:08,340
Então, o H-1 com a idade de 3 anos. R. e o botão irá recuar corretamente e salvar.

90
00:06:08,580 --> 00:06:13,420
Então, nada deve parecer diferente se eu atualizar a página antes de fazermos isso, vamos adicionar nossa folha de estilo.

91
00:06:14,340 --> 00:06:18,840
Então eu adicionei uma tag de link e ligarei para o meu aplicativo de folha de estilo.

92
00:06:18,920 --> 00:06:20,920
SS Ainda não existe.

93
00:06:21,120 --> 00:06:24,220
Então eu preciso fazê-lo salvá-lo.

94
00:06:24,230 --> 00:06:27,060
Eu vejo SS no mesmo diretório.

95
00:06:27,420 --> 00:06:31,550
E vamos começar com algo simples, como todos os h são roxos.

96
00:06:31,680 --> 00:06:35,030
Apenas para ter certeza de que ele funciona.

97
00:06:35,400 --> 00:06:37,060
Voltemos a atualizar.

98
00:06:37,390 --> 00:06:39,100
Andrew obtém um H-1 roxo.

99
00:06:39,180 --> 00:06:39,670
Ótimo.

100
00:06:39,870 --> 00:06:44,970
Então, agora vamos selecionar aquele Dave que adicionamos com a ideia de conteúdo e centrá-lo.

101
00:06:45,030 --> 00:06:53,620
Então, se livrar disso e precisamos de um conteúdo de ID e omitindo fazer é que o texto alinhe o Centro.

102
00:06:54,210 --> 00:06:56,430
Vamos voltar.

103
00:06:56,430 --> 00:06:57,110
Aqui vamos nós.

104
00:06:57,120 --> 00:06:59,490
Então, as coisas estão alinhadas no Centro até agora.

105
00:06:59,490 --> 00:07:06,720
Em seguida, vamos pressionar isso um pouco 25 por cento abaixo da página para ser exato com preenchimento igual a 25 por cento.

106
00:07:07,470 --> 00:07:15,270
Então, aqui vamos fazer o preenchimento superior a 25%.

107
00:07:16,270 --> 00:07:21,720
E ao invés de dar um número difícil de pixels, se o mantivermos como uma porcentagem é

108
00:07:21,720 --> 00:07:22,870
um pouco mais receptivo.

109
00:07:22,890 --> 00:07:24,790
Então está bem no centro.

110
00:07:25,230 --> 00:07:29,940
E então, 25% mudam à medida que redimensionamos a tela.

111
00:07:29,940 --> 00:07:30,540
Ótimo.

112
00:07:30,540 --> 00:07:32,480
Agora vamos adicionar a imagem de fundo.

113
00:07:32,670 --> 00:07:38,460
Então, a imagem que eu uso é uma adorável interação de gato e humano que acontece aqui é a partir deste

114
00:07:38,460 --> 00:07:43,280
no site Splash que eu introduzi no último video onde criamos a grade de imagem do bootstrap.

115
00:07:43,680 --> 00:07:48,300
E eles têm todo tipo de imagens realmente excelentes de alta qualidade que você pode usar sem qualquer problema.

116
00:07:48,480 --> 00:07:54,110
E aquele que eu uso é aqui mesmo, eu também busco links de gato nessa descrição.

117
00:07:54,450 --> 00:08:00,230
Aqui está o Aro desta imagem apenas clique direito copie a imagem que você é l.

118
00:08:00,360 --> 00:08:06,310
Agora vamos voltar e eu vou adicioná-lo ao corpo como uma imagem de fundo.

119
00:08:06,800 --> 00:08:13,830
Então, basta e depois dê uma URL que é aquele gigante Você está ali mesmo.

120
00:08:13,830 --> 00:08:22,530
atualizamos, temos uma imagem de fundo gigantesca e tudo o que podemos dizer é que este é um tipo de inicialização para as unhas.

121
00:08:22,530 --> 00:08:26,010
E se deixarmos isso, é forma neste nível ou

122
00:08:26,010 --> 00:08:36,060
Então, precisamos redimensioná-lo e, para isso, usamos o tamanho do fundo e alteramos isso para ser abordado de novo.

123
00:08:36,060 --> 00:08:39,230
Mais uma vez, estamos nos aproximando.

124
00:08:39,270 --> 00:08:44,430
Isso tornará a imagem tão pequena quanto possível enquanto ainda cobre toda a largura e altura

125
00:08:44,430 --> 00:08:44,950
da tela.

126
00:08:45,240 --> 00:08:50,820
Portanto, não vai mudar a proporção de aspecto, não irá distorcer a imagem de qualquer maneira, mas ela se estenderá em ambas

127
00:08:50,850 --> 00:08:52,240
as direções tanto quanto necessário.

128
00:08:52,350 --> 00:08:57,060
Mas o montante mínimo que precisa para caber na nossa tela e ainda não é perfeito.

129
00:08:57,210 --> 00:09:01,900
E o que queremos fazer não é alterar o tamanho, mas mudar a posição.

130
00:09:02,190 --> 00:09:10,280
Vamos centralizá-lo no centro de posição do fundo, mas salve que estamos mais próximos.

131
00:09:10,290 --> 00:09:13,320
Mas ainda não é uma combinação perfeita na medida em que a imagem vai.

132
00:09:13,800 --> 00:09:15,510
E essas mudanças virão mais tarde.

133
00:09:15,510 --> 00:09:21,540
Por enquanto, quero me concentrar na adição na barra de navegação e para fazer isso quando você vai aos documentos

134
00:09:21,540 --> 00:09:24,650
do Boucek e vai aos componentes e já mencionei isso antes.

135
00:09:25,080 --> 00:09:27,690
Eu sempre faço isso se eu estiver adicionando uma barra de navegação do bootstrap.

136
00:09:27,810 --> 00:09:29,850
São coisas demais para lembrar o contrário.

137
00:09:30,230 --> 00:09:32,070
E eu apenas copiei isso aqui.

138
00:09:32,370 --> 00:09:39,630
Levará o nav inteiro para começar a voltar para o nosso aplicativo aqui e simplesmente colocá-lo no topo.

139
00:09:39,630 --> 00:09:46,110
Este definitivamente não é o NAF que queremos, mas contém as peças que queremos atualizar.

140
00:09:46,380 --> 00:09:47,380
Está perto o suficiente.

141
00:09:47,610 --> 00:09:49,360
Então, há algumas mudanças que queremos fazer.

142
00:09:49,470 --> 00:09:55,890
O primeiro e mais fácil é que o nosso conteúdo na solução está em um recipiente para que ele não

143
00:09:55,890 --> 00:09:58,570
vá até as bordas, como o faz aqui.

144
00:09:59,100 --> 00:10:05,670
você pode ver isso porque nós adicionamos nesse recipiente que agora temos algum espaçamento exatamente como fazemos aqui na solução.

145
00:10:07,290 --> 00:10:13,020
Então, podemos voltar e inserir ou simplesmente mudamos isso para ser um contêiner de classe div e,

146
00:10:13,260 --> 00:10:14,250
se voltarmos agora,

147
00:10:14,250 --> 00:10:16,920
Agora vamos trabalhar no conteúdo atual do Nev. Então, a coisa mais fácil é mudar a

148
00:10:17,070 --> 00:10:26,520
marca que, agora mesmo, diz que a Brand está aqui, esta classe de linha é igual à marca neth bar e a substituiremos por uma correspondência fixa e salve.

149
00:10:26,550 --> 00:10:33,950
Experimente.

150
00:10:33,940 --> 00:10:34,990
Tudo bem.

151
00:10:35,490 --> 00:10:37,500
Agora vamos nos livrar desse formulário.

152
00:10:37,500 --> 00:10:39,050
Não precisamos disso.

153
00:10:39,060 --> 00:10:41,150
Então nossa forma tudo começa aqui.

154
00:10:41,310 --> 00:10:45,030
Descarte-se de tudo isso, atualize.

155
00:10:45,030 --> 00:10:50,490
Vamos também livrar-se do menu suspenso.

156
00:10:50,860 --> 00:10:52,560
Você não precisa disso.

157
00:10:52,560 --> 00:10:54,570
Então isso começa aqui.

158
00:10:54,570 --> 00:10:56,680
Esta mentira que termina

159
00:10:56,680 --> 00:10:58,680
é nova novamente.

160
00:11:01,770 --> 00:11:02,810
Agora temos um único link.

161
00:11:03,120 --> 00:11:04,540
Então vamos começar com esses dois links que deveriam ser inscrever e logá-lo.

162
00:11:04,710 --> 00:11:10,910
Esse é o link aqui mesmo para que possamos mudar aquele para se inscrever e depois duplicá-lo.

163
00:11:11,360 --> 00:11:18,110
Apenas um aliado com uma marca de âncora dentro dela.

164
00:11:18,390 --> 00:11:21,450
E este será logado.

165
00:11:21,450 --> 00:11:23,840
Vamos verificar isso.

166
00:11:24,750 --> 00:11:26,640
Ótimo.

167
00:11:26,700 --> 00:11:27,260
Então, os ícones aparecerão no final.

168
00:11:27,270 --> 00:11:29,100
Nós temos os dois links.

169
00:11:29,100 --> 00:11:30,380
Agora precisamos de três links aqui.

170
00:11:30,450 --> 00:11:32,320
Nós já temos dois deles e vamos nos livrar desse menu suspenso.

171
00:11:32,340 --> 00:11:35,500
Então, precisamos de casa em contato.

172
00:11:35,610 --> 00:11:38,560
Então, localize esse menu suspenso que está aqui.

173
00:11:38,600 --> 00:11:41,490
A classe é igual ao menu suspenso.

174
00:11:41,490 --> 00:11:43,100
Vamos nos livrar disso e agora o Akbar simplificou muito.

175
00:11:43,140 --> 00:11:49,070
Agora temos dois comprimentos diferentes.

176
00:11:49,080 --> 00:11:50,370
Nós realmente vamos nos livrar de ambos e fazê-lo do zero.

177
00:11:50,390 --> 00:11:53,760
Então, vamos adicionar um aliado com uma marca de âncora e então vamos fazer isso três vezes.

178
00:11:53,760 --> 00:12:00,120
Este primeiro deve dizer casa.

179
00:12:00,120 --> 00:12:02,260
A próxima é sobre.

180
00:12:02,550 --> 00:12:04,100
E o último é o contato.

181
00:12:04,320 --> 00:12:06,530
Vamos verificar isso.

182
00:12:07,020 --> 00:12:08,760
Lá vamos nós três comprimentos.

183
00:12:08,760 --> 00:12:11,050
Uma coisa menor.

184
00:12:11,070 --> 00:12:11,970
A casa deve ser ativa e um bootstrap muito fácil.

185
00:12:11,970 --> 00:12:16,830
Tudo o que temos a fazer é adicionar a classe igual a ativa

186
00:12:16,980 --> 00:12:24,860
para o aliado, não a marca de âncora, mas o aliado principal e agora acabamos com o lar sendo o link ativo.

187
00:12:26,220 --> 00:12:29,390
Ótimo.

188
00:12:29,400 --> 00:12:29,960
OK, então

189
00:12:30,200 --> 00:12:36,900
é nossa barra de navegação e se nós redimensionarmos, você verá que já temos esse hambúrguer trabalhando bem.

190
00:12:36,900 --> 00:12:37,940
Nós temos um problema que é que nossa imagem de fundo está desarrumada.

191
00:12:38,520 --> 00:12:42,420
Vamos cobrir isso em apenas um pouco, mas temos o hamberger funcionando bem.

192
00:12:42,420 --> 00:12:45,750
Tudo parece bem.

193
00:12:45,750 --> 00:12:47,400
Agora vamos abordar a fonte, então a fonte que usei aqui é Ledo L. UMA. É de fontes do Google, então eu vou para as fontes do Google e busco o Ledo.

194
00:12:47,430 --> 00:12:53,360
LA T-O a cada coleção.

195
00:12:53,430 --> 00:12:57,900
Vamos usá-lo se ele for normal e ousado.

196
00:12:58,010 --> 00:13:02,720
Também queremos que o nosso H-1 seja ousado.

197
00:13:03,180 --> 00:13:06,820
OK.

198
00:13:06,840 --> 00:13:10,050
E então vamos adicionar este link diretamente ao seu aplicativo.

199
00:13:10,590 --> 00:13:11,040
Topo aqui, salve agora, insira aplicativos. Avalie que vamos aplicar essa fonte a tudo.

200
00:13:11,070 --> 00:13:16,290
Então eu vou selecionar dentro da família de fontes do corpo é Ledo e vamos ter certeza de que está carregando corretamente.

201
00:13:16,290 --> 00:13:24,090
Veja o que temos atualizado.

202
00:13:24,270 --> 00:13:33,720
E nossa frente muda, é difícil de ver porque o texto está escuro, mas mudou, você também

203
00:13:34,050 --> 00:13:36,780
pode vê-lo no NFR aqui.

204
00:13:37,520 --> 00:13:43,000
Isso mudou.

205
00:13:43,000 --> 00:13:43,990
Ele corresponde ao que temos nesta solução.

206
00:13:44,160 --> 00:13:44,790
 

207
00:13:44,790 --> 00:13:47,510