[MÚSICA]
Na lição anterior eu me referi à classe nav que é usada no Bootstrap para
criar estruturas de navegação.
Nós exploramos o navbar nav já no módulo anterior.
Nesta palestra,
vamos explorar guias de navegação e pílulas de navegação em um pouco mais de detalhes.
E o exercício que se segue a isso,
veremos como fazemos uso disso para criar uma estrutura de navegação para nossa página web.
Tabs e pílulas fornecem uma estrutura de navegação interessante para a nossa página web.
Eles permitirão que você coloque conteúdo dentro de sua página da web que
o usuário pode navegar entre o conteúdo sem recarregar
a página da web para uma página da web diferente.
Então, se você tem uma certa quantidade de conteúdo a ser apresentado em sua página da web,
mas quer mostrar apenas parte do conteúdo em sua página da web, mas
ainda fornecer ao usuário a capacidade de navegar para outras partes do conteúdo,
então guias e pílulas podem ser muito úteis para este fim.
O que é melhor do que simplesmente ir e dar uma olhada no uso de guias e
pílulas na navegação?
Olhando para um exemplo do uso de guias na navegação,
você verá que, neste caso específico, você tem
as informações de Liderança Corporativa em nossa página aboutus.html,
incluídas dentro de guias com a navegação de guias construída na parte superior.
Então você pode ver que você tem os quatro líderes corporativos diferentes
representados em sua própria guia aqui.
E o conteúdo atualmente revelado na página web é apenas
os detalhes sobre o primeiro líder corporativo.
Então, se você quiser mudar para outros, basta clicar
na guia correspondente e, em seguida, revelar esse conteúdo em sua página da web.
Portanto, note que não estamos navegando para uma página web diferente, mas
estamos simplesmente revelando o conteúdo usando esta guia de navegação aqui.
Em vez disso, em alguns casos, você pode achar
uma navegação baseada em pílulas mais útil para sua finalidade.
Então, uma navegação baseada em pílulas funciona assim.
Então você ainda tem a mesma estrutura de navegação no topo aqui, mas
a informação atualmente exibida será destacada como uma pílula aqui.
Portanto, se você mudar para outra parte de sua navegação, observe como
esse item específico está sendo destacado na página da Web
e as informações correspondentes são exibidas no conteúdo da guia abaixo.
Então esta é uma navegação baseada em pílulas.
Então, isso usa pílulas nav em vez de guias nav para
a classe que está sendo aplicada para a classe nav lá.
Agora que você viu um exemplo do uso de navegação com abas e pull
em uma página da web, tenho certeza que você está curioso para saber como ele é realmente construído.
Isso é o que vamos explorar no próximo exercício.
Então, vamos usar navegação com guias e, em seguida, usar o conteúdo da
guia e painéis de guias para organizar o conteúdo real que será exibido em nossa página web.
[ MUSIC]