1
00:00:03,460 --> 00:00:11,430
Acordeões são um daqueles instrumentos irritantes que alguns de vocês já podem ter visto.

2
00:00:11,430 --> 00:00:16,020
Tem um desses fole com um teclado

3
00:00:16,020 --> 00:00:20,940
aqui embaixo e então você sopra e depois toca a música com as teclas ali.

4
00:00:20,940 --> 00:00:23,645
E nem todo mundo gosta.

5
00:00:23,645 --> 00:00:28,740
Tenho quase certeza. Mas sem ofensa aos tocadores de acordeão.

6
00:00:28,740 --> 00:00:34,650
Acordeões em bootstrap são muito interessantes com certeza.

7
00:00:34,650 --> 00:00:39,380
Analisaremos como aplicamos acordeões para poder revelar e

8
00:00:39,380 --> 00:00:44,580
ocultar conteúdo em nossa página web neste exercício.

9
00:00:44,580 --> 00:00:51,300
Voltando para Sobre Nós na página HTML onde tínhamos as informações de liderança corporativa.

10
00:00:51,300 --> 00:00:56,960
Agora, vou substituir a navegação superior por uma navegação baseada em acordeão.

11
00:00:56,960 --> 00:01:03,175
Vou remover esta UL que define completamente o termo navegação.

12
00:01:03,175 --> 00:01:08,320
E então vamos projetar o acordeão em torno do conteúdo que já temos.

13
00:01:08,320 --> 00:01:13,700
Então, vamos excluir esta UL que contém a navegação de guias para que eles sejam deixados

14
00:01:13,700 --> 00:01:20,160
apenas com esta parte que está dentro do painel superior e o conteúdo superior.

15
00:01:20,160 --> 00:01:22,115
Então, vamos modificar isso.

16
00:01:22,115 --> 00:01:23,740
Indo para este div aqui,

17
00:01:23,740 --> 00:01:33,225
eu vou remover esta classe de lá e então eu aplico o id como acordeão.

18
00:01:33,225 --> 00:01:40,060
Precisamos deste id mais tarde para ser capaz de criar o acordeão que div,

19
00:01:40,060 --> 00:01:43,175
que contém este conteúdo ainda está no lugar lá.

20
00:01:43,175 --> 00:01:46,545
Então, o conteúdo superior agora é alterado para acordeão.

21
00:01:46,545 --> 00:01:49,745
Agora, cada um deste conteúdo aqui,

22
00:01:49,745 --> 00:01:53,460
nós vamos converter isso em uma

23
00:01:53,460 --> 00:01:59,080
estrutura baseada em cartão lá para que eles possam revelar o conteúdo em

24
00:01:59,080 --> 00:02:02,360
cada um desses cartões para que você vai me ver usando o cartão e

25
00:02:02,360 --> 00:02:09,220
as classes de corpo do cartão lá para incluir este conteúdo.

26
00:02:09,220 --> 00:02:12,595
Agora, indo para o conteúdo real aqui,

27
00:02:12,595 --> 00:02:16,905
eu vou começar a aplicar a classe cartão aqui com a div lá.

28
00:02:16,905 --> 00:02:21,900
Então, vamos dizer, “cartão de classe div” e,

29
00:02:21,900 --> 00:02:29,890
em seguida, fechar o div lá e, em seguida, este conteúdo vai para o div lá.

30
00:02:29,890 --> 00:02:34,110
Agora, aqui, vamos entrar e criar

31
00:02:34,110 --> 00:02:41,610
uma div com a classe “cabeçalho do cartão”.

32
00:02:42,030 --> 00:02:45,280
Vou mostrar-lhe para um deles e, em seguida, vamos

33
00:02:45,280 --> 00:02:48,425
repetir este processo para os três restantes também.

34
00:02:48,425 --> 00:02:57,480
Então, vamos dizer, “guia de cabeçalho do cartão” e, em seguida, “id peterhead”.

35
00:02:57,480 --> 00:03:04,335
Vou pegar este h3 de baixo aqui,

