1
00:00:00,242 --> 00:00:04,459
[MUSIC]

2
00:00:04,459 --> 00:00:09,590
Parlons maintenant d'un plugin très utile dans Bootstrap appelé le Réduire.

3
00:00:09,590 --> 00:00:14,110
Nous avons vu son application dans la barre de navigation plus tôt.

4
00:00:14,110 --> 00:00:19,050
Nous allons revoir ce code et y jeter un coup d'œil plus en détail.

5
00:00:19,050 --> 00:00:21,910
Un composant connexe est appelé l'Accordéon.

6
00:00:21,910 --> 00:00:26,310
L' Accordéon utilise le plugin Collapse pour son fonctionnement.

7
00:00:26,310 --> 00:00:30,100
Et nous verrons cela en détail dans l'exercice qui suit.

8
00:00:31,740 --> 00:00:36,570
Le plugin Réduire fournit un moyen facile de révéler et de

9
00:00:36,570 --> 00:00:38,487
masquer le contenu sur votre page Web.

10
00:00:40,030 --> 00:00:45,307
Cette révélation et masquage du contenu est généralement déclenchée

11
00:00:45,307 --> 00:00:50,186
par l'utilisateur en cliquant sur un bouton ou un lien dans votre page web.

12
00:00:50,186 --> 00:00:55,001
Maintenant, vous verrez de nombreux endroits où le type de

13
00:00:55,001 --> 00:01:00,006
comportement Réduire est très bien exploité pour afficher le contenu.

14
00:01:00,006 --> 00:01:04,760
Nous allons revoir notre barre de navigation pour regarder le plugin Réduire en action,

15
00:01:04,760 --> 00:01:07,590
puis nous verrons également un exemple d'Accordéon ensuite.

16
00:01:08,630 --> 00:01:14,381
Pour revenir à notre page web, vous vous souviendrez que lorsque nous avons créé la barre de navigation

17
00:01:14,381 --> 00:01:19,948
dans notre page Web pour les écrans extra-petits, la barre de navigation a été réduite et

18
00:01:19,948 --> 00:01:24,346
puis elle a été révélée lorsque nous avons cliqué sur le bouton ici.

19
00:01:24,346 --> 00:01:29,670
Maintenant, c'est un exemple de l'utilisation du plugin Réduire ici.

20
00:01:29,670 --> 00:01:34,890
Lorsque nous regardons le code, nous verrons que nous appliquons réellement le plugin Réduire à

21
00:01:34,890 --> 00:01:38,440
la div qui contient cette barre de navigation. En

22
00:01:39,530 --> 00:01:41,534
regardant le code de

23
00:01:41,534 --> 00:01:46,320
notre barre de navigation que nous avons conçu précédemment, vous avez vu qu'ici,

24
00:01:46,320 --> 00:01:51,012
à l'intérieur du conteneur, nous avons créé ce bouton qui est affiché pour

25
00:01:51,012 --> 00:01:56,850
les tailles d'écran extra-petites en utilisant la classe navbar-toggler.

26
00:01:56,850 --> 00:01:59,440
Regardez la div qui suit ce bouton ici.

27
00:01:59,440 --> 00:02:02,600
Pour le div qui suit ce bouton, nous avons utilisé la classe d'effondrement.

28
00:02:02,600 --> 00:02:06,495
C' est donc l'utilisation du plugin Collapse dans notre barre de navigation.

29
00:02:06,495 --> 00:02:10,627
Donc, ce que cela crée est que ce contenu particulier,

30
00:02:10,627 --> 00:02:15,095
notre barre de navigation qui est enfermé dans ce div, sera réduit pour

31
00:02:15,095 --> 00:02:17,065
les tailles d'écran extra-petites.

32
00:02:17,065 --> 00:02:22,080
Et puis, avec le plugin Réduire, ce bouton qui apparaît

33
00:02:22,080 --> 00:02:26,589
là déclenchera l'affichage et le masquage de cette barre de navigation ici.

34
00:02:26,589 --> 00:02:32,582
C' est pourquoi lorsque vous regardez le bouton, vous verrez que juste là,

35
00:02:32,582 --> 00:02:38,171
nous fournissons l'attribut data-toggle avec l'effondrement ici,

