1
00:00:00,750 --> 00:00:06,120
Bem-vindo novamente nesta lição Eu vou mostrar-lhe um dos componentes mais importantes e amplamente utilizados

2
00:00:06,120 --> 00:00:12,290
em todo o Bootstrap, que é o NFR, para que você possa ver realmente adquirir o Boucek dotcom.

3
00:00:12,450 --> 00:00:15,980
Eles usam componentes de barras suficientes aqui.

4
00:00:16,200 --> 00:00:21,900
Nós também vamos usar um em nosso aplicativo de campo de Yelp e como eu redimensionou a barra de navegação.

5
00:00:21,900 --> 00:00:28,980
Observe o quão sensível é e, em seguida, perceba assim que acertei TAB sobre o tamanho e tamanho do celular

6
00:00:28,980 --> 00:00:30,700
que obtemos este bom Hamburger.

7
00:00:30,720 --> 00:00:33,020
Então, vamos trabalhar em direção a tudo isso nesta lição.

8
00:00:33,180 --> 00:00:34,890
Mas vamos começar mais simples.

9
00:00:34,890 --> 00:00:42,480
A primeira coisa que precisamos fazer é ir para os componentes e ir para a barra de navegação e antes de irmos muito além, eu

10
00:00:42,480 --> 00:00:46,290
criei um novo arquivo apenas porque estaremos escrevendo um pouco de código.

11
00:00:46,380 --> 00:00:48,150
O velho estava ficando desordenado.

12
00:00:48,150 --> 00:00:50,620
Eu estou chamando naff Bar H T M L.

13
00:00:50,820 --> 00:00:56,030
Dentro de tudo o que eles têm, o link para bootstrap não altera o título aqui.

14
00:00:56,630 --> 00:01:00,980
Apenas chamo de bootstrap Nav.

15
00:01:01,350 --> 00:01:02,910
Bem desse jeito.

16
00:01:02,910 --> 00:01:07,580
Agora vamos aos documentos e veja a barra de navegação padrão.

17
00:01:08,220 --> 00:01:13,460
Então, este exemplo mostra todas as características importantes onde podemos ter um link de marca.

18
00:01:13,560 --> 00:01:15,800
Podemos ter outros links que podemos ter caído nos menus.

19
00:01:15,930 --> 00:01:20,940
Podemos ter uma forma de barra de navegação e um botão, podemos ter coisas do lado direito que

20
00:01:20,940 --> 00:01:22,010
estão no lado esquerdo.

21
00:01:22,020 --> 00:01:23,720
Isso realmente mostra tudo.

22
00:01:23,790 --> 00:01:30,330
É a pia da cozinha das barras de bootstrap naff e conseqüentemente a marcação é um pouco longa.

23
00:01:30,390 --> 00:01:33,530
Nós estaremos trabalhando com todas essas peças até o final deste vídeo.

24
00:01:33,540 --> 00:01:37,790
Mas eu quero começar mais simples e vou começar por mostrar-lhe a maneira mais simples de fazer um número.

25
00:01:38,040 --> 00:01:46,470
Portanto, precisamos criar um elemento de navegação e esse elemento de NAV precisa ter duas classes, queremos barra de navegação e

26
00:01:46,470 --> 00:01:51,550
barra de navegação, e podemos começar com o padrão de Dasch irá salvar.

27
00:01:51,550 --> 00:01:54,920
E agora vamos ver o arquivo no navegador e atualizar.

28
00:01:55,200 --> 00:02:00,690
Você pode ver, espero que ele apareça e screencast, há barra muito fraca no

29
00:02:00,690 --> 00:02:04,860
topo, então é assim que nós realmente inicializamos o NF bar.

30
00:02:04,860 --> 00:02:06,980
Agora vamos preenchê-lo com algum conteúdo.

31
00:02:07,050 --> 00:02:11,640
A primeira coisa que vamos dar uma olhada é como podemos adicionar nesta marca aqui.

32
00:02:11,790 --> 00:02:13,180
Basicamente o nome da sua empresa.

33
00:02:13,230 --> 00:02:14,320
Na maioria dos casos.

