Acabamos de concluir uma discussão sobre a importância de fornecer navegação em seu site.
Também analisamos várias maneiras diferentes de fornecer navegação em um site.
Agora é hora de olhar para o bootstrap e olhar para os componentes
que o bootstrap fornece que nos permitem adicionar navegação aos nossos sites.
Dois componentes importantes do bootstrap são o Navbar e o Breadcrumbs.
Vamos examinar os dois neste exercício.
Vamos começar adicionando uma barra de navegação à parte superior da nossa página web.
Podemos fazer isso usando o componente Navbar que faz parte do bootstrap.
Então, como começamos?
Vamos para o corpo da nossa página HTML.
Então, aqui, eu tenho index.HTML aberto.
E no topo,
eu vou adicionar em um elemento usando essa tag HTML nav.
Agora, a tag HTML nav destina-se a fornecer navegação.
Então, vamos aproveitar essa tag e construir nossa barra de navegação usando a tag nav.
Então, agora, no topo,
eu vou adicionar nesta tag,
colocar o nav e construir a barra de navegação em torno desta tag de navegação.
Então, uma vez que adicionamos esta tag nav em index.HTML,
então podemos ir em frente e, em seguida, aplicar as classes bootstraps para esta tag nav.
Então, eu aplico a barra de navegação da classe.
Então, a classe navbar em bootstrap me permite criar uma barra de navegação.
Existem muitas maneiras diferentes de personalizar a barra de navegação,
que temos um olhar como classes adicionais que irão adicionar a esta tag nav.
Junto com a barra de navegação,
também adicionamos na próxima classe que é navbar-escuro.
Agora eu quero que minha barra de navegação seja de cor escura,
com um fundo mais escuro.
Porque isso vai muito bem com o site que eu acabei de projetar.
Podemos ter navbar-light,
que é uma barra de navegação de cor mais clara.
Então, você pode optar por usar qualquer um deles em sua página da web.
A próxima aula que vou usar é navbar-expand-sm.
Agora, e também, vou especificar o tamanho da tela abaixo
do qual o comportamento alternada entra em existência.
Agora, quando eu digo navbar-expand-sm,
isso significa que para telas pequenas e extra pequenas,
este navbars vai se tornar uma barra de navegação alternada.
Significando que, ele será recolhido nesses tamanhos de tela.
Você logo aprenderá como isso funciona,
quando olharmos para como podemos adicionar
o plugin de colapso para a barra de navegação para habilitar esse tipo de comportamento.
Então, junto com uma barra de navegação alternada sm,
eu vou aplicar uma cor de fundo para a barra de navegação inicialmente,
que seria bg-primary.
Agora bg-primary é a cor primária que é definida no seu bootstrap.
Por padrão, esta é uma versão de cor azul que é usada por bootstraps.
Então eu vou começar com isso como minha cor primária.
Mais tarde, eu vou personalizar a cor da minha barra de navegação usando algumas classes CSS.
Além disso, eu também vou aplicar
outra classe chamada fixed-top para essa barra de navegação.
O que fixed-top faz, é que ele corrige a barra de navegação para
o topo da janela do navegador onde esta página web está sendo renderizada.
Mesmo quando você rolar sua página molhada,
a barra de navegação era até permanecer no topo da página.
Você pode simplesmente usar o fundo fixo para corrigir
a barra de navegação na parte inferior da janela do navegador ou você pode dizer, parte superior estática.
E também, você não pode usar essa classe.
Se você não usar isso
, sua barra de navegação também será rolada quando sua página da Web for rolada para cima.
No meu site, escolho manter a barra de navegação fixa na parte superior da página.
Existem muitas outras opções
disponíveis que você pode encontrar na documentação de bootstraps.
Então este é um exemplo do uso da barra de navegação.
Agora, além disso, dentro da barra de navegação,
vou colocar qualquer conteúdo que
vai ser usado na barra de navegação dentro de um contêiner.
Então este é o lugar onde eu vou usar um elemento div aqui
e aplicar a classe recipiente para este elemento div.
Então, o que quer que esteja fechado lá dentro,
será restrito à mesma largura que o resto da minha página Web.
Como você se lembra, eu usei a classe de contêiner para
definir a amplitude do conteúdo em minha página da web,
então eu vou aplicar o mesmo à minha barra de navegação também, para
que minhas informações da barra de navegação sejam
exibidas dentro da mesma largura que o resto da minha página da web.
Você pode optar por não usar a classe de contêiner na barra de navegação. Nesse caso,
o conteúdo da barra de navegação se espalhará por toda a largura da tela.
Dentro da barra de navegação,
vou adicionar uma classe a uma tag aqui.
Esta classe que eu chamo como navbar-marca,
me permite exibir algumas informações como uma informação de marca na minha barra de navegação.
Assim, se você tem uma empresa, por exemplo,
você pode exibir o nome da sua empresa ou
o logotipo da sua empresa usando a navbar-marca
para que seja exibido de forma proeminente em sua barra de navegação.
Obviamente, quando você visita muitos sites,
você verá que o nome da empresa está em algum lugar visível
na barra de navegação desse site.
Então, deixe-me adicionar essa marca navbar-marca.
Isso também pode ser hiperlink para a página inicial do seu site.
Então, vou deixar isso aí.
Nas páginas restantes do meu site,
vou apenas adicionar o href para me trazer de volta para a página index.HTML,
que é a página inicial.
E aqui dentro vou acrescentar o nome do meu restaurante.
Vamos salvar as alterações e ir e dar
uma olhada rápida no estado atual da minha barra de navegação.
Indo para a página da Web no navegador,
agora você pode ver onde a barra de navegação está visível na minha página web no navegador.
A barra de navegação está agora na parte superior da página e você
pode ver que enquanto eu rolar minha página,
a barra de navegação ainda permanece no topo porque eu costumava a classe fixed-top.
Você também pode ver
o navbar-marca que me permite exibir o nome do restaurante lá.
Mais tarde eu vou substituir isso pelo logotipo deste restaurante.
Você percebe que a barra de navegação está parcialmente coberta pelo Jumbotron.
Você vai corrigir isso um pouco mais tarde usando alguma personalização CSS.
A próxima coisa que eu vou fazer é adicionar alguns links para a minha barra de navegação, para
que esses links me levem para as outras páginas do meu site.
Então, como fazemos isso?
Voltando para index.HTML,
eu vou adicionar em um ul aqui,
dentro do qual eu vou declarar
todos os vários links que serão exibidos na minha caixa de navegação.
Então este ul para o qual eu vou aplicar a classe como navbar-nav.
Então esta é a classe que me ajudará a definir
o conjunto de links que serão incluídos na minha barra de navegação.
E esses links serão exibidos horizontalmente dentro da minha barra de navegação.
O senhor auto-class que eu também apliquei para o ul,
é usado para especificar a margem direita.
Então esta é uma classe utilitário que está disponível
no bootstrap que me permite especificar a margem direita.
Então, se eu disser, mr-auto,
o que significa é que no lado direito,
a margem direita deve ser definida o máximo possível.
Então, o que significa que o conteúdo será empurrado o mais à esquerda
possível dentro da barra de navegação.
Dentro desta lista não ordenada,
eu posso usar elementos de lista para incluir
os vários links que vão fazer parte da minha barra de navegação.
Então lá dentro, eu vou adicionar em alguns links lá
e eu vou começar especificando o primeiro lá com o link.
Para cada item de lista na barra de navegação,
você vai aplicar a classe como item de navegação.
Isso permite que esses itens da lista sejam exibidos horizontalmente como links na minha barra de navegação.
E, em seguida, dentro aqui,
eu posso usar a tag a para adicionar
no link real que fará parte da minha barra de navegação.
Então lá dentro eu uso a tag
a com a classe nav-link e isso também me permite usar o href.
Atributo para definir o link lá.
E o primeiro que vou incluir é o Lar.
Então, isso incluiria um item chamado Início nesta barra de navegação.
Deixe-me copiar isso e colar isso.
E então vamos editar alguns destes porque eu quero adicionar
quatro diferentes à minha barra de navegação.
O primeiro é o Lar.
O segundo seria sobre.
O terceiro seria Menu que eu vou construir como parte do próximo curso.
E o último será Contacto.
Um site típico da empresa teria links como este em sua barra de navegação.
Então, com a adição desses dois,
agora o que eu posso fazer é
que podemos identificar explicitamente um desses links como o link ativo, o
que significa que quando você está nessa página específica,
esse link em particular pode ser destacado.
Então, para fazer isso, vamos aplicar aqui a classe chamada ativo para um desses itens de lista.
Neste caso, como esta é a página index.html,
estou aplicando a classe ativa ao link inicial lá.
Isso praticamente completa minha barra de navegação na página index.HTML.
Uma pequena coisa que eu gostaria de corrigir aqui é que o link Sobre,
eu quero vinculá-lo à
página aboutus.HTML que já incluímos em nosso site,
porque é aí que eu quero que ele leve.
Vamos dar uma olhada rápida na nossa barra de navegação desta parte.
Voltando à nossa barra de navegação,
você pode ver imediatamente o resultado de incluir
esses itens na lista não ordenada lá.
Então, você vê o Início,
Sobre, Menu e Contato lá,
e cada um deles é um link, mas este é um item de navegação aqui.
E observe como o Lar é destacado aqui por causa do uso da classe ativa.
Então, se eu clicar no botão Sobre,
ele deve me levar para o campo Sobre.
Eis que aqui estamos nós.
Mas eu percebo que eu não tenho uma maneira de voltar atrás, o
que significa que eu também preciso entregar essa barra de navegação para a página aboutus.HTML.
Chegaremos lá em pouco tempo.
Por enquanto, vou navegar rapidamente usando o botão Voltar do
meu navegador de volta à minha página index.HTML.
Uma coisa que eu também queria demonstrar a vocês era como
essa barra de navegação entrará em colapso para tamanhos de tela pequenos e extra pequenos.
Então, vamos ativar a exibição usando a Visão Responsiva
e, em seguida, deixe-me ir para o Galaxy S5.
E eu notei que quando eu uso o Galaxy S5 assim,
você pode ver que isso está sendo exibido mais cedo do que já está cobrindo a tela.
Esse não é o comportamento que eu quero.
Eu quero ser capaz de esconder isso quando eu estou vendo isso em uma tela pequena e extra pequena.
E então talvez eu adicione um botão aqui que eu possa usar
para ativar e desativar a exibição desses links.
Você viu essas coisas em sites móveis.
Como fazemos isso no bootstrap?
Vamos para esse passo a seguir.
Voltando para nossa barra de navegação aqui.
Deixe-me adicionar um botão lá,
que irá atuar como o botão de alternância para mostrar e ocultar
meus links da minha barra de navegação quando ele é exibido em telas extra inteligentes e pequenas.
Então, para adicionar lá,
deixe-me adicionar um botão e aplicar algumas classes a este botão.
Vamos discutir mais sobre botões em bootstrap na próxima lição.
Mas para adicionar um botão no bootstrap,
você aplicaria a classe para este botão particular como navbar-toggler.
Então, este é um barra-toggler.
Então, como o nome indica,
você já está começando a entender o que esse botão vai fazer neste caso.
E então eu adicionaria o tipo como botão para indicar que isso está agindo como um botão.
E, em seguida, alternar dados como colapso.
Agora, este atributo de alternância de dados que você verá aqui é na verdade
um uso de componente JavaScript no bootstrap.
Vamos olhar para este tipo de barra de hífens de dados de atributos mais no próximo módulo,
onde vamos olhar para componentes JavaScript bootstraps.
A barra de navegação requer um desses componentes JavaScript para ser capaz de ativar
e desativar meus links na minha barra de navegação, Então,
essa é a razão pela qual eu rapidamente introduzi este conceito aqui,
mas vamos voltar para examinar
este bootstraps componentes JavaScript mais no próximo módulo.
Então, dados-toggle colapso e
, em seguida, o data-target como #Navbar.
Agora, vou apresentar outra div com a identificação como barra de navegação.
Então, quando eu especificar uma data ou destino #Navbar,
que se refere ao ID desse outro elemento que vai ser
o alvo deste botão particular aqui.
Então, essa é a parte que eu adiciono no fundo.
E também, quero que o botão mostre algo aqui.
E normalmente, quando você vê esses tipos de botões em sites móveis,
ele contém linhas livres lá, o
que normalmente é chamado como o ícone de Alternar Navbar.
Então, eu vou incluir um ícone especial que
está incluído no bootstrap, chamado navbar-toggler ícone.
Então, se eu aplicar esta classe para tag span,
em seguida, que irá introduzir um ícone navbar-toggler para o meu botão aqui.
Então, isso introduz um botão.
Vamos olhar para o que isto parece daqui a pouco.
Agora, quando eu clicar neste botão,
eu quero ser capaz de mostrar e ocultar esses links.
Para me permitir fazer isso,
o que vou fazer é cercar esta ul com um div aqui.
Então, eu vou entrar e introduzir um div em torno deste ul.
E para esta div,
eu aplicarei a classe como colapso,
e então navbar-colapso, e então eu dou a ela uma identificação como Navbar.
Agora, você está começando a ver a correlação entre
essas classes e o ID e o que eu declarei na alternância de dados e o destino de dados.
Então, aqui o destino de dados que eu especificar como #Navbar e assim o ID dado a esta div é navbar.
E eu especifico a alternância de dados como colapso.
Colapso é um dos componentes JavaScript bootstraps,
que vamos olhar com mais detalhes no próximo módulo.
Então, colocando isso dentro da div para telas pequenas e extra pequenas,
isso seria escondido por padrão,
mas quando eu clicar no botão,
o conteúdo desta div será revelado na tela.
Deixe-me também adicionar um mr-auto para a classe navarbar-marca lá para que
eu automaticamente introduzir uma margem direita suficiente para esta navbar- marca.
Agora, vamos dar uma olhada nisso em nosso navegador.
Indo para o navegador, agora você pode ver como
minha barra de navegação é recolhida em tamanhos de tela pequenos e extra pequenos.
E observe este botão no lado esquerdo.
Quando eu clico no botão,
os links na minha barra de navegação são exibidos e ocultos.
Este é o comportamento que eu quero para a implementação responsiva da minha barra de navegação.
Se eu mudar para uma
tela normal e maior, a barra de navegação é completamente exibida, incluindo os links.
Mas quando eu vejo a mesma coisa em uma tela menor como esta,
então os links da barra de navegação estão escondidos atrás
deste botão e, em seguida, serão ativados e desativados clicando nesse botão.
Então, esse é o comportamento responsivo que você pode
incorporar em sua barra de navegação em seu site.
Agora que concluímos a barra de navegação na minha página index.HTML,
quero ser capaz de introduzir a mesma barra de navegação para a página aboutus.HTML.
Antes de chegarmos lá, vamos para o rodapé.
E então você percebe que no rodapé,
temos esses links.
Eu quero ser capaz de atualizar este link também para apontar
para aboutus.HTML para que, mesmo clicando no link no meu rodapé,
eu ainda iria para a página sobre.
Agora, voltando aqui,
o que eu vou fazer é simplesmente copiar este código desta barra de navegação daqui.
E, em seguida, vá para a página aboutus.HTML e, em seguida, cole isso na minha página aboutus.HTML.
Não apenas isso, eu preciso fazer algum ajuste para isso,
porque isso está agora na página aboutus.HTML.
Então, obviamente, há algumas coisas que preciso atualizar.
Em primeiro lugar, esta navbar-marca que deve me levar de volta
à minha página inicial deve agora ser atualizado como index.HTML aqui.
E então, o item de lista aqui agora o segundo a página inicial novamente,
eu quero atualizar isso para index.HTML lá e, em seguida, o segundo link para o sobre,
porque esta é a página aboutus.HTML,
eu vou colocá-lo de volta para aquele hash lá e então eu vou remover
a classe ativa do primeiro item e, em seguida, aplicar a classe ativa para o segundo item,
porque esta é a página Sobre e, portanto, deve ser a que está realçada.
Novamente, indo para o rodapé da página Sobre.
No rodapé, eu vou fazer as mesmas atualizações para os links aqui para que
a Home Page deve me levar de volta para index.HTML e, em seguida, deixe-me salvar as alterações.
Então agora minha página Sobre também é atualizada corretamente.
Indo para o navegador,
agora você pode ver que eu estou na minha Home Page e, em seguida, quando eu clicar na página sobre,
eu vou para a página Sobre.
Observe como essa mesma barra de navegação é exibida em About Page,
então você tem sobre ser realçado porque eu
apliquei a classe ativa para isso e então eu posso
voltar para minha Home Page clicando na narvar-brand ou na página inicial.
Então, vamos clicar na narvar-marca e estamos de volta em nossa página
principal ou Home Page ou index.HTML.
Então, agora a navegação está configurada corretamente na página inicial e na página Sobre.
Algumas coisas adicionais que eu vou fazer é aplicar se você vê que
é classe que eu posso mudar a cor da minha barra de navegação
e também eu gostaria de adicionar
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
de navegar de volta para a minha Home Page e também indicar
a hierarquia no meu site onde estou no momento.
Então vamos fazer esses dois passos a seguir.
Voltando para esse editor em styles.css.
Vou adicionar mais algumas aulas aqui.
Você notou que minha barra de navegação estava escondendo parte do jumbotron.
Para evitar isso,
o que eu vou fazer é para o meu corpo,
eu vou dar um preenchimento de 50 pixels
no topo para que esses 50 pixels sejam deixados para a barra de navegação cobrir.
Sempre que você estiver usando uma barra de navegação superior fixa, é
uma boa idéia dar este preenchimento ao corpo de
sua página da Web para que a navegação não cubra
o elemento mais alto no corpo de sua página da Web.
Então, os restantes eu vou deixar como
zero pixels e também o índice z para o meu corpo como zero.
Do seu conhecimento de CSS você entende o que o z-index faz
e o próximo que eu vou fazer é eu vou
sobrecarregar a classe navbar-dark adicionando mais uma cor para
a classe navbar e a cor que eu vou
escolher é 512DA8.
Esta é uma cor roxa escura que parece muito bom no meu site.
Na verdade, Se você tem interesse onde eu encontrei essas cores que você pode visitar
www.android.com e, em seguida, procurar a sua documentação para o design de material e lá,
eles têm sugestões de como as cores podem ser usadas
em seu aplicativo Android, mas a mesma coisa se aplica mesmo a um site, de
modo que é onde fui e selecionei essas cores para serem usadas no meu site.
Então, aplicando isso, agora quando eu faço isso,
eu tenho que voltar para minha página index.HTML e,
em seguida, da barra de navegação eu devo remover esse bg-primary.
Caso contrário, a cor que sugeri no CSS não será aplicada a isso.
Da mesma forma, vá para a página aboutus.HTML e, em seguida, role para
a barra de navegação e, em seguida, remova o bg-primary disso também.
Agora, enquanto eu estou na página aboutus.HTML,
deixe-me introduzir uma migalha de pão no meu recipiente,
a primeira linha do meu recipiente lá.
Então este é o lugar onde o título About Us estava
lá, então lá eu vou entrar e introduzir um ol.
Só estou usando a etiqueta ol como forma de introduzir a migalha de pão.
Você pode usar até mesmo um div para isso e ainda vai funcionar muito bem.
Acontece que o exemplo na documentação bootstraps usado um ol assim,
Eu estou aderindo com que mesmo uma div simples também vai funcionar bem aqui.
Então, eu digo ol classe col-12 pão ralado.
Assim, as classes de pão aplicado e
não o col-12 significando que esticou toda a tela.
E lá dentro, eu vou entrar e adicionar dois itens da lista.
Agora você vê por que o uso de ol é útil aqui,
porque eu posso usar os itens da lista para descrever o item de pão ralado.
Então, item breadcrumb aqui,
então eu incluo um item breadcrumb e, em seguida, dentro lá vou usar
a tag A para definir um link de volta para a minha Home Page.
Então eu digo, “A” e, em seguida, para este
A, eu dou o href como index.HTML e,
em seguida, incluí-lo na minha primeira migalha de pão e, em seguida,
o próximo que eu vou incluir é outro item de lista e
o segundo item de lista eu vou aplicar a classe como item de pão ralado e ativo.
Então note o uso da classe ativa aqui e, em seguida, dentro lá eu vou dizer “sobre
nós” Eu não preciso de um link aqui porque eu já estou na página,
então isso não precisa ser incluído para este item da lista.
Vamos salvar as alterações,
para que você possa ver como a migalha de pão foi introduzida nesta
página Sobre Nós em particular aqui.
Vamos dar uma olhada na página da Web resultante.
Indo para a minha página web, agora você pode ver que a cor da barra de navegação
mudou agora para o roxo escuro que são introduzidos
através do CSS e isso parece bom na tela aqui.
Roxo escuro, seguido por um roxo mais claro e, em seguida,
na parte inferior ainda mais roxo mais claro para o meu rodapé.
Bem, eu não sou designer,
mas isso é o melhor que eu poderia criar em termos de adicionar perto de sites.
Como você sabe da história, os homens são daltônicos.
Então, temos muito mau gosto em cores.
Se você é casado sua esposa definitivamente vai lembrá-lo sobre isso.
Vamos para a página Sobre e ver como ela se parece.
Então, esta é a página Sobre e na página Sobre você pode
ver a barra de navegação com a cor correta
lá e anote a migalha de pão incluída na About Us aqui em baixo.
Então você pode ver o Início que o leva de volta para a página de índice e
, em seguida, Sobre Nós como você viu nós aplicamos link
ativo, classe ativa para este.
Então é assim que o Sobre Nós é exibido e a Página Inicial.
Então, este é o estilo padrão de breadcrumb usado
no bootstrap e se eu clicar na Home Page, voltarei para a minha Home Page.
Com isso, completamos este exercício sobre navbar e pão ralado.
Este é um bom momento para você fazer um commit git com a mensagem “navbar e breadcumbs”.