1
00:00:03,580 --> 00:00:09,250
Dans la conférence précédente, nous avons vu plusieurs façons de révéler du contenu aux utilisateurs.

2
00:00:09,250 --> 00:00:11,870
Donc, ce serait une superposition au-dessus de

3
00:00:11,870 --> 00:00:15,285
votre page Web pour afficher les informations aux utilisateurs.

4
00:00:15,285 --> 00:00:17,880
Nous allons donc examiner deux de ces approches,

5
00:00:17,880 --> 00:00:21,575
Info-bulles et Modals dans cet exercice.

6
00:00:21,575 --> 00:00:25,300
Tout d'abord, nous allons ajouter une info-bulle à cette page.

7
00:00:25,300 --> 00:00:29,040
Donc, aller à index.html et dans le Jumbotron,

8
00:00:29,040 --> 00:00:33,305
nous voyons ce bouton dans le Jumbotron là-bas.

9
00:00:33,305 --> 00:00:36,000
À ce bouton, je vais ajouter une info-bulle.

10
00:00:36,000 --> 00:00:38,125
Donc, en entrant dans ce bouton,

11
00:00:38,125 --> 00:00:44,380
ce que je vais faire maintenant est simplement d'aller dans la ligne suivante

12
00:00:44,380 --> 00:00:50,420
afin qu'il soit un peu plus clair d'écrire le code là-bas et dans ce bouton,

13
00:00:50,420 --> 00:00:53,535
je vais introduire l'info-bulle ici.

14
00:00:53,535 --> 00:00:57,740
Donc, après l'avertissement de bouton, je dirais,

15
00:00:58,560 --> 00:01:04,550
data-toggle-tooltip, de sorte que vous pouvez voir que

16
00:01:04,550 --> 00:01:12,230
le composant javascript entrant en utilisation ici et ensuite data-html-true.

17
00:01:12,230 --> 00:01:17,630
Donc, si nous appliquons cet attribut HTML de données et l'envoyons à true,

18
00:01:17,630 --> 00:01:21,965
cela signifie que le contenu de l'infobulle peut être stylé en utilisant

19
00:01:21,965 --> 00:01:27,060
HTML, puis ils diront la ligne suivante,

20
00:01:27,060 --> 00:01:31,165
je donnerai l'attribut de titre.

21
00:01:31,165 --> 00:01:35,680
Donc, c'est là que le contenu de l'info-bulle sera enfermé.

22
00:01:35,680 --> 00:01:42,090
Donc nous dirons « ou appelez-nous à ».

23
00:01:45,810 --> 00:01:52,950
Donc, vous pouvez voir que j'utilise HTML pour

24
00:01:52,950 --> 00:02:02,510
formater le contenu de l'infobulle là.

25
00:02:06,070 --> 00:02:16,315
Donc, avec cela, l'info-bulle est introduite dans le bouton là-bas et aussi le dernier attribut

26
00:02:16,315 --> 00:02:26,095
que je vais donner est le placement de données que je vais donner en bas ici.

27
00:02:26,095 --> 00:02:32,700
Donc, ce qui signifie que cette info-bulle sera affiché en bas de ce bouton ici.

28
00:02:32,700 --> 00:02:36,815
Après avoir ajouté ceci dans le bouton,

29
00:02:36,815 --> 00:02:38,610
nous allons maintenant ajouter du

30
00:02:38,610 --> 00:02:45,130
code JavaScript au bas de cette page afin d'activer cette info-bulle. En

31
00:02:45,130 --> 00:02:47,505
allant au bas de la page,

32
00:02:47,505 --> 00:02:57,470
permettez-moi d'y introduire le script en ajoutant les balises pour le script.

33
00:02:57,470 --> 00:03:04,665
A l'intérieur de cela, nous allons définir le code JavaScript réel ici.

34
00:03:04,665 --> 00:03:07,790
Donc, nous allons dire des documents en dollars.

35
00:03:07,790 --> 00:03:13,910
Donc, ce script est en utilisant la syntaxe jQuery ici.

36
00:03:15,890 --> 00:03:20,880
Donc, cela spécifie quand le document est prêt,

37
00:03:20,880 --> 00:03:23,810
lorsque ce document HTML particulier est prêt

38
00:03:23,810 --> 00:03:28,775
pour le rendu et définir appeler cette fonction particulière ici.

39
00:03:28,775 --> 00:03:32,790
Donc, nous fournissons la fonction JavaScript à