36
00:03:04,335 --> 00:03:10,265
cortá-lo e depois colá-lo no painel do cartão.

37
00:03:10,265 --> 00:03:14,815
Então, este h3 que define o nome

38
00:03:14,815 --> 00:03:18,945
da pessoa de liderança corporativa é cortado de

39
00:03:18,945 --> 00:03:24,310
dentro do painel de guias e, em seguida, movido para o cabeçalho do cartão aqui.

40
00:03:24,310 --> 00:03:29,060
Isso vai funcionar como meu auxiliar de navegação.

41
00:03:29,060 --> 00:03:35,425
Agora, para este h3, vou aplicar uma classe chamada mb-0.

42
00:03:35,425 --> 00:03:37,920
Então, este é mb-0 aqui.

43
00:03:37,920 --> 00:03:41,260
Agora, este nome em si,

44
00:03:41,260 --> 00:03:44,840
eu vou colocar isso dentro e um a,

45
00:03:44,840 --> 00:03:49,300
então eu vou para a próxima linha e então dizer,

46
00:03:49,300 --> 00:03:56,650
“um alternar de dados” e

47
00:03:56,650 --> 00:04:00,845
o alternador de dados dirá, “colapso”.

48
00:04:00,845 --> 00:04:06,025
Então, agora, você vê que você está usando o plugin de colapso.

49
00:04:06,025 --> 00:04:09,440
Então, temos esse fechamento H3 lá.

50
00:04:09,440 --> 00:04:12,630
Então, eu vou mudá-lo para a próxima linha

51
00:04:12,630 --> 00:04:17,400
aqui e então eu vou fechar a etiqueta a bem ali.

52
00:04:17,400 --> 00:04:25,265
Então, com isso o “A” agora encerra o nome do CEO aqui.

53
00:04:25,265 --> 00:04:31,285
E, em seguida, a tag h3 é claro fecha o h3 no topo e, em seguida, este está

54
00:04:31,285 --> 00:04:37,525
dentro do div que é o cabeçalho do cartão de classe.

55
00:04:37,525 --> 00:04:43,950
Então, isso forma a estrutura de cabeçalho para a minha div acordeão.

56
00:04:43,950 --> 00:04:46,915
Indo agora para o painel de abas abaixo,

57
00:04:46,915 --> 00:04:54,050
vou mudar essa classe de fade painel de abas para recolher.

58
00:04:54,050 --> 00:05:01,455
Então, este seria um plugin colapso que será útil para o nosso acordeão

59
00:05:01,455 --> 00:05:05,680
e também vou remover esta classe ativa

60
00:05:05,680 --> 00:05:10,075
para isso e o id será deixado como peter para isso.

61
00:05:10,075 --> 00:05:18,375
E então você vai dizer, “pai de dados” e você iria especificar acordeão.

62
00:05:18,375 --> 00:05:24,960
Você vê por que nós demos o id de acordeão para o div que encerra todo esse conteúdo.

63
00:05:24,960 --> 00:05:28,010
Então, esta é a maneira de especificar que isso vai fazer

64
00:05:28,010 --> 00:05:31,720
parte do acordeão que você está construindo lá.

65
00:05:31,720 --> 00:05:34,420
Então, é por isso que acordeão pai dados.

66
00:05:34,420 --> 00:05:37,930
Agora, o conteúdo dentro deste painel de abas,

67
00:05:37,930 --> 00:05:42,340
eu vou colocá-lo dentro da div com

68
00:05:42,340 --> 00:05:48,460
o corpo do cartão de classe

69
00:05:48,920 --> 00:05:54,125
e fechar essa div aqui,

70
00:05:54,125 --> 00:05:57,790
e então recuar este conteúdo lá dentro.

71
00:05:57,790 --> 00:06:03,440
Vamos salvar as alterações e, em seguida, ir e dar uma olhada em nossa página web neste momento.

72
00:06:03,440 --> 00:06:08,735
Indo para nossa página web você percebe que na liderança corporativa,

73
00:06:08,735 --> 00:06:16,550
o nome do CEO é destacado aqui no cabeçalho do cartão aqui.