34
00:02:14,900 --> 00:02:20,830
E isso está usando um cabeçalho de barra de navegação e, em seguida, dentro do cabeçalho NFR usamos uma marca de barra de navegação.

35
00:02:20,850 --> 00:02:32,160
Então, comece adicionando que a classe div é igual ao cabeçalho do barramento do barra de navegação e, em seguida, dentro de lá, vamos adicionar na marca da

36
00:02:32,160 --> 00:02:35,910
barra de navegação, que é uma marca de âncora.

37
00:02:35,910 --> 00:02:39,440
Normalmente, quando você clica no nome dessa empresa, você o leva de volta à página inicial.

38
00:02:39,660 --> 00:02:44,760
Então, vamos fazer isso aqui e nós começaremos com um tráfego igual ao Thorpes para que não nos

39
00:02:44,760 --> 00:02:45,840
leve a lugar nenhum.

40
00:02:45,870 --> 00:02:52,890
A classe será igual à marca nav bar dash e nós faremos o nome da empresa.

41
00:02:52,890 --> 00:02:57,170
Vamos ver se eu consegui uma xícara de café à minha volta, então vamos com café.

42
00:02:57,270 --> 00:03:02,210
Mas para realmente fazer uma verdadeira inicialização, precisamos mudar um pouco a ortografia.

43
00:03:02,400 --> 00:03:03,180
OK, Alex.

44
00:03:03,180 --> 00:03:03,990
Bom o suficiente para mim.

45
00:03:04,020 --> 00:03:05,350
Café com K.

46
00:03:05,760 --> 00:03:07,420
Vamos dar uma olhada.

47
00:03:07,590 --> 00:03:11,830
Atualize e agora temos nossa marca de barra NAV que é um link.

48
00:03:11,940 --> 00:03:12,880
Eu clico nele.

49
00:03:13,010 --> 00:03:17,250
Não me leva em nenhum lugar agora, mas, eventualmente, nossas aplicações o terão para que, quando

50
00:03:17,250 --> 00:03:20,940
você clicar no nome da empresa, você voltará para a página inicial seguinte.

51
00:03:20,940 --> 00:03:24,480
Vamos ver se podemos adicionar alguns outros links, como o contato.

52
00:03:24,510 --> 00:03:25,660
Inscreva-se para registrar-se.

53
00:03:25,770 --> 00:03:27,490
Todos esses links comuns no bar.

54
00:03:27,660 --> 00:03:31,190
Vamos começar por adicionar um link sobre a página aqui.

55
00:03:31,500 --> 00:03:37,620
Então, vamos voltar e depois, fora do cabeçalho da barra de navegação, vamos fazer outra div nesta div irá

56
00:03:37,620 --> 00:03:41,600
coletar todo o conteúdo pelo menos no lado esquerdo da nossa barra NAV.

57
00:03:41,760 --> 00:03:46,410
Então, temos o cabeçalho e depois teremos algum conteúdo e, se quisermos algo no lado

58
00:03:46,500 --> 00:03:48,960
direito, teremos outra div que tem outra classe.

59
00:03:48,960 --> 00:03:50,010
Então, aula aqui.

60
00:03:50,070 --> 00:03:56,730
Na verdade, dois queremos nav e nav bar dash nav.

61
00:03:56,850 --> 00:04:00,170
Não me pergunte sobre a nomeação de seu nav bar dash nav.

62
00:04:00,210 --> 00:04:05,040
É uma das grandes críticas do bootstrap, é que é um pouco feio e que não é muito

63
00:04:05,040 --> 00:04:05,940
significativo às vezes.

64
00:04:06,030 --> 00:04:12,030
que foi criada em resposta à falta de sentido semântico do bootstrap se você chamar UI semântica.

65
00:04:12,030 --> 00:04:14,630
E, na verdade, existe uma estrutura CSSA

66
00:04:14,910 --> 00:04:16,660
E essa é uma que eu também gosto muito.

67
00:04:16,710 --> 00:04:18,070
E eu debato o ensino.

