1
00:00:03,650 --> 00:00:11,190
Acabamos de concluir uma discussão sobre a importância de fornecer navegação em seu site.

2
00:00:11,190 --> 00:00:15,920
Também analisamos várias maneiras diferentes de fornecer navegação em um site.

3
00:00:15,920 --> 00:00:21,229
Agora é hora de olhar para o bootstrap e olhar para os componentes

4
00:00:21,229 --> 00:00:26,269
que o bootstrap fornece que nos permitem adicionar navegação aos nossos sites.

5
00:00:26,269 --> 00:00:32,815
Dois componentes importantes do bootstrap são o Navbar e o Breadcrumbs.

6
00:00:32,815 --> 00:00:37,610
Vamos examinar os dois neste exercício.

7
00:00:37,610 --> 00:00:44,745
Vamos começar adicionando uma barra de navegação à parte superior da nossa página web.

8
00:00:44,745 --> 00:00:50,065
Podemos fazer isso usando o componente Navbar que faz parte do bootstrap.

9
00:00:50,065 --> 00:00:51,605
Então, como começamos?

10
00:00:51,605 --> 00:00:56,260
Vamos para o corpo da nossa página HTML.

11
00:00:56,260 --> 00:00:58,760
Então, aqui, eu tenho index.HTML aberto.

12
00:00:58,760 --> 00:01:00,495
E no topo,

13
00:01:00,495 --> 00:01:06,090
eu vou adicionar em um elemento usando essa tag HTML nav.

14
00:01:06,090 --> 00:01:10,330
Agora, a tag HTML nav destina-se a fornecer navegação.

15
00:01:10,330 --> 00:01:17,880
Então, vamos aproveitar essa tag e construir nossa barra de navegação usando a tag nav.

16
00:01:17,880 --> 00:01:19,645
Então, agora, no topo,

17
00:01:19,645 --> 00:01:22,055
eu vou adicionar nesta tag,

18
00:01:22,055 --> 00:01:30,040
colocar o nav e construir a barra de navegação em torno desta tag de navegação.

19
00:01:30,040 --> 00:01:33,910
Então, uma vez que adicionamos esta tag nav em index.HTML,

20
00:01:33,910 --> 00:01:39,590
então podemos ir em frente e, em seguida, aplicar as classes bootstraps para esta tag nav.

21
00:01:39,590 --> 00:01:42,700
Então, eu aplico a barra de navegação da classe.

22
00:01:42,700 --> 00:01:47,485
Então, a classe navbar em bootstrap me permite criar uma barra de navegação.

23
00:01:47,485 --> 00:01:50,730
Existem muitas maneiras diferentes de personalizar a barra de navegação,

24
00:01:50,730 --> 00:01:56,600
que temos um olhar como classes adicionais que irão adicionar a esta tag nav.

25
00:01:56,600 --> 00:01:58,770
Junto com a barra de navegação,

26
00:01:58,770 --> 00:02:02,880
também adicionamos na próxima classe que é navbar-escuro.

27
00:02:02,880 --> 00:02:08,480
Agora eu quero que minha barra de navegação seja de cor escura,

28
00:02:08,480 --> 00:02:09,985
com um fundo mais escuro.

29
00:02:09,985 --> 00:02:13,920
Porque isso vai muito bem com o site que eu acabei de projetar.

30
00:02:13,920 --> 00:02:16,150
Podemos ter navbar-light,

31
00:02:16,150 --> 00:02:18,950
que é uma barra de navegação de cor mais clara.

32
00:02:18,950 --> 00:02:23,775
Então, você pode optar por usar qualquer um deles em sua página da web.

33
00:02:23,775 --> 00:02:32,620
A próxima aula que vou usar é navbar-expand-sm.

34
00:02:32,620 --> 00:02:36,870
Agora, e também, vou especificar o tamanho da tela abaixo

35
00:02:36,870 --> 00:02:42,064
do qual o comportamento alternada entra em existência.

36
00:02:42,064 --> 00:02:45,165
Agora, quando eu digo navbar-expand-sm,

37
00:02:45,165 --> 00:02:48,480
isso significa que para telas pequenas e extra pequenas,

38
00:02:48,480 --> 00:02:51,370
este navbars vai se tornar uma barra de navegação alternada.

39
00:02:51,370 --> 00:02:57,080
Significando que, ele será recolhido nesses tamanhos de tela.

40
00:02:57,080 --> 00:03:00,520
Você logo aprenderá como isso funciona,

41
00:03:00,520 --> 00:03:02,930
quando olharmos para como podemos adicionar

42
00:03:02,930 --> 00:03:07,460
o plugin de colapso para a barra de navegação para habilitar esse tipo de comportamento.

43
00:03:07,460 --> 00:03:10,970
Então, junto com uma barra de navegação alternada sm,

44
00:03:10,970 --> 00:03:15,240
eu vou aplicar uma cor de fundo para a barra de navegação inicialmente,

45
00:03:15,240 --> 00:03:18,570
que seria bg-primary.

46
00:03:18,570 --> 00:03:25,909
Agora bg-primary é a cor primária que é definida no seu bootstrap.

47
00:03:25,909 --> 00:03:33,350
Por padrão, esta é uma versão de cor azul que é usada por bootstraps.

48
00:03:33,350 --> 00:03:35,910
Então eu vou começar com isso como minha cor primária.