40
00:03:32,790 --> 00:03:37,780
invoquer à ce stade donc nous allons spécifier notre fonction, puis nous dirons

41
00:03:38,570 --> 00:03:51,510
entre parenthèses data-toggle-tooltip et tooltip.

42
00:03:53,240 --> 00:04:01,315
Donc, c'est le code que nous allons introduire dans cette page ici.

43
00:04:01,315 --> 00:04:09,255
Ceci est dans la syntaxe jQuery et nous allons couvrir jQuery un peu plus dans le module suivant.

44
00:04:09,255 --> 00:04:13,995
Pour le moment, cela spécifie que partout où il existe un attribut de

45
00:04:13,995 --> 00:04:19,650
ce type pour cette balise HTML particulière,

46
00:04:19,650 --> 00:04:21,570
activez l'info-bulle.

47
00:04:21,570 --> 00:04:25,420
Donc, mais cette modification va enregistrer les modifications,

48
00:04:25,420 --> 00:04:30,510
puis aller jeter un oeil à l'apparence de l'info-bulle sur la page Web.

49
00:04:30,510 --> 00:04:32,760
Aller à la page Web,

50
00:04:32,760 --> 00:04:36,600
maintenant, lorsque nous maintenons notre pointeur de souris sur le modèle ici,

51
00:04:36,600 --> 00:04:40,755
vous pouvez voir que l'info-bulle est affiché en bas ici.

52
00:04:40,755 --> 00:04:44,950
Donc, vous pouvez remarquer que le contenu de cette info-bulle est

53
00:04:44,950 --> 00:04:50,115
exactement ce que nous avons donné comme attribut title pour ce bas là.

54
00:04:50,115 --> 00:04:54,095
C' est ainsi que nous pouvons ajouter des info-bulles à notre page.

55
00:04:54,095 --> 00:04:58,030
Les info-bulles sont un bon moyen de fournir des informations supplémentaires à

56
00:04:58,030 --> 00:05:03,370
l'utilisateur lorsque l'utilisateur navigue à différents emplacements sur la page.

57
00:05:03,370 --> 00:05:06,790
Poursuivant l'exercice, dans la prochaine étape,

58
00:05:06,790 --> 00:05:10,045
nous allons créer un modal dans notre page Web.

59
00:05:10,045 --> 00:05:17,665
Ce modal hébergera le formulaire de connexion et sera affiché en utilisant un lien dans leur barre de navigation.

60
00:05:17,665 --> 00:05:19,720
Donc, pour commencer,

61
00:05:19,720 --> 00:05:26,700
bootstrap conseille que tout le code lié au modal soit placé en haut de votre page.

62
00:05:26,700 --> 00:05:31,530
Donc, je vais entrer et écrire ci-dessous la barre de navigation ici,

63
00:05:31,530 --> 00:05:34,455
je vais placer dans le code pour le modal là-bas.

64
00:05:34,455 --> 00:05:36,080
Donc, pour créer un modal,

65
00:05:36,080 --> 00:05:43,400
je commencerai par dire div ID login modal.

66
00:05:43,400 --> 00:05:48,355
Donc, nous donnons un ID à ce modal afin qu'il puisse être déclenché à partir

67
00:05:48,355 --> 00:05:53,895
du lien de la barre de navigation, puis classe comme « fade modal ».

68
00:05:53,895 --> 00:05:56,910
Donc, vous voyez que la classe est modale et fondu signifie

69
00:05:56,910 --> 00:06:00,220
que lorsque le modal est amené à l'écran,

70
00:06:00,220 --> 00:06:07,185
il va disparaître sur l'écran et le rôle est comme une boîte de dialogue.

71
00:06:07,185 --> 00:06:11,625
Donc, ce qui signifie qu'il est affiché en haut de la page.

72
00:06:11,625 --> 00:06:14,195
Fermons la div de la partie.

73
00:06:14,195 --> 00:06:18,415
Donc, à l'intérieur, nous allons créer le modal.

74
00:06:18,415 --> 00:06:28,510
Donc, là, je vais créer la deuxième div avec la classe en tant que dialogue modal-et puis

75
00:06:28,510 --> 00:06:32,620
à l'intérieur ici nous allons définir

76
00:06:32,620 --> 00:06:39,550
le contenu du modal réel ici et fermer la div.

