1
00:00:03,460 --> 00:00:11,430
Les accordéons sont l'un de ces instruments ennuyeux que certains d'entre vous ont peut-être déjà vu.

2
00:00:11,430 --> 00:00:16,020
Il a un de ces soufflets avec un clavier en bas

3
00:00:16,020 --> 00:00:20,940
ici et puis vous soufflez et puis jouez la musique avec les touches là-bas.

4
00:00:20,940 --> 00:00:23,645
Et tout le monde n'aime pas ça.

5
00:00:23,645 --> 00:00:28,740
Je suis presque sûr. Mais pas offenser les joueurs d'accordéon.

6
00:00:28,740 --> 00:00:34,650
Les accordéons en bootstrap sont très intéressants à coup sûr.

7
00:00:34,650 --> 00:00:39,380
Nous examinerons la façon dont nous appliquons les accordéons pour pouvoir révéler et

8
00:00:39,380 --> 00:00:44,580
masquer le contenu de notre page Web dans cet exercice.

9
00:00:44,580 --> 00:00:51,300
Revenir à la page À propos de nous à la page HTML où nous avions l'information sur le leadership de l'entreprise.

10
00:00:51,300 --> 00:00:56,960
Maintenant, je vais remplacer la navigation supérieure par une navigation basée sur l'accordéon.

11
00:00:56,960 --> 00:01:03,175
Je vais supprimer cet UL qui définit complètement le terme navigation.

12
00:01:03,175 --> 00:01:08,320
Et puis nous allons concevoir l'accordéon autour du contenu que nous avons déjà.

13
00:01:08,320 --> 00:01:13,700
Donc, supprimons cet UL qui contient la navigation par onglet afin qu'ils soient laissés

14
00:01:13,700 --> 00:01:20,160
avec juste cette partie qui est enfermée à l'intérieur du panneau supérieur et le contenu supérieur.

15
00:01:20,160 --> 00:01:22,115
Donc, nous allons aller modifier ça.

16
00:01:22,115 --> 00:01:23,740
Aller à cette div ici,

17
00:01:23,740 --> 00:01:33,225
je vais supprimer cette classe de là et ensuite j'applique l'id comme accordéon.

18
00:01:33,225 --> 00:01:40,060
Nous avons besoin de cet identifiant plus tard pour pouvoir créer l'accordéon que div,

19
00:01:40,060 --> 00:01:43,175
qui contient ce contenu est toujours en place là.

20
00:01:43,175 --> 00:01:46,545
Donc, le contenu supérieur est maintenant changé en accordéon.

21
00:01:46,545 --> 00:01:49,745
Maintenant, chacun de ce contenu ici,

22
00:01:49,745 --> 00:01:53,460
nous allons le convertir en une

23
00:01:53,460 --> 00:01:59,080
structure basée sur la carte là-bas afin qu'ils puissent révéler le contenu de

24
00:01:59,080 --> 00:02:02,360
chacune de ces cartes afin que vous me verrez utiliser la carte et les

25
00:02:02,360 --> 00:02:09,220
classes de corps de la carte là pour enfermer ce contenu.

26
00:02:09,220 --> 00:02:12,595
Maintenant, en entrant dans le contenu réel ici,

27
00:02:12,595 --> 00:02:16,905
je vais commencer à appliquer la classe de carte ici avec la div là-bas.

28
00:02:16,905 --> 00:02:21,900
Donc, nous allons dire, « carte de classe div »,

29
00:02:21,900 --> 00:02:29,890
puis fermer la div là et puis ce contenu va dans la div là-bas.

30
00:02:29,890 --> 00:02:34,110
Maintenant, ici, nous allons entrer et créer

31
00:02:34,110 --> 00:02:41,610
un div avec la classe « en-tête de carte ».

32
00:02:42,030 --> 00:02:45,280
Je vais vous montrer pour l'un d'eux et ensuite nous allons

33
00:02:45,280 --> 00:02:48,425
répéter ce processus pour les trois autres aussi.

34
00:02:48,425 --> 00:02:57,480
Donc, nous allons dire, « onglet rouleau d'en-tête de carte » et ensuite « ID Peterhead ».

35
00:02:57,480 --> 00:03:04,335
Je vais prendre ce h3 d'en bas ici, le