49
00:03:35,910 --> 00:03:42,350
Mais tarde, eu vou personalizar a cor da minha barra de navegação usando algumas classes CSS.

50
00:03:42,350 --> 00:03:45,155
Além disso, eu também vou aplicar

51
00:03:45,155 --> 00:03:50,255
outra classe chamada fixed-top para essa barra de navegação.

52
00:03:50,255 --> 00:03:55,210
O que fixed-top faz, é que ele corrige a barra de navegação para

53
00:03:55,210 --> 00:04:00,330
o topo da janela do navegador onde esta página web está sendo renderizada.

54
00:04:00,330 --> 00:04:03,830
Mesmo quando você rolar sua página molhada,

55
00:04:03,830 --> 00:04:07,870
a barra de navegação era até permanecer no topo da página.

56
00:04:07,870 --> 00:04:12,250
Você pode simplesmente usar o fundo fixo para corrigir

57
00:04:12,250 --> 00:04:18,235
a barra de navegação na parte inferior da janela do navegador ou você pode dizer, parte superior estática.

58
00:04:18,235 --> 00:04:21,810
E também, você não pode usar essa classe.

59
00:04:21,810 --> 00:04:23,140
Se você não usar isso

60
00:04:23,140 --> 00:04:29,325
, sua barra de navegação também será rolada quando sua página da Web for rolada para cima.

61
00:04:29,325 --> 00:04:36,670
No meu site, escolho manter a barra de navegação fixa na parte superior da página.

62
00:04:36,670 --> 00:04:38,600
Existem muitas outras opções

63
00:04:38,600 --> 00:04:43,920
disponíveis que você pode encontrar na documentação de bootstraps.

64
00:04:43,920 --> 00:04:48,495
Então este é um exemplo do uso da barra de navegação.

65
00:04:48,495 --> 00:04:51,645
Agora, além disso, dentro da barra de navegação,

66
00:04:51,645 --> 00:04:54,545
vou colocar qualquer conteúdo que

67
00:04:54,545 --> 00:04:57,450
vai ser usado na barra de navegação dentro de um contêiner.

68
00:04:57,450 --> 00:05:02,880
Então este é o lugar onde eu vou usar um elemento div aqui

69
00:05:02,880 --> 00:05:10,125
e aplicar a classe recipiente para este elemento div.

70
00:05:10,125 --> 00:05:12,520
Então, o que quer que esteja fechado lá dentro,

71
00:05:12,520 --> 00:05:17,375
será restrito à mesma largura que o resto da minha página Web.

72
00:05:17,375 --> 00:05:20,575
Como você se lembra, eu usei a classe de contêiner para

73
00:05:20,575 --> 00:05:24,870
definir a amplitude do conteúdo em minha página da web,

74
00:05:24,870 --> 00:05:28,080
então eu vou aplicar o mesmo à minha barra de navegação também, para

75
00:05:28,080 --> 00:05:31,490
que minhas informações da barra de navegação sejam

76
00:05:31,490 --> 00:05:36,185
exibidas dentro da mesma largura que o resto da minha página da web.

77
00:05:36,185 --> 00:05:41,225
Você pode optar por não usar a classe de contêiner na barra de navegação. Nesse caso,

78
00:05:41,225 --> 00:05:47,200
o conteúdo da barra de navegação se espalhará por toda a largura da tela.

79
00:05:47,200 --> 00:05:49,055
Dentro da barra de navegação,

80
00:05:49,055 --> 00:05:54,280
vou adicionar uma classe a uma tag aqui.

81
00:05:54,280 --> 00:06:02,390
Esta classe que eu chamo como navbar-marca,

82
00:06:02,520 --> 00:06:09,170
me permite exibir algumas informações como uma informação de marca na minha barra de navegação.

83
00:06:09,170 --> 00:06:11,110
Assim, se você tem uma empresa, por exemplo,

84
00:06:11,110 --> 00:06:13,050
você pode exibir o nome da sua empresa ou

85
00:06:13,050 --> 00:06:16,040
o logotipo da sua empresa usando a navbar-marca

86
00:06:16,040 --> 00:06:21,390
para que seja exibido de forma proeminente em sua barra de navegação.

87
00:06:21,390 --> 00:06:23,370
Obviamente, quando você visita muitos sites,

88
00:06:23,370 --> 00:06:26,400
você verá que o nome da empresa está em algum lugar visível

89
00:06:26,400 --> 00:06:30,310
na barra de navegação desse site.

90
00:06:30,310 --> 00:06:33,085
Então, deixe-me adicionar essa marca navbar-marca.

91
00:06:33,085 --> 00:06:42,190
Isso também pode ser hiperlink para a página inicial do seu site.

92
00:06:42,190 --> 00:06:43,895
Então, vou deixar isso aí.

93
00:06:43,895 --> 00:06:46,000
Nas páginas restantes do meu site,

94
00:06:46,000 --> 00:06:50,480
vou apenas adicionar o href para me trazer de volta para a página index.HTML,

95
00:06:50,480 --> 00:06:52,449
que é a página inicial.

96
00:06:52,449 --> 00:07:00,109
E aqui dentro vou acrescentar o nome do meu restaurante.

97
00:07:03,220 --> 00:07:06,890
Vamos salvar as alterações e ir e dar

98
00:07:06,890 --> 00:07:11,110
uma olhada rápida no estado atual da minha barra de navegação.

99
00:07:11,110 --> 00:07:13,710
Indo para a página da Web no navegador,

