Neste exercício, vamos explorar a navegação baseada em guias do Bootstrap, o
suporte do Bootstrap para guias
e como as guias podem ser usadas para organizar o conteúdo em sua página da web.
E como você pode navegar de uma guia para outra guia
e, em seguida, revelar o conteúdo em cada uma dessas guias na página da Web.
Agora, você vai me ver usando a classe nav,
e então qualificá-lo ainda mais usando a classe nav tabs.
A mesma abordagem também pode ser usada com as pílulas de navegação
que olhamos na palestra anterior.
Para começar com este exercício,
vamos para a página aboutus.html.
E aí mesmo,
onde temos o conteúdo da liderança corporativa lá,
depois do h2, vou apresentar a navegação com guias.
Então, é aqui que eu vou fazer uso do ul com as nav-tabs de navegação da classe.
Então, você viu que antes, quando construímos a barra de navegação,
também usamos o ul dentro da barra de navegação para especificar os itens de navegação lá.
Abordagem semelhante aqui, exceto que aqui vamos
usar o ul com o nav e as guias de navegação aqui.
Então, dentro desta ul,
vamos construir a estrutura de navegação para esta navegação com guias aqui.
Então lá dentro, eu vou usar o item de lista com o item de navegação classe,
e construir a navegação em torno deste item de lista.
Então, isso introduz o primeiro item em minhas guias de navegação.
Logo depois disso, lá dentro eu vou introduzir um a com a classe nav-link ativo.
Então, este, como você vê,
se você se lembrar da maneira como usamos o ul com o item de navegação e o link de navegação.
Na barra de navegação,
estamos vendo uma abordagem semelhante aqui.
Então, nav-item ativo e, em seguida, href.
Então, esta seria uma referência ao painel de tabulação mais tarde,
que teria o ID de peter lá,
e função é tabulação para este,
e guia de alternância de dados.
Então, você pode ver o componente javascript do Bootstrap entrando em imagem aqui.
E então eu vou dizer Peter Pan,
e depois fechar a etiqueta lá.
Então, isso completaria nossa primeira guia em nossa navegação com guias.
Deixe-me completar o resto do código,
e então voltamos e revisamos o resto do código lá.
Então, aqui você pode ver que eu completei esta estrutura de navegação aqui.
Da mesma forma, estou definindo os itens da lista para os líderes corporativos livres restantes aqui.
Agora isto, deixa-me guardar o troco.
E então vamos dar uma olhada rápida na página da web.
Mudando para a página da Web,
agora você vê como usando as guias nav nav criamos
essa estrutura de navegação logo abaixo da liderança corporativa aqui.
Então, esta estrutura de navegação significa que eu deveria ser capaz de navegar e
ver cada um deles com mais detalhes clicando sobre isso.
Então, é assim que a navegação com guias funciona aqui.
Agora, obviamente, o conteúdo de cada um deles deve
mostrar apropriadamente apenas os detalhes dessa pessoa aqui.
Então, é aqui que o uso de conteúdo com guias
e as classes do painel de tabulação entrarão em vigor.
E vamos colocar esse conteúdo usando isso.
E, em seguida, amarre esta navegação,
navegação de guias aqui em cima, para
que apenas uma informação de um único líder corporativo
seja exibida na tela de cada vez.
Assim que concluirmos a configuração dessa navegação com guias,
então vamos descer para o conteúdo real aqui.
E agora, eu vou reorganizar esse conteúdo em quatro painéis de guias separados,
cada um dos quais será mostrado quando
o painel de guias correspondente for selecionado na navegação com guias.
Então, para começar,
a primeira coisa que vamos fazer é entrar e separar
cada um desses quatro líderes corporativos nas quatro partes lá, para
que seja fácil para mim ver o que estou fazendo.
Então, no h3,
eu estou cortando-os em quatro partes diferentes,
e então nós seremos capazes de trabalhar com isso.
Então, agora eu tenho um, dois, três, quatro.
Então, esse conteúdo agora precisa ser colocado dentro de uma div
com a classe tab-content.
Então, todo esse conteúdo que temos para
os quatro líderes corporativos diferentes deve ser fechado dentro de uma div tab-conteúdo lá.
Então, agora eu coloquei isso dentro do contato guia.
Agora, para cada um deles,
eu preciso criar outra div com o painel de guias classes e algumas classes adicionais.
E então organize esse contato.
Então, vamos começar com o primeiro.
Então, para o primeiro líder corporativo,
vou apresentar uma nova div com papel como tabpanel.
Então, isso serve como o painel de guias que será exibido
quando a primeira navegação de guias for selecionada.
E a classe correspondente que eu preciso aplicar é tab-pane.
Então, este é o painel de guias,
o conteúdo real que está contido lá.
E então outra classe que eu aplico é desaparecer.
Então, a classe fade permite que esse conteúdo se desvaneça.
Então, esta é uma classe de animação que Bootstrap suporta.
Além disso, eu aplico essa classe chamada show.
A classe show especifica essencialmente
que este conteúdo específico deve ser mostrado quando a página é renderizada pela primeira vez.
Então, ele aplicará a classe show somente ao primeiro painel de guias,
os painéis de guias restantes não terão a classe show aplicada.
E a última classe que vou aplicar está ativa porque este é
o painel de guias que será exibido na página quando a página for renderizada pela primeira vez.
Além disso, para que a navegação funcione,
eu preciso dar a este e ID,
e desde que eu usei hashtag Peter para o conteúdo de navegação guia,
então eu vou aplicar o ID como Peter aqui.
E assim, quando isso é referido em um link lá com hashtag Peter,
este é o painel correspondente que eu estou me referindo.
Agora, o que eu vou fazer é eu vou copiar este div de lá.
E então eu vou aplicar esta div para a informação do segundo líder corporativo,
exceto que para este eu só deveria aplicar o painel de abas e encaixar.
O show e ativo não devem ser aplicados para os três restantes.
E a identificação aqui deve ser Danny para o segundo.
Vou simplesmente copiar este código,
e depois colá-lo para o terceiro líder corporativo aqui.
E então o painel de abas e o terceiro é Agumbe.
E o último,
novamente, eu colo isso,
e então a identificação deve ser mudada para Alberto,
e fechar esta div aqui.
Então, esta div para o último deve ser fechada nesse ponto.
E isso deve cuidar dos quatro painéis que eu preciso.
Entrando e recuando esse conteúdo,
para que eu esteja satisfeito,
minha obsessão está satisfeita lá.
Ok, isso completa a organização do conteúdo da aba.
Agora, vamos salvar a mudança e dar
uma olhada rápida no que a página web parece agora.
Indo para a nossa página web,
agora você vê que nossa página da web está exibindo apenas o conteúdo correspondente ao CEO.
Se você mudar para qualquer um dos outros,
você verá que as informações correspondentes são exibidas.
E observe como essa informação desaparece quando você seleciona esse usuário específico.
Mas, claro, se você está feliz com isso,
então tudo bem, podemos parar neste ponto.
Mas eu gostaria de definir uma guia real em torno disso.
Então, este é o lugar onde eu vou aplicar alguns atributos CSS,
propriedades para esta guia particular aqui, de
modo que é bom,
estrutura de tabulação limpa sendo definido lá.
Então, vamos criar algumas propriedades CSS para isso.
O último passo, alternando para styles.css.
Após o inverso da barra de navegação,
eu vou introduzir as classes CSS para o conteúdo da guia,
então eu especificar para o tab-content,
border-left: 1px sólido DDD.
E eu vou aplicar o mesmo para border-direita e inferior.
Eu não preciso me inscrever no topo porque o topo é
regido pela navegação de guias já.
E então deixe-me dar um preenchimento de 10 pixels ao redor,
e depois salvar as alterações.
Vamos dar uma olhada em nossa página da web depois disso.
Voltando para a nossa página,
agora você vê uma
estrutura agradável e limpa semelhante a guias sendo criada.
Para que, quando você navega até cada um deles,
essa informação correspondente seja exibida adequadamente em sua própria guia.
Isso conclui este exercício onde analisamos
o uso da navegação com guias para a nossa página web.
E então vimos como podemos criar navegação de tabulação e incluir outro conteúdo.
Este também é um bom momento para você fazer um comentário Git com as guias de mensagem.