77
00:06:39,550 --> 00:06:45,220
Et donc, ce sera le contenu modal sera structuré ici.

78
00:06:45,220 --> 00:06:51,370
Donc, à l'intérieur de ce dialogue modal, nous allons créer un autre div avec

79
00:06:51,370 --> 00:07:00,770
le contenu modal de classe et

80
00:07:00,770 --> 00:07:10,350
fermer le div et un modal typique contiendra un en-tête modal-.

81
00:07:10,350 --> 00:07:14,255
Donc, c'est là que la prochaine div va accueillir.

82
00:07:14,255 --> 00:07:23,635
Et puis un corps modal

83
00:07:23,635 --> 00:07:28,980
qui contiendra une grande partie du contenu lié au modal.

84
00:07:28,980 --> 00:07:34,835
Toutes ces sections du modal sont facultatives,

85
00:07:34,835 --> 00:07:38,020
mais au moins vous devriez avoir une telle section dans votre modal

86
00:07:38,020 --> 00:07:41,645
sinon cela n'a aucun sens de créer le modal là.

87
00:07:41,645 --> 00:07:46,455
Donc, avec cela, la structure du modal est maintenant prête.

88
00:07:46,455 --> 00:07:50,550
Donc, nous allons entrer et remplir le contenu dans ce modal.

89
00:07:50,550 --> 00:07:54,005
Donc maintenant, nous devons définir ce qui va dans le modal.

90
00:07:54,005 --> 00:07:57,505
Maintenant, dans l'en-tête, nous allons mettre un bouton,

91
00:07:57,505 --> 00:08:01,770
un bouton croisé dans le modal qui, lorsqu'il est cliqué, rejettera le modal.

92
00:08:01,770 --> 00:08:05,715
C' est la façon habituelle de concevoir les modaux.

93
00:08:05,715 --> 00:08:08,805
Et le corps modal contiendra lui-même la forme.

94
00:08:08,805 --> 00:08:12,610
Maintenant, un modal peut contenir tout ce que vous voulez, donc, par exemple,

95
00:08:12,610 --> 00:08:16,040
si vous cliquez sur une image dans

96
00:08:16,040 --> 00:08:19,630
une galerie d'images et que vous voulez afficher la plus grande taille de l'image,

97
00:08:19,630 --> 00:08:24,415
même là, vous pouvez utiliser un modal pour afficher les informations.

98
00:08:24,415 --> 00:08:26,280
Maintenant, dans cet exercice,

99
00:08:26,280 --> 00:08:31,765
nous allons utiliser le modal pour héberger un formulaire qui est affiché pour l'utilisateur.

100
00:08:31,765 --> 00:08:35,695
Ok, maintenant, dans l'en-tête modal,

101
00:08:35,695 --> 00:08:40,175
nous allons introduire un bouton avec

102
00:08:40,175 --> 00:08:49,170
le bouton type et la classe fermer.

103
00:08:49,170 --> 00:08:59,080
Donc, vous voyez que c'est un bouton qui est utilisé pour fermer le modal, puis vous direz,

104
00:08:59,080 --> 00:09:04,685
data-dismiss, puis modal.

105
00:09:04,685 --> 00:09:07,180
Donc, ce que cela signifie est que ce bouton particulier

106
00:09:07,180 --> 00:09:09,845
lorsqu'il est cliqué va rejeter le modal de l'écran.

107
00:09:09,845 --> 00:09:18,700
Et ce bouton, je vais utiliser les temps,

108
00:09:21,100 --> 00:09:24,900
s'affichera comme une croix dans les modales ici.

109
00:09:24,900 --> 00:09:27,380
Donc je dirais fois ici.

110
00:09:27,380 --> 00:09:30,549
Avant ce bouton, nous allons introduire

111
00:09:30,549 --> 00:09:36,470
un en-tête que nous allons afficher dans l'en-tête du modal donc je

112
00:09:36,470 --> 00:09:46,180
vais commencer par un h4 avec le titre modal de la classe.

113
00:09:46,180 --> 00:09:48,635
Et puis à l'intérieur de ce h4,

114
00:09:48,635 --> 00:09:52,200
j'inclurai le titre du modal,

115
00:09:52,200 --> 00:09:56,995
qui est login car cela va montrer le formulaire de connexion.

116
00:09:56,995 --> 00:10:01,625
Maintenant que nous avons mis quelques détails dans ce modal,