100
00:07:13,710 --> 00:07:21,150
agora você pode ver onde a barra de navegação está visível na minha página web no navegador.

101
00:07:21,150 --> 00:07:25,960
A barra de navegação está agora na parte superior da página e você

102
00:07:25,960 --> 00:07:30,490
pode ver que enquanto eu rolar minha página,

103
00:07:30,490 --> 00:07:36,745
a barra de navegação ainda permanece no topo porque eu costumava a classe fixed-top.

104
00:07:36,745 --> 00:07:38,520
Você também pode ver

105
00:07:38,520 --> 00:07:45,460
o navbar-marca que me permite exibir o nome do restaurante lá.

106
00:07:45,460 --> 00:07:50,310
Mais tarde eu vou substituir isso pelo logotipo deste restaurante.

107
00:07:50,310 --> 00:07:56,010
Você percebe que a barra de navegação está parcialmente coberta pelo Jumbotron.

108
00:07:56,010 --> 00:08:01,395
Você vai corrigir isso um pouco mais tarde usando alguma personalização CSS.

109
00:08:01,395 --> 00:08:07,255
A próxima coisa que eu vou fazer é adicionar alguns links para a minha barra de navegação, para

110
00:08:07,255 --> 00:08:13,060
que esses links me levem para as outras páginas do meu site.

111
00:08:13,060 --> 00:08:14,790
Então, como fazemos isso?

112
00:08:14,790 --> 00:08:17,575
Voltando para index.HTML,

113
00:08:17,575 --> 00:08:24,490
eu vou adicionar em um ul aqui,

114
00:08:24,490 --> 00:08:27,715
dentro do qual eu vou declarar

115
00:08:27,715 --> 00:08:36,460
todos os vários links que serão exibidos na minha caixa de navegação.

116
00:08:36,460 --> 00:08:43,590
Então este ul para o qual eu vou aplicar a classe como navbar-nav.

117
00:08:43,590 --> 00:08:46,530
Então esta é a classe que me ajudará a definir

118
00:08:46,530 --> 00:08:51,275
o conjunto de links que serão incluídos na minha barra de navegação.

119
00:08:51,275 --> 00:08:56,655
E esses links serão exibidos horizontalmente dentro da minha barra de navegação.

120
00:08:56,655 --> 00:09:01,660
O senhor auto-class que eu também apliquei para o ul,

121
00:09:01,660 --> 00:09:05,740
é usado para especificar a margem direita.

122
00:09:05,740 --> 00:09:08,590
Então esta é uma classe utilitário que está disponível

123
00:09:08,590 --> 00:09:13,815
no bootstrap que me permite especificar a margem direita.

124
00:09:13,815 --> 00:09:17,190
Então, se eu disser, mr-auto,

125
00:09:17,190 --> 00:09:19,390
o que significa é que no lado direito,

126
00:09:19,390 --> 00:09:23,100
a margem direita deve ser definida o máximo possível.

127
00:09:23,100 --> 00:09:26,380
Então, o que significa que o conteúdo será empurrado o mais à esquerda

128
00:09:26,380 --> 00:09:30,175
possível dentro da barra de navegação.

129
00:09:30,175 --> 00:09:32,310
Dentro desta lista não ordenada,

130
00:09:32,310 --> 00:09:34,515
eu posso usar elementos de lista para incluir

131
00:09:34,515 --> 00:09:38,775
os vários links que vão fazer parte da minha barra de navegação.

132
00:09:38,775 --> 00:09:42,595
Então lá dentro, eu vou adicionar em alguns links lá

133
00:09:42,595 --> 00:09:48,900
e eu vou começar especificando o primeiro lá com o link.

134
00:09:48,900 --> 00:09:51,830
Para cada item de lista na barra de navegação,

135
00:09:51,830 --> 00:09:56,110
você vai aplicar a classe como item de navegação.

136
00:09:56,110 --> 00:10:03,780
Isso permite que esses itens da lista sejam exibidos horizontalmente como links na minha barra de navegação.

137
00:10:03,780 --> 00:10:06,055
E, em seguida, dentro aqui,

138
00:10:06,055 --> 00:10:10,640
eu posso usar a tag a para adicionar

139
00:10:10,640 --> 00:10:16,140
no link real que fará parte da minha barra de navegação.

140
00:10:16,140 --> 00:10:19,600
Então lá dentro eu uso a tag

141
00:10:19,600 --> 00:10:28,730
a com a classe nav-link e isso também me permite usar o href.

142
00:10:30,260 --> 00:10:37,145
Atributo para definir o link lá.

143
00:10:37,145 --> 00:10:41,255
E o primeiro que vou incluir é o Lar.

144
00:10:41,255 --> 00:10:46,935
Então, isso incluiria um item chamado Início nesta barra de navegação.

145
00:10:46,935 --> 00:10:51,900
Deixe-me copiar isso e colar isso.

146
00:10:51,900 --> 00:10:55,475
E então vamos editar alguns destes porque eu quero adicionar

147
00:10:55,475 --> 00:11:00,630
quatro diferentes à minha barra de navegação.

148
00:11:00,630 --> 00:11:02,110
O primeiro é o Lar.

149
00:11:02,110 --> 00:11:04,170
O segundo seria sobre.

150
00:11:04,170 --> 00:11:13,560
O terceiro seria Menu que eu vou construir como parte do próximo curso.