36
00:02:38,171 --> 00:02:42,350
puis la data target comme #Navbar ici.

37
00:02:42,350 --> 00:02:47,960
Et notez que l'identifiant de ce div que nous avons appliqué ici est Navbar.

38
00:02:47,960 --> 00:02:53,030
Donc, nous spécifions essentiellement que ce bouton va agir comme le

39
00:02:53,030 --> 00:02:59,460
mécanisme de déclenchement pour ce plugin Collapse pour travailler sur cette div ici.

40
00:02:59,460 --> 00:03:03,387
Il s'agit donc d'une utilisation du plugin Réduire dans votre page Web.

41
00:03:04,590 --> 00:03:10,840
En outre, nous allons regarder l'autre composant, qui est l'Accordéon dans Bootstrap.

42
00:03:10,840 --> 00:03:12,410
Comment se comporte un accordéon ?

43
00:03:12,410 --> 00:03:16,110
C' est donc un exemple d'accordéon que nous allons construire dans l'exercice

44
00:03:16,110 --> 00:03:16,928
qui suit.

45
00:03:16,928 --> 00:03:21,520
Donc ici, vous verrez que j'ai remplacé la navigation à onglets que nous

46
00:03:21,520 --> 00:03:25,846
avons faite dans l'exercice précédent en utilisant un accordéon ici.

47
00:03:25,846 --> 00:03:30,480
La façon dont fonctionne l'Accordéon est qu'une partie du contenu est révélée et que

48
00:03:30,480 --> 00:03:32,020
les trois autres sont cachés.

49
00:03:32,020 --> 00:03:35,640
Donc, cela utilise le plugin Collapse à cette fin.

50
00:03:35,640 --> 00:03:41,920
Donc, lorsque vous cliquez sur le nom de l'un de ces autres dirigeants d'entreprise,

51
00:03:41,920 --> 00:03:45,490
alors les détails de ce chef d'entreprise sont révélés et

52
00:03:45,490 --> 00:03:47,280
les trois autres sont cachés.

53
00:03:47,280 --> 00:03:50,270
Donc c'est le comportement de l'accordéon ici.

54
00:03:50,270 --> 00:03:52,700
Si vous êtes familier avec un accordéon,

55
00:03:52,700 --> 00:03:57,000
l'instrument de musique, vous savez comment fonctionnent le soufflet de l'accordéon.

56
00:03:57,000 --> 00:04:02,530
Donc, c'est, dans un certain sens, se comporter comme le soufflet de l'accordéon.

57
00:04:02,530 --> 00:04:08,996
C' est la raison pour laquelle ce composant est appelé accordéon dans Bootstrap.

58
00:04:08,996 --> 00:04:17,280
Un autre exemple du plugin Collapse en cours d'utilisation est sur votre propre site de cours.

59
00:04:17,280 --> 00:04:19,350
Donc, si vous allez sur le site Web de votre cours,

60
00:04:19,350 --> 00:04:23,360
puis vous allez dans le contenu de votre site Web de cours et

61
00:04:23,360 --> 00:04:28,730
commencez à afficher le contenu ici, vous remarquerez que sur le côté gauche,

62
00:04:28,730 --> 00:04:32,940
vous avez une navigation qui entre dans l'image sur le côté gauche.

63
00:04:32,940 --> 00:04:35,390
Donc c'est la navigation là-bas.

64
00:04:35,390 --> 00:04:40,510
Ainsi, lorsque vous cliquez sur chacun d'eux, vous remarquez comment le contenu ici

65
00:04:40,510 --> 00:04:45,980
est caché et révélé en cliquant sur chacun de ces liens là.

66
00:04:45,980 --> 00:04:51,246
Donc, c'est comme le plugin Collapse que nous avons vu dans Bootstrap.

67
00:04:51,246 --> 00:04:57,780
Bien que, bien sûr, la page Coursera n'utilise pas Bootstrap.

68
00:04:57,780 --> 00:05:02,306
Nous passerons à l'exercice suivant où nous verrons comment nous construisons

69
00:05:02,306 --> 00:05:07,010
l'Accordéon pour montrer l'information sur le leadership de notre entreprise.

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