68
00:04:18,420 --> 00:04:22,190
Mas, no final, não é tão amplamente utilizado que ainda não são bons tutoriais.

69
00:04:22,200 --> 00:04:23,550
Então volte para o nosso diff aqui.

70
00:04:23,590 --> 00:04:27,600
Classe nav bar nav e a classe nav ambos.

71
00:04:27,690 --> 00:04:34,710
E, em seguida, para cada item que queremos nessa NFR, precisamos adicionar um aliado e, em seguida, dentro do Y se quisermos ligar,

72
00:04:34,710 --> 00:04:36,850
acabamos de ter uma marca de âncora.

73
00:04:37,050 --> 00:04:38,810
Então, este nunca vai a lugar nenhum.

74
00:04:38,850 --> 00:04:42,280
Mais uma vez e isso será para a página About.

75
00:04:42,500 --> 00:04:53,550
E se eu voltar e atualizar, agora temos um link para adicionar um mais para entrar em contato, salve novamente.

76
00:04:54,570 --> 00:04:58,950
Agora temos dois links agora vamos continuar e adicionar algo no lado direito da página.

77
00:04:59,160 --> 00:05:05,340
Vamos adicionar dois links para registrar ou assinar e outro para entrar no lado direito da barra para

78
00:05:06,840 --> 00:05:07,630
fazer isso.

79
00:05:07,690 --> 00:05:13,370
mais convencional usar um, você vai funcionar exatamente da mesma maneira, mas você quer ter aliados em vez de um bem,

80
00:05:13,630 --> 00:05:19,150
embora eles funcionem bem com um div faz um um pouco mais de sentido para ser em vez de uma UL.

81
00:05:19,140 --> 00:05:23,570
Nós precisamos de um recipiente não válido aqui e, na verdade, em vez de usar divs, é

82
00:05:23,620 --> 00:05:32,010
Então, vamos adicionar outra UL e esta será Nav. nav bar dash nav e depois nav bar

83
00:05:32,100 --> 00:05:32,700
dash.

84
00:05:32,760 --> 00:05:33,570
Certo.

85
00:05:33,660 --> 00:05:38,280
E precisamos ter certeza de que solemos isso de maneira correta, caso contrário essa classe não terá efeito.

86
00:05:38,280 --> 00:05:42,960
Então, o que isso vai fazer é tornar-nos um novo grupo de conteúdo para o lado direito da barra de navegação.

87
00:05:43,120 --> 00:05:44,540
E agora só precisamos preenchê-lo.

88
00:05:44,550 --> 00:05:47,750
Então, vou adicionar dois links tanto em edgewise.

89
00:05:47,820 --> 00:05:55,510
O primeiro não vai a lugar nenhum e ele vai se inscrever e depois teremos outro que apenas diga

90
00:05:55,770 --> 00:05:56,550
que logue.

91
00:05:56,940 --> 00:05:58,080
Vamos dar uma olhada.

92
00:05:58,290 --> 00:06:01,630
Atualize a página e veja que temos conteúdo à direita.

93
00:06:01,650 --> 00:06:07,710
No entanto, está correto contra a borda e para consertar que podemos adicionar em um recipiente a uma barra

94
00:06:07,710 --> 00:06:12,220
suficiente, assim como usamos o recipiente anteriormente para adicionar algum espaçamento ao nosso conteúdo principal.

95
00:06:12,220 --> 00:06:14,190
Poderíamos adicionar um em vez de uma barra de navegação.

96
00:06:14,400 --> 00:06:17,730
Então eu coloco tudo na barra neph em vez de um recipiente.

97
00:06:17,740 --> 00:06:20,800
Então a classe é igual ao recipiente.

98
00:06:21,060 --> 00:06:22,430
Basta mover isso para baixo.

99
00:06:22,560 --> 00:06:26,180
Verifique se tudo está sangrando corretamente.

100
00:06:26,190 --> 00:06:27,770
Aqui vamos nós.

101
00:06:27,780 --> 00:06:30,930
Vamos testá-lo.

102
00:06:30,930 --> 00:06:31,430
Agradável.

103
00:06:31,440 --> 00:06:33,910
Então, agora tudo está bem centrado e corretamente.

