1
00:00:00,242 --> 00:00:04,459
[MÚSICA]

2
00:00:04,459 --> 00:00:09,590
Vamos agora falar sobre um plugin muito útil no Bootstrap chamado como o Colapso.

3
00:00:09,590 --> 00:00:14,110
Vimos sua aplicação na barra de navegação anteriormente.

4
00:00:14,110 --> 00:00:19,050
Vamos revisitar esse código e dar uma olhada rápida nele com mais detalhes.

5
00:00:19,050 --> 00:00:21,910
Um componente relacionado é chamado como o acordeão.

6
00:00:21,910 --> 00:00:26,310
O acordeão faz uso do plugin Collapse para o seu funcionamento.

7
00:00:26,310 --> 00:00:30,100
E veremos isso em detalhes no exercício que se segue.

8
00:00:31,740 --> 00:00:36,570
O plugin Colapso fornece uma maneira fácil de revelar e

9
00:00:36,570 --> 00:00:38,487
ocultar conteúdo em sua página web.

10
00:00:40,030 --> 00:00:45,307
Essa revelação e ocultação do conteúdo geralmente é acionada

11
00:00:45,307 --> 00:00:50,186
pelo usuário clicando em um botão ou em um link em sua página da web.

12
00:00:50,186 --> 00:00:55,001
Agora você verá muitos lugares onde o tipo de

13
00:00:55,001 --> 00:01:00,006
comportamento Colapso é muito bem aproveitado para mostrar conteúdo.

14
00:01:00,006 --> 00:01:04,760
Vamos revisitar nossa barra de navegação para olhar para o plugin Colapso em ação e, em

15
00:01:04,760 --> 00:01:07,590
seguida, veremos também um exemplo de acordeão a seguir.

16
00:01:08,630 --> 00:01:14,381
Voltando para a nossa página web, você vai se lembrar que quando criamos a barra de navegação

17
00:01:14,381 --> 00:01:19,948
em nossa página web para telas extra-pequenas, a barra de navegação foi recolhida e, em

18
00:01:19,948 --> 00:01:24,346
seguida, foi revelada quando clicamos no botão aqui.

19
00:01:24,346 --> 00:01:29,670
Agora este é um exemplo do uso do plugin Collapse aqui.

20
00:01:29,670 --> 00:01:34,890
Quando olhamos para o código, vamos ver que nós realmente aplicar o plugin Colapso para

21
00:01:34,890 --> 00:01:38,440
a div que contém esta barra de navegação.

22
00:01:39,530 --> 00:01:41,534
Olhando para o código da

23
00:01:41,534 --> 00:01:46,320
nossa barra de navegação que projetamos anteriormente, você viu que aqui,

24
00:01:46,320 --> 00:01:51,012
dentro do contêiner, criamos este botão que é exibido para

25
00:01:51,012 --> 00:01:56,850
os tamanhos de tela extra-pequena usando a classe navbar-toggler.

26
00:01:56,850 --> 00:01:59,440
Olhe para a div que segue este botão aqui.

27
00:01:59,440 --> 00:02:02,600
Para a div que segue este botão, usamos a classe collapse.

28
00:02:02,600 --> 00:02:06,495
Então este é o uso do plugin Colapso em nossa barra de navegação.

29
00:02:06,495 --> 00:02:10,627
Então o que isso cria é que esse conteúdo em particular,

30
00:02:10,627 --> 00:02:15,095
nossa barra de navegação que está fechada dentro desta div, será

31
00:02:15,095 --> 00:02:17,065
recolhido para os tamanhos de tela extra-pequena.

32
00:02:17,065 --> 00:02:22,080
E, em seguida, juntamente com o plugin Colapso, este botão que aparece

33
00:02:22,080 --> 00:02:26,589
lá irá desencadear a exibição e ocultação desta barra de navegação aqui.

34
00:02:26,589 --> 00:02:32,582
É por isso que quando você olha para o botão, você vai ver que bem ali,