117
00:10:01,625 --> 00:10:06,110
ajoutons le lien dans notre barre de navigation qui va

118
00:10:06,110 --> 00:10:07,770
déclencher ce modal et ensuite nous allons voir

119
00:10:07,770 --> 00:10:11,515
comment le modal ressemble à l'écran.

120
00:10:11,515 --> 00:10:14,280
Aller à la barre de navigation,

121
00:10:14,280 --> 00:10:16,095
juste après l'UL ici,

122
00:10:16,095 --> 00:10:17,845
je vais inclure dans

123
00:10:17,845 --> 00:10:22,910
un lien qui peut être utilisé pour déclencher l'affichage et la masquage du modal.

124
00:10:22,910 --> 00:10:31,080
Donc, pour ce faire, j'irai et utiliserai une travée avec le texte de la barre de navigation de classe.

125
00:10:31,080 --> 00:10:37,950
C' est ce qui me permet d'inclure un lien dans la barre de navigation et de le montrer sous forme de texte.

126
00:10:37,950 --> 00:10:39,995
Donc, à l'intérieur de la plage,

127
00:10:39,995 --> 00:10:45,345
j'utiliserai un A avec le bascule de données, de

128
00:10:45,345 --> 00:10:50,010
sorte que vous pouvez voir le bascule de données JavaScript arriver et

129
00:10:50,010 --> 00:10:55,400
le bascule de données est pour une cible modale, puis de données.

130
00:10:55,400 --> 00:11:03,940
Vous vous souvenez que nous avions donné l'ID en tant que mode de connexion à notre-

131
00:11:04,170 --> 00:11:06,460
Modal que nous avons inclus.

132
00:11:06,460 --> 00:11:11,950
Donc, je vais l'utiliser comme cible de données avec le hachage devant cela.

133
00:11:11,950 --> 00:11:15,815
Et à l'intérieur, je vais entrer et utiliser

134
00:11:15,815 --> 00:11:24,520
une icône de police génial pour une connexion.

135
00:11:24,520 --> 00:11:28,710
Donc, c'est une police génial « fa- login »

136
00:11:28,800 --> 00:11:37,945
icône et dire login et fermez l'e-tech.

137
00:11:37,945 --> 00:11:43,975
Donc, avec cela, sauvegardons les modifications et jetons un oeil à la page Web.

138
00:11:43,975 --> 00:11:47,265
Aller à notre page Web dans le navigateur,

139
00:11:47,265 --> 00:11:50,530
vous voyez maintenant que sur le bord droit,

140
00:11:50,530 --> 00:11:56,680
vous voyez cette connexion avec cette icône créée là.

141
00:11:56,680 --> 00:12:00,850
Donc, c'est le lien qui va déclencher l'affichage du modal.

142
00:12:00,850 --> 00:12:02,530
Donc, si je clique sur ce lien,

143
00:12:02,530 --> 00:12:05,015
alors le modal s'affichera à l'écran.

144
00:12:05,015 --> 00:12:08,500
Donc, notez que lorsque nous avons créé ce modal, nous avons dit,

145
00:12:08,500 --> 00:12:14,565
en-tête qui contenait la connexion, puis aussi ce bouton et puis le corps

146
00:12:14,565 --> 00:12:17,605
, actuellement vide, nous allons introduire plus de code là-dedans.

147
00:12:17,605 --> 00:12:20,860
Maintenant, si vous cliquez sur ce bouton, le modal disparaîtra.

148
00:12:20,860 --> 00:12:23,170
Cliquez sur cela à nouveau, le modal est affiché.

149
00:12:23,170 --> 00:12:25,470
Même si vous cliquez en dehors du modal, le modal disparaîtra.

150
00:12:25,470 --> 00:12:30,985
C' est donc le comportement du modal que nous sommes venus à attendre.

151
00:12:30,985 --> 00:12:36,275
Maintenant, dans la prochaine étape, je vais entrer et présenter le formulaire ici.

152
00:12:36,275 --> 00:12:39,990
Je ne vais pas expliquer les détails du formulaire parce que vous avez

153
00:12:39,990 --> 00:12:43,924
déjà étudié les formes dans l'une des leçons précédentes.

154
00:12:43,924 --> 00:12:47,830
Donc, je vais simplement entrer et coller le code du formulaire et

155
00:12:47,830 --> 00:12:52,370
ensuite nous allons jeter un oeil au formulaire dans le modal ici.