104
00:06:34,140 --> 00:06:41,940
Vou mostrar-lhe se eu adicionei o recipiente fora do navegador e eles colocaram toda a barra de navegação dentro.

105
00:06:42,880 --> 00:06:43,650
Veremos o que acontece.

106
00:06:43,660 --> 00:06:49,950
Agora, se eu estivesse em bares frescos, eu realmente cortei e só faz parte do caminho do outro lado da rua.

107
00:06:50,460 --> 00:06:53,460
Então, o recipiente fará isso com o que colocamos dentro dele.

108
00:06:53,670 --> 00:06:59,640
E, neste caso, queremos o recipiente dentro da barra de navegação, de modo que não constrict

109
00:06:59,640 --> 00:07:03,820
a autenticidade real naff, mas está restringindo o conteúdo dentro dela.

110
00:07:04,440 --> 00:07:04,950
ESTÁ BEM.

111
00:07:05,060 --> 00:07:11,250
Então, nós temos o nosso Hetter, temos o material à esquerda e temos algum conteúdo à direita para que você

112
00:07:11,990 --> 00:07:13,060
possa ver aqui.

113
00:07:13,290 --> 00:07:20,050
Agora, que passo um pouco e vá e pegue esta barra de navegação básica ou a barra de

114
00:07:20,040 --> 00:07:28,850
navegação padrão que eles têm nos documentos e vamos copiar tudo isso e eu vou simplesmente colocá-lo bem abaixo agora estão longe, faça

115
00:07:28,900 --> 00:07:29,670
algum espaço.

116
00:07:29,670 --> 00:07:33,010
Muitos comentários para torná-lo mais claro.

117
00:07:33,250 --> 00:07:35,510
Barra de navegação padrão.

118
00:07:36,060 --> 00:07:40,280
E vamos ver isso atualizar.

119
00:07:40,560 --> 00:07:44,580
Então é este bar de navegação aqui e há algumas coisas que eu quero destacar.

120
00:07:44,580 --> 00:07:48,690
Um deles é que caímos nos menus, mas na verdade eles não funcionam.

121
00:07:48,900 --> 00:07:53,300
E também quando redimensionamos a janela, obtemos o menu de hambúrguer aqui.

122
00:07:53,550 --> 00:07:54,740
Esses links desaparecem.

123
00:07:54,750 --> 00:07:58,630
O formulário desaparece e para revelá-los, precisamos clicar aqui.

124
00:07:58,830 --> 00:08:00,480
Mas isso também não funciona.

125
00:08:00,960 --> 00:08:05,890
Então, comece por conseguir que funcione e depois falaremos sobre todas essas peças diferentes e sobre o que

126
00:08:05,880 --> 00:08:07,570
elas fazem para que elas funcionem.

127
00:08:07,590 --> 00:08:10,550
Precisamos ir e incluir o arquivo javascript do bootstrap.

128
00:08:10,830 --> 00:08:15,660
Então, se voltarmos para os documentos do bootstrap, clicaremos no download.

129
00:08:15,780 --> 00:08:19,800
Há também um arquivo javascript que precisamos do que está aqui.

130
00:08:19,800 --> 00:08:24,460
Vou usar a versão Cdn, mas também vem dentro da pasta que você baixar.

131
00:08:24,510 --> 00:08:25,700
É chamado de bootstrap.

132
00:08:25,810 --> 00:08:26,220
Sim.

133
00:08:26,250 --> 00:08:29,890
Ou a versão minimizada arrancou Mencius.

134
00:08:30,420 --> 00:08:36,210
E vamos adicionar isso e vamos fazê-lo no fundo do nosso corpo e salvar.

135
00:08:36,210 --> 00:08:38,280
E eu sei que não falamos sobre javascript.

136
00:08:38,380 --> 00:08:42,860
Você não sabe o que é um script e qual a fonte aqui não importa.

137
00:08:42,900 --> 00:08:44,710
Nós vamos apenas conectá-lo ao bootstrap.

138
00:08:44,910 --> 00:08:46,550
E agora a nossa atualização.