35
00:02:32,582 --> 00:02:38,171
nós fornecemos o atributo data-toggle com o colapso aqui,

36
00:02:38,171 --> 00:02:42,350
e então o data-target como #Navbar aqui.

37
00:02:42,350 --> 00:02:47,960
E observe que o id para esta div que aplicamos aqui é Navbar.

38
00:02:47,960 --> 00:02:53,030
Então, estamos especificando essencialmente que este botão vai atuar como o

39
00:02:53,030 --> 00:02:59,460
mecanismo de disparo para este plugin Colapso para trabalhar nesta div aqui.

40
00:02:59,460 --> 00:03:03,387
Portanto, este é um uso do plugin Colapso em sua página web.

41
00:03:04,590 --> 00:03:10,840
Além disso, vamos olhar para o outro componente, que é o acordeão em Bootstrap.

42
00:03:10,840 --> 00:03:12,410
Como um acordeão se comporta?

43
00:03:12,410 --> 00:03:16,110
Então este é um exemplo de um acordeão que vamos construir no exercício

44
00:03:16,110 --> 00:03:16,928
que se segue.

45
00:03:16,928 --> 00:03:21,520
Então aqui, você verá que eu substituí a navegação com guias que

46
00:03:21,520 --> 00:03:25,846
fizemos no exercício anterior usando um acordeão aqui.

47
00:03:25,846 --> 00:03:30,480
A maneira como o acordeão funciona é que um pedaço de conteúdo é revelado e

48
00:03:30,480 --> 00:03:32,020
os três restantes estão escondidos.

49
00:03:32,020 --> 00:03:35,640
Portanto, este usa o plugin Colapso para este propósito.

50
00:03:35,640 --> 00:03:41,920
Então, quando você clica em qualquer um desses outros líderes corporativos,

51
00:03:41,920 --> 00:03:45,490
então os detalhes desse líder corporativo são revelados e

52
00:03:45,490 --> 00:03:47,280
os três restantes ficam escondidos.

53
00:03:47,280 --> 00:03:50,270
Então este é o comportamento do acordeão aqui.

54
00:03:50,270 --> 00:03:52,700
Se você está familiarizado com um acordeão,

55
00:03:52,700 --> 00:03:57,000
o instrumento musical, você sabe como funciona o fole do acordeão.

56
00:03:57,000 --> 00:04:02,530
Então, isso é, em algum sentido, se comportando como o fole do acordeão.

57
00:04:02,530 --> 00:04:08,996
Então essa é a razão pela qual este componente é referido como um acordeão no Bootstrap.

58
00:04:08,996 --> 00:04:17,280
Mais um exemplo do plugin Collapse em uso está em seu próprio site do curso.

59
00:04:17,280 --> 00:04:19,350
Então, se você vai para o site do seu curso, e

60
00:04:19,350 --> 00:04:23,360
então você entrar no conteúdo do seu site do curso e

61
00:04:23,360 --> 00:04:28,730
começar a visualizar o conteúdo aqui, você vai notar que no lado esquerdo,

62
00:04:28,730 --> 00:04:32,940
você tem uma navegação que aparece na imagem do lado esquerdo.

63
00:04:32,940 --> 00:04:35,390
Então esta é a navegação lá.

64
00:04:35,390 --> 00:04:40,510
Então, quando você clica em cada um deles, você percebe como o conteúdo aqui

65
00:04:40,510 --> 00:04:45,980
está escondido e revelado clicando em cada um desses links lá.

66
00:04:45,980 --> 00:04:51,246
Então isso é como o plugin Colapso que vimos no Bootstrap.

67
00:04:51,246 --> 00:04:57,780
Embora, é claro, a página Coursera realmente não use Bootstrap.

68
00:04:57,780 --> 00:05:02,306
Passaremos para o próximo exercício, onde veremos como construímos

69
00:05:02,306 --> 00:05:07,010
o Acordeão para mostrar nossas informações de liderança corporativa.

70
00:05:07,010 --> 00:05:13,120
[ MUSIC]