151
00:11:13,560 --> 00:11:16,630
E o último será Contacto.

152
00:11:16,630 --> 00:11:25,495
Um site típico da empresa teria links como este em sua barra de navegação.

153
00:11:25,495 --> 00:11:27,830
Então, com a adição desses dois,

154
00:11:27,830 --> 00:11:30,915
agora o que eu posso fazer é

155
00:11:30,915 --> 00:11:36,560
que podemos identificar explicitamente um desses links como o link ativo, o

156
00:11:36,560 --> 00:11:39,600
que significa que quando você está nessa página específica,

157
00:11:39,600 --> 00:11:42,145
esse link em particular pode ser destacado.

158
00:11:42,145 --> 00:11:48,685
Então, para fazer isso, vamos aplicar aqui a classe chamada ativo para um desses itens de lista.

159
00:11:48,685 --> 00:11:51,815
Neste caso, como esta é a página index.html,

160
00:11:51,815 --> 00:11:56,085
estou aplicando a classe ativa ao link inicial lá.

161
00:11:56,085 --> 00:12:02,725
Isso praticamente completa minha barra de navegação na página index.HTML.

162
00:12:02,725 --> 00:12:08,095
Uma pequena coisa que eu gostaria de corrigir aqui é que o link Sobre,

163
00:12:08,095 --> 00:12:12,130
eu quero vinculá-lo à

164
00:12:12,130 --> 00:12:16,965
página aboutus.HTML que já incluímos em nosso site,

165
00:12:16,965 --> 00:12:19,680
porque é aí que eu quero que ele leve.

166
00:12:19,680 --> 00:12:23,795
Vamos dar uma olhada rápida na nossa barra de navegação desta parte.

167
00:12:23,795 --> 00:12:25,985
Voltando à nossa barra de navegação,

168
00:12:25,985 --> 00:12:28,995
você pode ver imediatamente o resultado de incluir

169
00:12:28,995 --> 00:12:32,730
esses itens na lista não ordenada lá.

170
00:12:32,730 --> 00:12:34,160
Então, você vê o Início,

171
00:12:34,160 --> 00:12:36,500
Sobre, Menu e Contato lá,

172
00:12:36,500 --> 00:12:43,145
e cada um deles é um link, mas este é um item de navegação aqui.

173
00:12:43,145 --> 00:12:48,740
E observe como o Lar é destacado aqui por causa do uso da classe ativa.

174
00:12:48,740 --> 00:12:50,305
Então, se eu clicar no botão Sobre,

175
00:12:50,305 --> 00:12:52,990
ele deve me levar para o campo Sobre.

176
00:12:52,990 --> 00:12:55,670
Eis que aqui estamos nós.

177
00:12:55,670 --> 00:12:58,970
Mas eu percebo que eu não tenho uma maneira de voltar atrás, o

178
00:12:58,970 --> 00:13:04,190
que significa que eu também preciso entregar essa barra de navegação para a página aboutus.HTML.

179
00:13:04,190 --> 00:13:07,330
Chegaremos lá em pouco tempo.

180
00:13:07,330 --> 00:13:11,360
Por enquanto, vou navegar rapidamente usando o botão Voltar do

181
00:13:11,360 --> 00:13:16,585
meu navegador de volta à minha página index.HTML.

182
00:13:16,585 --> 00:13:21,030
Uma coisa que eu também queria demonstrar a vocês era como

183
00:13:21,030 --> 00:13:27,525
essa barra de navegação entrará em colapso para tamanhos de tela pequenos e extra pequenos.

184
00:13:27,525 --> 00:13:35,570
Então, vamos ativar a exibição usando a Visão Responsiva

185
00:13:35,570 --> 00:13:37,960
e, em seguida, deixe-me ir para o Galaxy S5.

186
00:13:37,960 --> 00:13:43,250
E eu notei que quando eu uso o Galaxy S5 assim,

187
00:13:43,250 --> 00:13:50,000
você pode ver que isso está sendo exibido mais cedo do que já está cobrindo a tela.

188
00:13:50,000 --> 00:13:52,145
Esse não é o comportamento que eu quero.

189
00:13:52,145 --> 00:14:00,075
Eu quero ser capaz de esconder isso quando eu estou vendo isso em uma tela pequena e extra pequena.

190
00:14:00,075 --> 00:14:04,220
E então talvez eu adicione um botão aqui que eu possa usar

191
00:14:04,220 --> 00:14:08,450
para ativar e desativar a exibição desses links.

192
00:14:08,450 --> 00:14:13,170
Você viu essas coisas em sites móveis.

193
00:14:13,170 --> 00:14:16,935
Como fazemos isso no bootstrap?

194
00:14:16,935 --> 00:14:19,645
Vamos para esse passo a seguir.

195
00:14:19,645 --> 00:14:24,300
Voltando para nossa barra de navegação aqui.

196
00:14:24,300 --> 00:14:27,910
Deixe-me adicionar um botão lá,

197
00:14:27,910 --> 00:14:33,840
que irá atuar como o botão de alternância para mostrar e ocultar

198
00:14:33,840 --> 00:14:42,225
meus links da minha barra de navegação quando ele é exibido em telas extra inteligentes e pequenas.

199
00:14:42,225 --> 00:14:43,615
Então, para adicionar lá,

200
00:14:43,615 --> 00:14:47,645
deixe-me adicionar um botão e aplicar algumas classes a este botão.