139
00:08:46,710 --> 00:08:52,590
Podemos resolver um pequeno problema que eu vou mostrar aqui, nos diz que o javascript de bootstraps

140
00:08:52,700 --> 00:08:53,470
requer consulta.

141
00:08:53,790 --> 00:08:56,180
Não se preocupe com o que é isso e como chegou a esta mensagem.

142
00:08:56,250 --> 00:08:59,970
Mas eu só quero mostrar isso para que você veja a mensagem real que recebemos.

143
00:08:59,970 --> 00:09:03,240
Precisamos exigir uma consulta J, da qual também não falamos.

144
00:09:03,580 --> 00:09:05,360
Mas é fácil o suficiente para ir e pegar.

145
00:09:05,400 --> 00:09:07,140
Não precisamos escrever nenhum javascript.

146
00:09:07,170 --> 00:09:08,830
Você não precisa saber nenhum javascript.

147
00:09:08,830 --> 00:09:10,180
Nós apenas precisamos incluí-lo.

148
00:09:10,230 --> 00:09:18,200
Então, tudo o que precisamos fazer é pesquisar Jay consultas CDN que está no código que Jay dot com

149
00:09:18,200 --> 00:09:23,890
e aqui em baixo precisará selecionar a versão mais recente e copiar este URL.

150
00:09:23,910 --> 00:09:30,150
Este é o arquivo Querrey e então voltaremos aqui.

151
00:09:30,150 --> 00:09:32,560
Vamos adicionar outra dessas tags de script.

152
00:09:32,640 --> 00:09:34,410
Basicamente copiando este código exato.

153
00:09:34,410 --> 00:09:40,670
Na verdade, vou fazer isso para facilitar a duplicação dessa linha exata e alterar essa url para ser a consulta

154
00:09:40,680 --> 00:09:42,030
jey que você é.

155
00:09:42,610 --> 00:09:44,530
Se tudo mais falhar, você pode apenas digitar isso.

156
00:09:44,560 --> 00:09:51,220
Não é tão ruim se você é l, mas obtive isso procurando por Jay queer CDN e economizaria e

157
00:09:51,210 --> 00:09:56,290
isso precisa vir antes do arquivo javascript do bootstraps porque ele depende de uma consulta.

158
00:09:56,560 --> 00:10:00,370
Então, mais uma vez, não se preocupe muito com o que funciona como é a consulta Jay.

159
00:10:00,450 --> 00:10:02,150
Tudo isso acontecerá alguns minutos depois.

160
00:10:02,430 --> 00:10:06,550
Mas para tirar o máximo proveito do bootstrap e, em particular, das barras de navegação e do menu suspenso.

161
00:10:06,750 --> 00:10:13,210
Nós só precisamos ter essas duas linhas sempre que estiver usando isso, então vamos voltar agora e atualizar.

162
00:10:13,230 --> 00:10:18,850
Em primeiro lugar, são largados nos menus agora funcionam, como você pode ver, agora temos menus suspensos.

163
00:10:18,880 --> 00:10:24,430
Nós não vamos falar sobre isso neste vídeo, mas como eu redimensiono e recebo esse hambúrguer.

164
00:10:25,050 --> 00:10:26,980
O hambúrguer agora funciona quando eu clico nele.

165
00:10:26,980 --> 00:10:29,480
Isso alterna esse material oculto.

166
00:10:29,560 --> 00:10:36,850
Então, a maneira como ele funciona aqui é esse pequeno ponto de interrupção aqui onde todo

167
00:10:36,880 --> 00:10:43,280
esse conteúdo esconde e tudo o que vemos é o cabeçalho e esse botão.

168
00:10:43,380 --> 00:10:48,870
então, quando clicamos no botão, todo o conteúdo anteriormente escondido reaparecer Vamos conseguir que isso funcione.

169
00:10:48,880 --> 00:10:49,120
E

170
00:10:49,120 --> 00:10:50,650
Agora para nós.

171
00:10:50,950 --> 00:10:55,930
Mas vamos fazer uma versão muito menos complicada onde queremos apenas esconder esses quatro

