[MÚSICA]
Vamos agora falar sobre um plugin muito útil no Bootstrap chamado como o Colapso.
Vimos sua aplicação na barra de navegação anteriormente.
Vamos revisitar esse código e dar uma olhada rápida nele com mais detalhes.
Um componente relacionado é chamado como o acordeão.
O acordeão faz uso do plugin Collapse para o seu funcionamento.
E veremos isso em detalhes no exercício que se segue.
O plugin Colapso fornece uma maneira fácil de revelar e
ocultar conteúdo em sua página web.
Essa revelação e ocultação do conteúdo geralmente é acionada
pelo usuário clicando em um botão ou em um link em sua página da web.
Agora você verá muitos lugares onde o tipo de
comportamento Colapso é muito bem aproveitado para mostrar conteúdo.
Vamos revisitar nossa barra de navegação para olhar para o plugin Colapso em ação e, em
seguida, veremos também um exemplo de acordeão a seguir.
Voltando para a nossa página web, você vai se lembrar que quando criamos a barra de navegação
em nossa página web para telas extra-pequenas, a barra de navegação foi recolhida e, em
seguida, foi revelada quando clicamos no botão aqui.
Agora este é um exemplo do uso do plugin Collapse aqui.
Quando olhamos para o código, vamos ver que nós realmente aplicar o plugin Colapso para
a div que contém esta barra de navegação.
Olhando para o código da
nossa barra de navegação que projetamos anteriormente, você viu que aqui,
dentro do contêiner, criamos este botão que é exibido para
os tamanhos de tela extra-pequena usando a classe navbar-toggler.
Olhe para a div que segue este botão aqui.
Para a div que segue este botão, usamos a classe collapse.
Então este é o uso do plugin Colapso em nossa barra de navegação.
Então o que isso cria é que esse conteúdo em particular,
nossa barra de navegação que está fechada dentro desta div, será
recolhido para os tamanhos de tela extra-pequena.
E, em seguida, juntamente com o plugin Colapso, este botão que aparece
lá irá desencadear a exibição e ocultação desta barra de navegação aqui.
É por isso que quando você olha para o botão, você vai ver que bem ali,
nós fornecemos o atributo data-toggle com o colapso aqui,
e então o data-target como #Navbar aqui.
E observe que o id para esta div que aplicamos aqui é Navbar.
Então, estamos especificando essencialmente que este botão vai atuar como o
mecanismo de disparo para este plugin Colapso para trabalhar nesta div aqui.
Portanto, este é um uso do plugin Colapso em sua página web.
Além disso, vamos olhar para o outro componente, que é o acordeão em Bootstrap.
Como um acordeão se comporta?
Então este é um exemplo de um acordeão que vamos construir no exercício
que se segue.
Então aqui, você verá que eu substituí a navegação com guias que
fizemos no exercício anterior usando um acordeão aqui.
A maneira como o acordeão funciona é que um pedaço de conteúdo é revelado e
os três restantes estão escondidos.
Portanto, este usa o plugin Colapso para este propósito.
Então, quando você clica em qualquer um desses outros líderes corporativos,
então os detalhes desse líder corporativo são revelados e
os três restantes ficam escondidos.
Então este é o comportamento do acordeão aqui.
Se você está familiarizado com um acordeão,
o instrumento musical, você sabe como funciona o fole do acordeão.
Então, isso é, em algum sentido, se comportando como o fole do acordeão.
Então essa é a razão pela qual este componente é referido como um acordeão no Bootstrap.
Mais um exemplo do plugin Collapse em uso está em seu próprio site do curso.
Então, se você vai para o site do seu curso, e
então você entrar no conteúdo do seu site do curso e
começar a visualizar o conteúdo aqui, você vai notar que no lado esquerdo,
você tem uma navegação que aparece na imagem do lado esquerdo.
Então esta é a navegação lá.
Então, quando você clica em cada um deles, você percebe como o conteúdo aqui
está escondido e revelado clicando em cada um desses links lá.
Então isso é como o plugin Colapso que vimos no Bootstrap.
Embora, é claro, a página Coursera realmente não use Bootstrap.
Passaremos para o próximo exercício, onde veremos como construímos
o Acordeão para mostrar nossas informações de liderança corporativa.
[ MUSIC]