201
00:14:47,645 --> 00:14:54,285
Vamos discutir mais sobre botões em bootstrap na próxima lição.

202
00:14:54,285 --> 00:14:57,515
Mas para adicionar um botão no bootstrap,

203
00:14:57,515 --> 00:15:03,770
você aplicaria a classe para este botão particular como navbar-toggler.

204
00:15:04,450 --> 00:15:07,420
Então, este é um barra-toggler.

205
00:15:07,420 --> 00:15:09,400
Então, como o nome indica,

206
00:15:09,400 --> 00:15:14,970
você já está começando a entender o que esse botão vai fazer neste caso.

207
00:15:14,970 --> 00:15:22,650
E então eu adicionaria o tipo como botão para indicar que isso está agindo como um botão.

208
00:15:22,650 --> 00:15:31,360
E, em seguida, alternar dados como colapso.

209
00:15:31,360 --> 00:15:36,070
Agora, este atributo de alternância de dados que você verá aqui é na verdade

210
00:15:36,070 --> 00:15:42,400
um uso de componente JavaScript no bootstrap.

211
00:15:42,400 --> 00:15:48,100
Vamos olhar para este tipo de barra de hífens de dados de atributos mais no próximo módulo,

212
00:15:48,100 --> 00:15:50,875
onde vamos olhar para componentes JavaScript bootstraps.

213
00:15:50,875 --> 00:15:55,225
A barra de navegação requer um desses componentes JavaScript para ser capaz de ativar

214
00:15:55,225 --> 00:15:59,980
e desativar meus links na minha barra de navegação, Então,

215
00:15:59,980 --> 00:16:03,825
essa é a razão pela qual eu rapidamente introduzi este conceito aqui,

216
00:16:03,825 --> 00:16:05,800
mas vamos voltar para examinar

217
00:16:05,800 --> 00:16:12,020
este bootstraps componentes JavaScript mais no próximo módulo.

218
00:16:12,020 --> 00:16:14,420
Então, dados-toggle colapso e

219
00:16:14,420 --> 00:16:24,610
, em seguida, o data-target como #Navbar.

220
00:16:24,610 --> 00:16:30,660
Agora, vou apresentar outra div com a identificação como barra de navegação.

221
00:16:30,660 --> 00:16:33,470
Então, quando eu especificar uma data ou destino #Navbar,

222
00:16:33,470 --> 00:16:38,560
que se refere ao ID desse outro elemento que vai ser

223
00:16:38,560 --> 00:16:44,025
o alvo deste botão particular aqui.

224
00:16:44,025 --> 00:16:47,625
Então, essa é a parte que eu adiciono no fundo.

225
00:16:47,625 --> 00:16:52,340
E também, quero que o botão mostre algo aqui.

226
00:16:52,340 --> 00:16:56,970
E normalmente, quando você vê esses tipos de botões em sites móveis,

227
00:16:56,970 --> 00:16:59,730
ele contém linhas livres lá, o

228
00:16:59,730 --> 00:17:04,310
que normalmente é chamado como o ícone de Alternar Navbar.

229
00:17:04,310 --> 00:17:11,630
Então, eu vou incluir um ícone especial que

230
00:17:11,630 --> 00:17:19,660
está incluído no bootstrap, chamado navbar-toggler ícone.

231
00:17:19,660 --> 00:17:23,395
Então, se eu aplicar esta classe para tag span,

232
00:17:23,395 --> 00:17:29,050
em seguida, que irá introduzir um ícone navbar-toggler para o meu botão aqui.

233
00:17:29,410 --> 00:17:32,130
Então, isso introduz um botão.

234
00:17:32,130 --> 00:17:34,980
Vamos olhar para o que isto parece daqui a pouco.

235
00:17:34,980 --> 00:17:36,780
Agora, quando eu clicar neste botão,

236
00:17:36,780 --> 00:17:41,140
eu quero ser capaz de mostrar e ocultar esses links.

237
00:17:41,140 --> 00:17:43,140
Para me permitir fazer isso,

238
00:17:43,140 --> 00:17:50,780
o que vou fazer é cercar esta ul com um div aqui.

239
00:17:51,070 --> 00:17:57,585
Então, eu vou entrar e introduzir um div em torno deste ul.

240
00:17:57,585 --> 00:17:59,280
E para esta div,

241
00:17:59,280 --> 00:18:04,850
eu aplicarei a classe como colapso,

242
00:18:04,850 --> 00:18:15,895
e então navbar-colapso, e então eu dou a ela uma identificação como Navbar.

243
00:18:15,895 --> 00:18:20,115
Agora, você está começando a ver a correlação entre

244
00:18:20,115 --> 00:18:26,300
essas classes e o ID e o que eu declarei na alternância de dados e o destino de dados.

245
00:18:26,300 --> 00:18:32,750
Então, aqui o destino de dados que eu especificar como #Navbar e assim o ID dado a esta div é navbar.

246
00:18:32,750 --> 00:18:35,640
E eu especifico a alternância de dados como colapso.

247
00:18:35,640 --> 00:18:40,440
Colapso é um dos componentes JavaScript bootstraps,

248
00:18:40,440 --> 00:18:43,955
que vamos olhar com mais detalhes no próximo módulo.

249
00:18:43,955 --> 00:18:50,780
Então, colocando isso dentro da div para telas pequenas e extra pequenas,

250
00:18:50,780 --> 00:18:54,860
isso seria escondido por padrão,

