1
00:00:00,000 --> 00:00:04,432
[MUSIC]

2
00:00:04,432 --> 00:00:09,439
Essayons maintenant de comprendre plusieurs mécanismes pour nous permettre

3
00:00:09,439 --> 00:00:16,100
d'afficher des informations aux utilisateurs superposant le contenu de votre page web.

4
00:00:16,100 --> 00:00:21,040
Donc, ici, nous allons examiner trois constructions différentes qui sont disponibles dans Bootstrap

5
00:00:21,040 --> 00:00:24,230
appelées info-bulles, popovers et modaux.

6
00:00:25,570 --> 00:00:30,760
Alors, que sont les info-bulles, les popovers et les modaux et comment sont-ils utiles ?

7
00:00:30,760 --> 00:00:36,090
Nous allons d'abord examiner quelques idées de base, puis nous allons regarder quelques exemples.

8
00:00:36,090 --> 00:00:39,844
Dans l'exercice qui suit, nous utiliserons des info-bulles et

9
00:00:39,844 --> 00:00:45,130
des modaux dans notre page Web, et nous examinerons un exemple de popovers.

10
00:00:45,130 --> 00:00:51,610
Ainsi, comme je l'ai mentionné, les info-bulles, les popovers et les modaux sont un moyen de révéler

11
00:00:51,610 --> 00:00:56,090
du contenu aux utilisateurs, lorsque l'utilisateur interagit avec certains éléments de votre page Web.

12
00:00:56,090 --> 00:01:01,280
Par exemple, lorsque la souris de l'utilisateur

13
00:01:01,280 --> 00:01:06,640
clique sur un bouton, survole un bouton, clique sur un lien

14
00:01:06,640 --> 00:01:11,830
ou atteint un certain point sur votre page Web.

15
00:01:11,830 --> 00:01:16,170
Donc, tous ces éléments déclencheront des informations à afficher pour les utilisateurs.

16
00:01:16,170 --> 00:01:17,470
Donc, dans ce cas,

17
00:01:17,470 --> 00:01:22,970
les informations sont affichées sous la forme d'une superposition au-dessus de votre page Web.

18
00:01:22,970 --> 00:01:25,700
Donc, le contenu sous-jacent de la page Web est toujours là, mais

19
00:01:25,700 --> 00:01:30,280
cela est mis en place au-dessus du contenu sous-jacent.

20
00:01:30,280 --> 00:01:35,750
Donc, en termes de flexibilité, les info-bulles sont les plus simples à mettre en œuvre, mais

21
00:01:35,750 --> 00:01:40,160
ont en même temps une flexibilité limitée dans la façon dont elles peuvent afficher les informations. Les

22
00:01:40,160 --> 00:01:46,610
popovers sont plus flexibles que les info-bulles, mais ils ont aussi leurs propres limites.

23
00:01:46,610 --> 00:01:50,110
Les modaux vous offrent la prise en charge la plus complète pour

24
00:01:50,110 --> 00:01:54,980
l'affichage du contenu de différentes manières.

25
00:01:56,250 --> 00:02:02,600
À titre d'exemple, allons à notre page Web sur laquelle nous avons travaillé.

26
00:02:02,600 --> 00:02:09,970
Vous voyez cela lorsque nous passons le pointeur de la souris sur ce bouton.

27
00:02:09,970 --> 00:02:14,560
Vous voyez ce message apparaître à l'écran ici,

28
00:02:14,560 --> 00:02:16,930
avec quelques informations supplémentaires.

29
00:02:16,930 --> 00:02:18,975
Ceci est un exemple d'infobulle.

30
00:02:20,290 --> 00:02:24,210
Cela vous permet d'afficher des quantités plus petites d'informations pour les utilisateurs.

31
00:02:24,210 --> 00:02:29,340
Donc, par exemple, si vous essayez de guider les utilisateurs à travers votre site Web et

32
00:02:29,340 --> 00:02:33,740
que vous voulez qu'ils sachent ce qui se passe lorsque vous cliquez sur différents emplacements n'importe quelle page Web,

33
00:02:33,740 --> 00:02:38,240
ceux-ci peuvent être une bonne façon de leur rappeler ce qui est attendu.