36
00:03:04,335 --> 00:03:10,265
découper et ensuite le coller dans le panneau de carte.

37
00:03:10,265 --> 00:03:14,815
Donc, ce h3 qui définit le nom de la

38
00:03:14,815 --> 00:03:18,945
personne dirigeante de l'entreprise est coupé

39
00:03:18,945 --> 00:03:24,310
à l'intérieur du panneau de tabulation, puis déplacé dans l'en-tête de la carte ici.

40
00:03:24,310 --> 00:03:29,060
Ça va servir d'aide à la navigation.

41
00:03:29,060 --> 00:03:35,425
Maintenant, à ce h3, je vais appliquer une classe appelée mb-0.

42
00:03:35,425 --> 00:03:37,920
Donc, c'est mb-0 ici.

43
00:03:37,920 --> 00:03:41,260
Maintenant, ce nom lui-même,

44
00:03:41,260 --> 00:03:44,840
je vais joindre ceci à l'intérieur et un a,

45
00:03:44,840 --> 00:03:49,300
donc je vais passer à la ligne suivante et dire,

46
00:03:49,300 --> 00:03:56,650
« un basculement de données » et

47
00:03:56,650 --> 00:04:00,845
le basculement de données dira, « effondrement ».

48
00:04:00,845 --> 00:04:06,025
Donc, maintenant, vous voyez que vous utilisez le plugin collapsus.

49
00:04:06,025 --> 00:04:09,440
Donc, nous avons cette fermeture h3 là.

50
00:04:09,440 --> 00:04:12,630
Donc, je vais passer à la ligne suivante

51
00:04:12,630 --> 00:04:17,400
ici et ensuite je vais fermer l'étiquette a juste là.

52
00:04:17,400 --> 00:04:25,265
Donc, avec cela, le tag a renferme maintenant le nom du PDG ici.

53
00:04:25,265 --> 00:04:31,285
Et puis la balise h3 ferme bien sûr le h3 sur le dessus et puis c'est

54
00:04:31,285 --> 00:04:37,525
à l'intérieur du div qui est l'en-tête de la carte de classe.

55
00:04:37,525 --> 00:04:43,950
Donc, cela forme la structure d'en-tête pour mon div accordéon.

56
00:04:43,950 --> 00:04:46,915
En allant maintenant dans le panneau d'onglets ci-dessous,

57
00:04:46,915 --> 00:04:54,050
je vais changer cette classe de fondu du panneau d'onglets à réduire.

58
00:04:54,050 --> 00:05:01,455
Donc, ce serait un plugin d'effondrement qui sera utile pour notre accordéon

59
00:05:01,455 --> 00:05:05,680
et aussi je vais supprimer cette classe active

60
00:05:05,680 --> 00:05:10,075
pour cela et l'id sera laissé comme peter pour cela.

61
00:05:10,075 --> 00:05:18,375
Et puis vous direz, « parent de données » et vous spécifieriez accordéon.

62
00:05:18,375 --> 00:05:24,960
Vous voyez pourquoi nous avons donné l'identifiant de l'accordéon à la div qui entoure tous ces contenus.

63
00:05:24,960 --> 00:05:28,010
Donc, c'est la façon de spécifier que cela fera

64
00:05:28,010 --> 00:05:31,720
partie de l'accordéon que vous construisez là-bas.

65
00:05:31,720 --> 00:05:34,420
Donc, c'est pourquoi l'accordéon parent de données.

66
00:05:34,420 --> 00:05:37,930
Maintenant, le contenu à l'intérieur de cet onglet,

67
00:05:37,930 --> 00:05:42,340
je vais l'enfermer à l'intérieur de la div avec

68
00:05:42,340 --> 00:05:48,460
le corps de la carte de classe

69
00:05:48,920 --> 00:05:54,125
et fermer cette div ici,

70
00:05:54,125 --> 00:05:57,790
puis indenter ce contenu là-dedans.

71
00:05:57,790 --> 00:06:03,440
Sauvegardons les modifications, puis allons jeter un oeil à notre page web sur ce moment. En

72
00:06:03,440 --> 00:06:08,735
allant sur notre page Web, vous remarquez maintenant que dans la direction de l'entreprise,