251
00:18:54,860 --> 00:18:56,520
mas quando eu clicar no botão,

252
00:18:56,520 --> 00:19:01,445
o conteúdo desta div será revelado na tela.

253
00:19:01,445 --> 00:19:09,540
Deixe-me também adicionar um mr-auto para a classe navarbar-marca lá para que

254
00:19:09,540 --> 00:19:18,775
eu automaticamente introduzir uma margem direita suficiente para esta navbar- marca.

255
00:19:18,775 --> 00:19:22,495
Agora, vamos dar uma olhada nisso em nosso navegador.

256
00:19:22,495 --> 00:19:25,270
Indo para o navegador, agora você pode ver como

257
00:19:25,270 --> 00:19:31,370
minha barra de navegação é recolhida em tamanhos de tela pequenos e extra pequenos.

258
00:19:31,370 --> 00:19:35,925
E observe este botão no lado esquerdo.

259
00:19:35,925 --> 00:19:38,005
Quando eu clico no botão,

260
00:19:38,005 --> 00:19:43,805
os links na minha barra de navegação são exibidos e ocultos.

261
00:19:43,805 --> 00:19:51,360
Este é o comportamento que eu quero para a implementação responsiva da minha barra de navegação.

262
00:19:51,360 --> 00:19:55,375
Se eu mudar para uma

263
00:19:55,375 --> 00:20:00,925
tela normal e maior, a barra de navegação é completamente exibida, incluindo os links.

264
00:20:00,925 --> 00:20:07,190
Mas quando eu vejo a mesma coisa em uma tela menor como esta,

265
00:20:07,190 --> 00:20:10,430
então os links da barra de navegação estão escondidos atrás

266
00:20:10,430 --> 00:20:15,020
deste botão e, em seguida, serão ativados e desativados clicando nesse botão.

267
00:20:15,020 --> 00:20:18,190
Então, esse é o comportamento responsivo que você pode

268
00:20:18,190 --> 00:20:22,870
incorporar em sua barra de navegação em seu site.

269
00:20:22,870 --> 00:20:27,285
Agora que concluímos a barra de navegação na minha página index.HTML,

270
00:20:27,285 --> 00:20:32,015
quero ser capaz de introduzir a mesma barra de navegação para a página aboutus.HTML.

271
00:20:32,015 --> 00:20:35,540
Antes de chegarmos lá, vamos para o rodapé.

272
00:20:35,540 --> 00:20:38,250
E então você percebe que no rodapé,

273
00:20:38,250 --> 00:20:39,870
temos esses links.

274
00:20:39,870 --> 00:20:43,265
Eu quero ser capaz de atualizar este link também para apontar

275
00:20:43,265 --> 00:20:48,450
para aboutus.HTML para que, mesmo clicando no link no meu rodapé,

276
00:20:48,450 --> 00:20:51,090
eu ainda iria para a página sobre.

277
00:20:51,090 --> 00:20:53,780
Agora, voltando aqui,

278
00:20:53,780 --> 00:21:02,320
o que eu vou fazer é simplesmente copiar este código desta barra de navegação daqui.

279
00:21:02,870 --> 00:21:13,520
E, em seguida, vá para a página aboutus.HTML e, em seguida, cole isso na minha página aboutus.HTML.

280
00:21:13,520 --> 00:21:17,145
Não apenas isso, eu preciso fazer algum ajuste para isso,

281
00:21:17,145 --> 00:21:20,750
porque isso está agora na página aboutus.HTML.

282
00:21:20,750 --> 00:21:25,105
Então, obviamente, há algumas coisas que preciso atualizar.

283
00:21:25,105 --> 00:21:29,875
Em primeiro lugar, esta navbar-marca que deve me levar de volta

284
00:21:29,875 --> 00:21:35,485
à minha página inicial deve agora ser atualizado como index.HTML aqui.

285
00:21:35,485 --> 00:21:43,045
E então, o item de lista aqui agora o segundo a página inicial novamente,

286
00:21:43,045 --> 00:21:51,165
eu quero atualizar isso para index.HTML lá e, em seguida, o segundo link para o sobre,

287
00:21:51,165 --> 00:21:53,610
porque esta é a página aboutus.HTML,

288
00:21:53,610 --> 00:21:58,480
eu vou colocá-lo de volta para aquele hash lá e então eu vou remover

289
00:21:58,480 --> 00:22:06,045
a classe ativa do primeiro item e, em seguida, aplicar a classe ativa para o segundo item,

290
00:22:06,045 --> 00:22:11,520
porque esta é a página Sobre e, portanto, deve ser a que está realçada.

291
00:22:11,520 --> 00:22:16,705
Novamente, indo para o rodapé da página Sobre.

292
00:22:16,705 --> 00:22:22,870
No rodapé, eu vou fazer as mesmas atualizações para os links aqui para que

293
00:22:22,870 --> 00:22:29,525
a Home Page deve me levar de volta para index.HTML e, em seguida, deixe-me salvar as alterações.

294
00:22:29,525 --> 00:22:34,740
Então agora minha página Sobre também é atualizada corretamente.

295
00:22:34,740 --> 00:22:36,390
Indo para o navegador,

296
00:22:36,390 --> 00:22:41,220
agora você pode ver que eu estou na minha Home Page e, em seguida, quando eu clicar na página sobre,

297
00:22:41,220 --> 00:22:42,795
eu vou para a página Sobre.