74
00:06:16,550 --> 00:06:19,150
E então o conteúdo está aqui embaixo.

75
00:06:19,150 --> 00:06:25,830
Agora, vamos criar os três restantes abaixo e, em seguida, colocar todos eles lá.

76
00:06:25,830 --> 00:06:30,485
Vou repetir a mesma estrutura para os restantes.

77
00:06:30,485 --> 00:06:34,405
Então, eu vou ter o cartão com o cabeçalho

78
00:06:34,405 --> 00:06:39,075
do cartão, eo cabeçalho do cartão irá incluir o nome da pessoa assim.

79
00:06:39,075 --> 00:06:40,730
Então, você praticamente seguirá

80
00:06:40,730 --> 00:06:45,060
a mesma estrutura para os três pedaços restantes de conteúdo.

81
00:06:45,060 --> 00:06:49,190
Então, vamos fazer as alterações e depois voltamos e revisamos o código.

82
00:06:49,190 --> 00:06:51,185
Voltando ao código,

83
00:06:51,185 --> 00:06:54,405
agora você vê que para os três restantes,

84
00:06:54,405 --> 00:06:57,880
você percebe que eu ainda estou usando o cartão aqui

85
00:06:57,880 --> 00:07:01,535
com o cabeçalho do cartão aqui e h3 com o mb-0.

86
00:07:01,535 --> 00:07:07,590
Isto está dentro do div classe cabeçalho cartão lá e, em seguida, para baixo abaixo

87
00:07:07,590 --> 00:07:10,790
da classe apenas como colapso e, em seguida, com o id

88
00:07:10,790 --> 00:07:14,445
e, em seguida, o corpo do cartão encerrando o P lá.

89
00:07:14,445 --> 00:07:18,745
A mesma coisa com os dois restantes também.

90
00:07:18,745 --> 00:07:20,700
Então, com essa mudança,

91
00:07:20,700 --> 00:07:26,030
essas informações de três líderes corporativos restantes serão

92
00:07:26,030 --> 00:07:29,675
recolhidas, mas as informações escassas de Peter Pan

93
00:07:29,675 --> 00:07:33,445
serão reveladas quando a primeira renderizar a página da web.

94
00:07:33,445 --> 00:07:36,050
Então, com essa mudança, agora,

95
00:07:36,050 --> 00:07:39,710
este trecho de código está obviamente disponível

96
00:07:39,710 --> 00:07:44,090
nas instruções que se seguem aqui, então não há necessidade de se preocupar demais.

97
00:07:44,090 --> 00:07:49,865
Você sempre pode se referir a isso para garantir que você fez isso corretamente.

98
00:07:49,865 --> 00:07:52,495
Então, vamos salvar as alterações.

99
00:07:52,495 --> 00:07:54,740
Voltando para a nossa página web,

100
00:07:54,740 --> 00:07:57,430
agora você vê o acordeão construído aqui.

101
00:07:57,430 --> 00:08:03,125
Então, você vê que as primeiras informações de líderes corporativos são exibidas aqui.

102
00:08:03,125 --> 00:08:06,190
Os três restantes estão em colapso neste momento.

103
00:08:06,190 --> 00:08:11,790
Então, essa é a razão para o uso do plugin de colapso e também a razão para mudar

104
00:08:11,790 --> 00:08:18,275
o nome do líder corporativo para o título do cartão.

105
00:08:18,275 --> 00:08:21,035
Você viu que ele será exibido assim lá dentro.

106
00:08:21,035 --> 00:08:25,150
Agora, clicando em qualquer um deles você percebe que quando você clicar sobre

107
00:08:25,150 --> 00:08:29,785
que o conteúdo será revelado, mas os três restantes estão escondidos.

108
00:08:29,785 --> 00:08:32,315
Então, este é o comportamento do acordeão aqui.

109
00:08:32,315 --> 00:08:36,245
Então, com isso, completamos este exercício.

110
00:08:36,245 --> 00:08:42,630
Este é um bom momento para você fazer um git commit com o acordeão mensagem..