172
00:10:55,930 --> 00:11:01,960
links para que, quando redimensionarmos esses quatro links, estivéssemos ocultos e, então, muito rápidos, serão exibidos.

173
00:11:02,250 --> 00:11:07,830
Para fazer isso começando por dar uma olhada em como é que realiza nesta versão padrão este gigante

174
00:11:07,840 --> 00:11:09,830
gigante de uma barra de navegação.

175
00:11:10,380 --> 00:11:13,650
E eu vou apenas apontar a linha importante aqui.

176
00:11:13,760 --> 00:11:22,090
barra de navegação o que colocamos dentro desta div será desmoronado quando atingiremos o tamanho do celular para que ele não faça o botão para nós.

177
00:11:22,090 --> 00:11:24,850
O colapso da classe Div o colapso da

178
00:11:24,850 --> 00:11:30,040
Não vai fazer a mudança no reaparecer em esconder, mas ele irá esconder o conteúdo que

179
00:11:30,040 --> 00:11:33,470
colocamos dentro dele quando atingimos esse tamanho de tablet e celular.

180
00:11:33,650 --> 00:11:38,500
Então, vamos copiar isso e precisamos envolver o conteúdo que queremos esconder

181
00:11:38,500 --> 00:11:40,320
e queremos esconder isso aqui.

182
00:11:40,330 --> 00:11:49,980
Estes dois Juelz Então, os quatro links que queremos esconder quando atingimos esse tamanho de tela menor.

183
00:11:50,440 --> 00:11:56,800
Então, adicione a etiqueta de fechamento e salve e há uma linha aqui e isso é importante e eu chegarei a isso

184
00:11:56,830 --> 00:11:57,820
em apenas um momento.

185
00:11:57,850 --> 00:12:01,230
Não nos impactará ainda, mas se atualizarmos.

186
00:12:01,690 --> 00:12:02,160
Você verá.

187
00:12:02,170 --> 00:12:09,790
Agora, quando eu redimensiono, há um ponto aqui mesmo onde todo esse conteúdo dentro da divisão do colapso

188
00:12:09,790 --> 00:12:10,650
vai embora.

189
00:12:10,680 --> 00:12:11,650
Agora não reaparece.

190
00:12:11,640 --> 00:12:13,180
Nós não recebemos esse hambúrguer.

191
00:12:13,330 --> 00:12:16,940
Nós não conseguimos clicar em nada além de ter entrado em colapso.

192
00:12:17,050 --> 00:12:24,580
E é por isso que adicionamos nesta linha aqui o colapso da barra de navegação do div colapso da classe.

193
00:12:24,630 --> 00:12:29,780
A próxima coisa que precisamos fazer é adicionar no hambúrguer e é um pouco de código.

194
00:12:29,780 --> 00:12:33,010
Infelizmente, ainda é muito melhor do que se tivéssemos de fazê-lo nós mesmos.

195
00:12:33,280 --> 00:12:37,220
Mas o hambúrguer é realmente tudo isso aqui.

196
00:12:37,800 --> 00:12:48,660
Então eu vou copiar isso e colá-lo dentro de uma soneca ou Hetter antes do nosso café incontact.

197
00:12:48,970 --> 00:12:52,420
E salvaremos, voltarei ao que faz.

198
00:12:53,320 --> 00:12:54,680
Vamos apenas atualizar.

199
00:12:55,140 --> 00:12:57,910
E agora, se eu redimensionar eu recebo o hambúrguer.

200
00:12:58,120 --> 00:13:00,280
Aqui vamos nós.

201
00:13:00,310 --> 00:13:03,240
Agora, deixe-me explicar um pouco sobre como funciona.

202
00:13:03,250 --> 00:13:09,700
Então, há um botão e então, dentro desse botão, há três intervalos e cada um

203
00:13:09,700 --> 00:13:13,000
é responsável por fazer uma dessas barras.

204
00:13:13,210 --> 00:13:18,510
Portanto, não é uma imagem que estamos vendo aqui. Na verdade, é cada equipe que está fazendo essa pequena espada