298
00:22:42,795 --> 00:22:48,710
Observe como essa mesma barra de navegação é exibida em About Page,

299
00:22:48,710 --> 00:22:51,090
então você tem sobre ser realçado porque eu

300
00:22:51,090 --> 00:22:53,660
apliquei a classe ativa para isso e então eu posso

301
00:22:53,660 --> 00:22:58,770
voltar para minha Home Page clicando na narvar-brand ou na página inicial.

302
00:22:58,770 --> 00:23:02,115
Então, vamos clicar na narvar-marca e estamos de volta em nossa página

303
00:23:02,115 --> 00:23:06,210
principal ou Home Page ou index.HTML.

304
00:23:06,210 --> 00:23:13,180
Então, agora a navegação está configurada corretamente na página inicial e na página Sobre.

305
00:23:13,180 --> 00:23:17,810
Algumas coisas adicionais que eu vou fazer é aplicar se você vê que

306
00:23:17,810 --> 00:23:23,480
é classe que eu posso mudar a cor da minha barra de navegação

307
00:23:23,480 --> 00:23:26,340
e também eu gostaria de adicionar

308
00:23:26,340 --> 00:23:32,595
uma migalha de pão a esta página Sobre e para que a migalha de pão também vai me dar outra maneira

309
00:23:32,595 --> 00:23:36,950
de navegar de volta para a minha Home Page e também indicar

310
00:23:36,950 --> 00:23:42,170
a hierarquia no meu site onde estou no momento.

311
00:23:42,170 --> 00:23:45,505
Então vamos fazer esses dois passos a seguir.

312
00:23:45,505 --> 00:23:49,835
Voltando para esse editor em styles.css.

313
00:23:49,835 --> 00:23:52,765
Vou adicionar mais algumas aulas aqui.

314
00:23:52,765 --> 00:23:58,030
Você notou que minha barra de navegação estava escondendo parte do jumbotron.

315
00:23:58,030 --> 00:23:59,590
Para evitar isso,

316
00:23:59,590 --> 00:24:01,705
o que eu vou fazer é para o meu corpo,

317
00:24:01,705 --> 00:24:06,110
eu vou dar um preenchimento de 50 pixels

318
00:24:06,110 --> 00:24:11,505
no topo para que esses 50 pixels sejam deixados para a barra de navegação cobrir.

319
00:24:11,505 --> 00:24:14,580
Sempre que você estiver usando uma barra de navegação superior fixa, é

320
00:24:14,580 --> 00:24:17,580
uma boa idéia dar este preenchimento ao corpo de

321
00:24:17,580 --> 00:24:20,270
sua página da Web para que a navegação não cubra

322
00:24:20,270 --> 00:24:24,435
o elemento mais alto no corpo de sua página da Web.

323
00:24:24,435 --> 00:24:29,675
Então, os restantes eu vou deixar como

324
00:24:29,675 --> 00:24:39,155
zero pixels e também o índice z para o meu corpo como zero.

325
00:24:39,155 --> 00:24:43,485
Do seu conhecimento de CSS você entende o que o z-index faz

326
00:24:43,485 --> 00:24:48,865
e o próximo que eu vou fazer é eu vou

327
00:24:48,865 --> 00:24:55,580
sobrecarregar a classe navbar-dark adicionando mais uma cor para

328
00:24:55,580 --> 00:24:59,750
a classe navbar e a cor que eu vou

329
00:24:59,750 --> 00:25:06,490
escolher é 512DA8.

330
00:25:06,490 --> 00:25:15,275
Esta é uma cor roxa escura que parece muito bom no meu site.

331
00:25:15,275 --> 00:25:21,505
Na verdade, Se você tem interesse onde eu encontrei essas cores que você pode visitar

332
00:25:21,505 --> 00:25:29,665
www.android.com e, em seguida, procurar a sua documentação para o design de material e lá,

333
00:25:29,665 --> 00:25:33,325
eles têm sugestões de como as cores podem ser usadas

334
00:25:33,325 --> 00:25:38,965
em seu aplicativo Android, mas a mesma coisa se aplica mesmo a um site, de

335
00:25:38,965 --> 00:25:46,675
modo que é onde fui e selecionei essas cores para serem usadas no meu site.

336
00:25:46,675 --> 00:25:51,060
Então, aplicando isso, agora quando eu faço isso,

337
00:25:51,060 --> 00:25:55,740
eu tenho que voltar para minha página index.HTML e,

338
00:25:55,740 --> 00:26:01,095
em seguida, da barra de navegação eu devo remover esse bg-primary.

339
00:26:01,095 --> 00:26:09,320
Caso contrário, a cor que sugeri no CSS não será aplicada a isso.

340
00:26:09,320 --> 00:26:14,185
Da mesma forma, vá para a página aboutus.HTML e, em seguida, role para

341
00:26:14,185 --> 00:26:20,850
a barra de navegação e, em seguida, remova o bg-primary disso também.

342
00:26:21,610 --> 00:26:26,580
Agora, enquanto eu estou na página aboutus.HTML,

343
00:26:26,580 --> 00:26:34,080
deixe-me introduzir uma migalha de pão no meu recipiente,

344
00:26:34,080 --> 00:26:36,310
a primeira linha do meu recipiente lá.

345
00:26:36,310 --> 00:26:39,405
Então este é o lugar onde o título About Us estava

346
00:26:39,405 --> 00:26:45,120
lá, então lá eu vou entrar e introduzir um ol.

