Acordeões são um daqueles instrumentos irritantes que alguns de vocês já podem ter visto.
Tem um desses fole com um teclado
aqui embaixo e então você sopra e depois toca a música com as teclas ali.
E nem todo mundo gosta.
Tenho quase certeza. Mas sem ofensa aos tocadores de acordeão.
Acordeões em bootstrap são muito interessantes com certeza.
Analisaremos como aplicamos acordeões para poder revelar e
ocultar conteúdo em nossa página web neste exercício.
Voltando para Sobre Nós na página HTML onde tínhamos as informações de liderança corporativa.
Agora, vou substituir a navegação superior por uma navegação baseada em acordeão.
Vou remover esta UL que define completamente o termo navegação.
E então vamos projetar o acordeão em torno do conteúdo que já temos.
Então, vamos excluir esta UL que contém a navegação de guias para que eles sejam deixados
apenas com esta parte que está dentro do painel superior e o conteúdo superior.
Então, vamos modificar isso.
Indo para este div aqui,
eu vou remover esta classe de lá e então eu aplico o id como acordeão.
Precisamos deste id mais tarde para ser capaz de criar o acordeão que div,
que contém este conteúdo ainda está no lugar lá.
Então, o conteúdo superior agora é alterado para acordeão.
Agora, cada um deste conteúdo aqui,
nós vamos converter isso em uma
estrutura baseada em cartão lá para que eles possam revelar o conteúdo em
cada um desses cartões para que você vai me ver usando o cartão e
as classes de corpo do cartão lá para incluir este conteúdo.
Agora, indo para o conteúdo real aqui,
eu vou começar a aplicar a classe cartão aqui com a div lá.
Então, vamos dizer, “cartão de classe div” e,
em seguida, fechar o div lá e, em seguida, este conteúdo vai para o div lá.
Agora, aqui, vamos entrar e criar
uma div com a classe “cabeçalho do cartão”.
Vou mostrar-lhe para um deles e, em seguida, vamos
repetir este processo para os três restantes também.
Então, vamos dizer, “guia de cabeçalho do cartão” e, em seguida, “id peterhead”.
Vou pegar este h3 de baixo aqui,
cortá-lo e depois colá-lo no painel do cartão.
Então, este h3 que define o nome
da pessoa de liderança corporativa é cortado de
dentro do painel de guias e, em seguida, movido para o cabeçalho do cartão aqui.
Isso vai funcionar como meu auxiliar de navegação.
Agora, para este h3, vou aplicar uma classe chamada mb-0.
Então, este é mb-0 aqui.
Agora, este nome em si,
eu vou colocar isso dentro e um a,
então eu vou para a próxima linha e então dizer,
“um alternar de dados” e
o alternador de dados dirá, “colapso”.
Então, agora, você vê que você está usando o plugin de colapso.
Então, temos esse fechamento H3 lá.
Então, eu vou mudá-lo para a próxima linha
aqui e então eu vou fechar a etiqueta a bem ali.
Então, com isso o “A” agora encerra o nome do CEO aqui.
E, em seguida, a tag h3 é claro fecha o h3 no topo e, em seguida, este está
dentro do div que é o cabeçalho do cartão de classe.
Então, isso forma a estrutura de cabeçalho para a minha div acordeão.
Indo agora para o painel de abas abaixo,
vou mudar essa classe de fade painel de abas para recolher.
Então, este seria um plugin colapso que será útil para o nosso acordeão
e também vou remover esta classe ativa
para isso e o id será deixado como peter para isso.
E então você vai dizer, “pai de dados” e você iria especificar acordeão.
Você vê por que nós demos o id de acordeão para o div que encerra todo esse conteúdo.
Então, esta é a maneira de especificar que isso vai fazer
parte do acordeão que você está construindo lá.
Então, é por isso que acordeão pai dados.
Agora, o conteúdo dentro deste painel de abas,
eu vou colocá-lo dentro da div com
o corpo do cartão de classe
e fechar essa div aqui,
e então recuar este conteúdo lá dentro.
Vamos salvar as alterações e, em seguida, ir e dar uma olhada em nossa página web neste momento.
Indo para nossa página web você percebe que na liderança corporativa,
o nome do CEO é destacado aqui no cabeçalho do cartão aqui.
E então o conteúdo está aqui embaixo.
Agora, vamos criar os três restantes abaixo e, em seguida, colocar todos eles lá.
Vou repetir a mesma estrutura para os restantes.
Então, eu vou ter o cartão com o cabeçalho
do cartão, eo cabeçalho do cartão irá incluir o nome da pessoa assim.
Então, você praticamente seguirá
a mesma estrutura para os três pedaços restantes de conteúdo.
Então, vamos fazer as alterações e depois voltamos e revisamos o código.
Voltando ao código,
agora você vê que para os três restantes,
você percebe que eu ainda estou usando o cartão aqui
com o cabeçalho do cartão aqui e h3 com o mb-0.
Isto está dentro do div classe cabeçalho cartão lá e, em seguida, para baixo abaixo
da classe apenas como colapso e, em seguida, com o id
e, em seguida, o corpo do cartão encerrando o P lá.
A mesma coisa com os dois restantes também.
Então, com essa mudança,
essas informações de três líderes corporativos restantes serão
recolhidas, mas as informações escassas de Peter Pan
serão reveladas quando a primeira renderizar a página da web.
Então, com essa mudança, agora,
este trecho de código está obviamente disponível
nas instruções que se seguem aqui, então não há necessidade de se preocupar demais.
Você sempre pode se referir a isso para garantir que você fez isso corretamente.
Então, vamos salvar as alterações.
Voltando para a nossa página web,
agora você vê o acordeão construído aqui.
Então, você vê que as primeiras informações de líderes corporativos são exibidas aqui.
Os três restantes estão em colapso neste momento.
Então, essa é a razão para o uso do plugin de colapso e também a razão para mudar
o nome do líder corporativo para o título do cartão.
Você viu que ele será exibido assim lá dentro.
Agora, clicando em qualquer um deles você percebe que quando você clicar sobre
que o conteúdo será revelado, mas os três restantes estão escondidos.
Então, este é o comportamento do acordeão aqui.
Então, com isso, completamos este exercício.
Este é um bom momento para você fazer um git commit com o acordeão mensagem..