156
00:12:52,370 --> 00:12:54,505
En revenant au code,

157
00:12:54,505 --> 00:12:57,640
vous pouvez maintenant voir que dans le corps modal,

158
00:12:57,640 --> 00:13:01,115
j'ai rempli un formulaire.

159
00:13:01,115 --> 00:13:07,850
Et puis j'ai deux groupes de formulaires ici avec une entrée avec le type email

160
00:13:07,850 --> 00:13:14,795
et mot de passe de type d'entrée et puis j'ai une case à cocher ici que j'ai.

161
00:13:14,795 --> 00:13:21,970
Donc, cela devrait être facile pour vous de déchiffrer ce que ce formulaire est une structure de code Ees, à

162
00:13:21,970 --> 00:13:26,505
partir de votre compréhension de la façon dont les formulaires Bootstrap sont conçus.

163
00:13:26,505 --> 00:13:28,250
J' ai mis deux boutons.

164
00:13:28,250 --> 00:13:33,060
L' un est un bouton de soumission et l'autre est un bouton d'annulation.

165
00:13:33,060 --> 00:13:36,440
Le bouton Annuler a le premier.

166
00:13:36,440 --> 00:13:41,580
Le bouton Annuler ici a le modèle de rejet de données.

167
00:13:41,580 --> 00:13:45,215
Donc, ce qui signifie que lorsque vous cliquez sur le bouton d'annulation, le modèle sera rejeté.

168
00:13:45,215 --> 00:13:50,170
Et l'autre est un bouton de soumission qui est utilisé pour soumettre le formulaire.

169
00:13:50,170 --> 00:13:51,480
Donc, avec ces modifications,

170
00:13:51,480 --> 00:13:55,550
sauvegardons les modifications, puis allons jeter un oeil à notre page Web.

171
00:13:55,550 --> 00:13:57,205
Pour revenir à la page Web,

172
00:13:57,205 --> 00:14:04,045
maintenant vous cliquez sur la connexion puis vous verrez un formulaire pour un utilisateur de se connecter.

173
00:14:04,045 --> 00:14:07,025
Donc vous verrez que vous avez deux boîtes ici.

174
00:14:07,025 --> 00:14:09,850
Entrer les cases ici pour entrer l'e-mail et le mot de passe,

175
00:14:09,850 --> 00:14:12,870
puis une case à cocher pour dire Se souvenir de moi.

176
00:14:12,870 --> 00:14:15,320
Et puis vous avez une connexion et une annulation.

177
00:14:15,320 --> 00:14:17,860
Donc, si vous cliquez sur Annuler le modal disparaîtra.

178
00:14:17,860 --> 00:14:20,710
Tout comme quand vous cliquez sur la croix là-bas.

179
00:14:20,710 --> 00:14:23,915
Et puis, si vous remplissez ces informations et continuez à cliquer sur

180
00:14:23,915 --> 00:14:26,120
la connexion, le processus de connexion devrait être lancé.

181
00:14:26,120 --> 00:14:29,885
En ce moment, nous n'avons pas de serveur pour que cela fonctionne,

182
00:14:29,885 --> 00:14:34,640
mais je vous montre simplement dans Bootstrap comment vous créeriez un formulaire comme celui-ci.

183
00:14:34,640 --> 00:14:37,240
Je suis sûr que vous avez vu des choses comme celles-ci sur de

184
00:14:37,240 --> 00:14:40,610
nombreux sites Web où lorsque vous cliquez sur un bouton de connexion

185
00:14:40,610 --> 00:14:43,220
quelque chose comme ça avec le formulaire apparaît à l'écran

186
00:14:43,220 --> 00:14:46,585
et attend de vous de taper les informations.

187
00:14:46,585 --> 00:14:50,160
Vous allez maintenant voir comment vous pouvez tirer parti des modèles pour afficher des

188
00:14:50,160 --> 00:14:54,740
informations superposées à votre page Web.

189
00:14:54,740 --> 00:14:57,910
Avec cela, nous complétons cet exercice.

190
00:14:57,910 --> 00:15:01,950
Dans cet exercice, nous avons vu l'utilisation d'

191
00:15:01,950 --> 00:15:06,835
info-bulles et nous avons vu l'utilisation de modèles pour afficher du contenu.

192
00:15:06,835 --> 00:15:14,200
C' est un bon moment pour vous de faire un git-commint avec les conseils et modèles d'outils de message.