347
00:26:45,260 --> 00:26:53,560
Só estou usando a etiqueta ol como forma de introduzir a migalha de pão.

348
00:26:53,560 --> 00:26:59,025
Você pode usar até mesmo um div para isso e ainda vai funcionar muito bem.

349
00:26:59,025 --> 00:27:06,050
Acontece que o exemplo na documentação bootstraps usado um ol assim,

350
00:27:06,050 --> 00:27:14,030
Eu estou aderindo com que mesmo uma div simples também vai funcionar bem aqui.

351
00:27:14,030 --> 00:27:20,895
Então, eu digo ol classe col-12 pão ralado.

352
00:27:20,895 --> 00:27:23,200
Assim, as classes de pão aplicado e

353
00:27:23,200 --> 00:27:26,825
não o col-12 significando que esticou toda a tela.

354
00:27:26,825 --> 00:27:33,500
E lá dentro, eu vou entrar e adicionar dois itens da lista.

355
00:27:34,250 --> 00:27:39,625
Agora você vê por que o uso de ol é útil aqui,

356
00:27:39,625 --> 00:27:48,565
porque eu posso usar os itens da lista para descrever o item de pão ralado.

357
00:27:48,565 --> 00:27:50,725
Então, item breadcrumb aqui,

358
00:27:50,725 --> 00:27:55,020
então eu incluo um item breadcrumb e, em seguida, dentro lá vou usar

359
00:27:55,020 --> 00:28:02,380
a tag A para definir um link de volta para a minha Home Page.

360
00:28:02,380 --> 00:28:07,275
Então eu digo, “A” e, em seguida, para este

361
00:28:07,275 --> 00:28:12,010
A, eu dou o href como index.HTML e,

362
00:28:12,010 --> 00:28:17,815
em seguida, incluí-lo na minha primeira migalha de pão e, em seguida,

363
00:28:17,815 --> 00:28:25,660
o próximo que eu vou incluir é outro item de lista e

364
00:28:25,660 --> 00:28:34,700
o segundo item de lista eu vou aplicar a classe como item de pão ralado e ativo.

365
00:28:34,700 --> 00:28:40,900
Então note o uso da classe ativa aqui e, em seguida, dentro lá eu vou dizer “sobre

366
00:28:40,900 --> 00:28:45,090
nós” Eu não preciso de um link aqui porque eu já estou na página,

367
00:28:45,090 --> 00:28:49,425
então isso não precisa ser incluído para este item da lista.

368
00:28:49,425 --> 00:28:51,010
Vamos salvar as alterações,

369
00:28:51,010 --> 00:28:54,910
para que você possa ver como a migalha de pão foi introduzida nesta

370
00:28:54,910 --> 00:28:59,555
página Sobre Nós em particular aqui.

371
00:28:59,555 --> 00:29:04,410
Vamos dar uma olhada na página da Web resultante.

372
00:29:04,410 --> 00:29:11,320
Indo para a minha página web, agora você pode ver que a cor da barra de navegação

373
00:29:11,320 --> 00:29:14,310
mudou agora para o roxo escuro que são introduzidos

374
00:29:14,310 --> 00:29:17,900
através do CSS e isso parece bom na tela aqui.

375
00:29:17,900 --> 00:29:20,780
Roxo escuro, seguido por um roxo mais claro e, em seguida,

376
00:29:20,780 --> 00:29:24,300
na parte inferior ainda mais roxo mais claro para o meu rodapé.

377
00:29:24,300 --> 00:29:27,240
Bem, eu não sou designer,

378
00:29:27,240 --> 00:29:33,875
mas isso é o melhor que eu poderia criar em termos de adicionar perto de sites.

379
00:29:33,875 --> 00:29:38,660
Como você sabe da história, os homens são daltônicos.

380
00:29:38,660 --> 00:29:42,750
Então, temos muito mau gosto em cores.

381
00:29:42,750 --> 00:29:48,065
Se você é casado sua esposa definitivamente vai lembrá-lo sobre isso.

382
00:29:48,065 --> 00:29:52,680
Vamos para a página Sobre e ver como ela se parece.

383
00:29:52,680 --> 00:29:55,960
Então, esta é a página Sobre e na página Sobre você pode

384
00:29:55,960 --> 00:29:59,520
ver a barra de navegação com a cor correta

385
00:29:59,520 --> 00:30:06,925
lá e anote a migalha de pão incluída na About Us aqui em baixo.

386
00:30:06,925 --> 00:30:10,910
Então você pode ver o Início que o leva de volta para a página de índice e

387
00:30:10,910 --> 00:30:15,020
, em seguida, Sobre Nós como você viu nós aplicamos link

388
00:30:15,020 --> 00:30:16,655
ativo, classe ativa para este.

389
00:30:16,655 --> 00:30:19,500
Então é assim que o Sobre Nós é exibido e a Página Inicial.

390
00:30:19,500 --> 00:30:23,770
Então, este é o estilo padrão de breadcrumb usado

391
00:30:23,770 --> 00:30:29,450
no bootstrap e se eu clicar na Home Page, voltarei para a minha Home Page.

392
00:30:29,450 --> 00:30:35,585
Com isso, completamos este exercício sobre navbar e pão ralado.

393
00:30:35,585 --> 00:30:42,640
Este é um bom momento para você fazer um commit git com a mensagem “navbar e breadcumbs”.