34
00:02:38,240 --> 00:02:40,870
Ainsi, vous pouvez facilement concevoir, par exemple, des

35
00:02:40,870 --> 00:02:46,250
pas à pas de votre site Web à l'aide de ces info-bulles pour indiquer aux utilisateurs.

36
00:02:46,250 --> 00:02:49,130
Si vous voulez des informations un peu plus détaillées,

37
00:02:49,130 --> 00:02:51,300
alors popovers serait plus utile.

38
00:02:52,305 --> 00:02:56,920
Le même exemple, implémenter et utiliser un popover ressemblerait à ceci.

39
00:02:56,920 --> 00:02:58,040
Maintenant, dans ce cas,

40
00:02:58,040 --> 00:03:02,040
vous devrez cliquer explicitement sur le bouton pour afficher le popover.

41
00:03:02,040 --> 00:03:06,670
Donc, dans ce cas, le popover est affiché avec des informations de titre,

42
00:03:06,670 --> 00:03:12,210
puis le contenu réel en bas de ce popover.

43
00:03:12,210 --> 00:03:17,200
Maintenant, rejeter le popover vous demandera de nouveau de cliquer sur le bas là.

44
00:03:17,200 --> 00:03:19,640
C' est donc le comportement d'un popover.

45
00:03:19,640 --> 00:03:26,420
Dans certaines circonstances, les popovers sont plus utiles que les infobulles.

46
00:03:26,420 --> 00:03:29,990
Notre troisième type de superposition de données est le modal.

47
00:03:29,990 --> 00:03:33,140
Un modal vous permet de présenter

48
00:03:33,140 --> 00:03:37,410
des informations plus détaillées aux utilisateurs qu'une info-bulle et une popover.

49
00:03:37,410 --> 00:03:44,060
Le contenu du modal est lui-même divisé en un en-tête, un corps et le pied de page.

50
00:03:44,060 --> 00:03:49,700
Et le modal lui-même peut contenir beaucoup plus d'informations détaillées.

51
00:03:49,700 --> 00:03:52,740
Et vous pouvez utiliser toute la grille Bootstrap,

52
00:03:52,740 --> 00:03:57,630
à l'intérieur du corps modal, pour organiser le contenu réel.

53
00:03:57,630 --> 00:04:02,860
Nous examinons ensuite quelques exemples de l'utilisation des modaux.

54
00:04:02,860 --> 00:04:06,220
Aller à notre page web, vous verrez que sur le côté droit,

55
00:04:06,220 --> 00:04:09,400
ici nous avons un lien ici appelé Login.

56
00:04:09,400 --> 00:04:13,890
Donc, lorsque vous cliquez sur ce lien, vous remarquerez que ce modal

57
00:04:13,890 --> 00:04:17,600
avec leur formulaire de connexion est affiché à l'écran.

58
00:04:17,600 --> 00:04:21,060
C' est donc le comportement typique d'un modal.

59
00:04:21,060 --> 00:04:23,420
Ici, vous pouvez taper les informations,

60
00:04:23,420 --> 00:04:28,070
puis cliquer sur le bouton Se connecter pour vous connecter à votre site Web.

61
00:04:29,190 --> 00:04:34,890
Aller à votre page Coursera, voici un exemple réel de l'utilisation d'un modal.

62
00:04:34,890 --> 00:04:38,430
Par exemple, si vous cliquez sur le bouton Se connecter ici,

63
00:04:38,430 --> 00:04:43,190
vous pouvez voir que sur Coursera, un formulaire apparaît à l'écran.

64
00:04:43,190 --> 00:04:47,720
C' est donc une autre utilisation d'un modal dans votre page Web.

65
00:04:49,060 --> 00:04:53,252
Maintenant que vous avez vu des exemples d'info-bulles, de popovers et de modaux,

66
00:04:53,252 --> 00:04:58,522
passons à l'exercice suivant, où nous allons créer une info-bulle sur notre page index.html.

67
00:04:58,522 --> 00:05:04,379
Nous allons également créer un modal qui permet à l'utilisateur de saisir des informations pour

68
00:05:04,379 --> 00:05:06,787
se connecter à notre page Web.

69
00:05:06,787 --> 00:05:10,269
[ MUSIQUE]