73
00:06:08,735 --> 00:06:16,550
le nom du PDG est mis en évidence ici dans l'en-tête de la carte ici.

74
00:06:16,550 --> 00:06:19,150
Et puis le contenu est en bas ici.

75
00:06:19,150 --> 00:06:25,830
Maintenant, nous allons créer les trois restants ci-dessous, puis les inclure tous dedans.

76
00:06:25,830 --> 00:06:30,485
Je vais répéter la même structure pour les autres.

77
00:06:30,485 --> 00:06:34,405
Donc, j'aurai la carte avec l'en-tête de la carte,

78
00:06:34,405 --> 00:06:39,075
et l'en-tête de la carte va inclure le nom de la personne comme ceci.

79
00:06:39,075 --> 00:06:40,730
Donc, vous suivrez à peu près

80
00:06:40,730 --> 00:06:45,060
la même structure pour les trois éléments de contenu restants.

81
00:06:45,060 --> 00:06:49,190
Alors, faisons les changements et puis nous reviendrons et examinerons le code.

82
00:06:49,190 --> 00:06:51,185
En revenant au code,

83
00:06:51,185 --> 00:06:54,405
vous voyez maintenant que pour les trois autres,

84
00:06:54,405 --> 00:06:57,880
vous remarquez que j'utilise toujours la carte ici

85
00:06:57,880 --> 00:07:01,535
avec l'en-tête de la carte ici et h3 avec le mb-0.

86
00:07:01,535 --> 00:07:07,590
Ceci est à l'intérieur de la classe d'en-tête de carte div là-bas, puis en dessous de

87
00:07:07,590 --> 00:07:10,790
la classe seulement comme effondrement, puis avec l'id

88
00:07:10,790 --> 00:07:14,445
, puis le corps de la carte qui entoure le P là.

89
00:07:14,445 --> 00:07:18,745
Même chose avec les deux autres aussi.

90
00:07:18,745 --> 00:07:20,700
Donc, avec ce changement,

91
00:07:20,700 --> 00:07:26,030
ces trois autres informations sur les dirigeants d'entreprise seront

92
00:07:26,030 --> 00:07:29,675
effondrées, mais l'information fouettée de Peter Pan

93
00:07:29,675 --> 00:07:33,445
sera révélée lors du premier rendu de la page Web.

94
00:07:33,445 --> 00:07:36,050
Donc, avec ce changement, maintenant,

95
00:07:36,050 --> 00:07:39,710
cet extrait de code est évidemment disponible dans

96
00:07:39,710 --> 00:07:44,090
les instructions qui suivent ici donc pas besoin de trop vous inquiéter.

97
00:07:44,090 --> 00:07:49,865
Vous pouvez toujours vous référer à cela pour vous assurer que vous l'avez fait correctement.

98
00:07:49,865 --> 00:07:52,495
Donc, sauvegardons les modifications.

99
00:07:52,495 --> 00:07:54,740
En revenant à notre page web,

100
00:07:54,740 --> 00:07:57,430
vous voyez maintenant l'accordéon construit ici.

101
00:07:57,430 --> 00:08:03,125
Donc, vous voyez que les premières informations sur les dirigeants d'entreprise sont affichées ici.

102
00:08:03,125 --> 00:08:06,190
Les trois autres sont effondrés en ce moment.

103
00:08:06,190 --> 00:08:11,790
Donc, c'est la raison de l'utilisation du plugin collapsus et aussi la raison pour déplacer

104
00:08:11,790 --> 00:08:18,275
le nom du leader de l'entreprise dans le titre de la carte.

105
00:08:18,275 --> 00:08:21,035
Voyez que vous avez vu qu'il sera affiché comme ça là-dedans.

106
00:08:21,035 --> 00:08:25,150
Maintenant, en cliquant sur l'un d'entre eux, vous remarquez maintenant

107
00:08:25,150 --> 00:08:29,785
que lorsque vous cliquez sur ce contenu sera révélé mais les trois autres sont masqués.

108
00:08:29,785 --> 00:08:32,315
Donc, c'est le comportement de l'accordéon ici.

109
00:08:32,315 --> 00:08:36,245
Donc, avec cela, nous terminons cet exercice.

110
00:08:36,245 --> 00:08:42,630
C' est un bon moment pour vous de faire un commit git avec le message accordéon..