205
00:13:18,670 --> 00:13:21,780
que está sendo desenhada naquelas barras estreitas para fazer esse hambúrguer.

206
00:13:22,030 --> 00:13:26,530
E então, no que diz respeito à exibição e esconder o conteúdo quando clicamos nele,

207
00:13:26,950 --> 00:13:34,310
o que é realmente importante é que temos esse atributo de destino de dados e tudo o que está definido no nosso exemplo B-S.

208
00:13:34,310 --> 00:13:41,700
Agora, para o nosso colapso, um exemplo de bootstrap, rede para o nosso clube e vamos apenas mudá-lo para sim.

209
00:13:42,180 --> 00:13:44,330
Nav. demo assim.

210
00:13:44,470 --> 00:13:48,880
Então, precisamos alterar a ID do conteúdo que queremos realmente colapsar, que queremos

211
00:13:48,880 --> 00:13:49,810
mostrar e esconder.

212
00:13:49,870 --> 00:13:57,310
Então eu vou mudar para combinar vs demonstração de navegação.

213
00:13:57,340 --> 00:13:59,710
Observe uma diferença importante.

214
00:13:59,710 --> 00:14:05,860
Nós não estamos adicionando no Arctic Thor. Então, é como CSI s quando selecionamos algo com C diz que precisamos

215
00:14:05,860 --> 00:14:11,420
usar esse Octa Thorpe para segmentar um ID, então deixamos o ID como apenas o texto do nome.

216
00:14:11,440 --> 00:14:18,120
Agora, se demo aqui adicionarmos isso ao Thorpe, ele irá economizar a atualização.

217
00:14:18,120 --> 00:14:24,600
Agora, se eu redimensionar nós conseguimos o hambúrguer e eles clicam nele e isso funciona para alternar essa exibição e esconder.

218
00:14:26,250 --> 00:14:27,040
Ótimo.

219
00:14:27,070 --> 00:14:32,400
A última coisa que lhe mostrará é que se mudarmos algo fora desse colapso.

220
00:14:32,470 --> 00:14:35,710
Então vamos tomar esses links aqui.

221
00:14:36,070 --> 00:14:44,100
A conta ou o contato e o contato e nós apenas movemos aqueles aqui mesmo fora do colapso div e

222
00:14:44,110 --> 00:14:53,310
eu atualizo posso ver que eles realmente não colapsam eles ficam lá e então eu clico sobre isso e os outros dois que

223
00:14:53,320 --> 00:14:55,710
são em vez do colapso são alternados.

224
00:14:55,720 --> 00:15:00,390
Agora não digo que isso pareça bom, mas ilustra a importância desse colapso div. possamos no nosso caso para diferentes links para a direita ou à esquerda.

225
00:15:00,630 --> 00:15:06,480
Então, o que quer que tenha acontecido o lado do colapso ou o que quer que

226
00:15:06,490 --> 00:15:08,160
Todos eles vão entrar em colapso quando atingimos esse tamanho móvel menor.

227
00:15:08,160 --> 00:15:12,070
E, em seguida, para torná-los novamente, clicamos neste botão aqui e esse botão

228
00:15:12,070 --> 00:15:18,250
tem um atributo de destino de dados e qualquer ID que isso corresponda será escondido e mostrado quando clicarmos sobre isso.

229
00:15:18,490 --> 00:15:23,570
E essa é a ideia aqui.

230
00:15:24,010 --> 00:15:25,930
OK, uma maratona tão gentil.

231
00:15:26,440 --> 00:15:28,230
Muitas coisas que vão fazer uma barra de navegação bootstrap.

232
00:15:28,270 --> 00:15:30,750
arquivo e dissecando peças dele.

233
00:15:30,970 --> 00:15:36,940
Mas, novamente, a maneira como chegamos lá foi simplesmente copiando isso em nosso

234
00:15:36,940 --> 00:15:37,450
E é assim

235
00:15:37,540 --> 00:15:42,160
que fazemos o suficiente são praticamente todas as vezes em que tomamos esse exemplo de código e descobrimos quais peças precisamos e vamos a partir daí.

236
00:15:42,150 --> 00:15:44,080