1
00:00:03,910 --> 00:00:06,210
Enfilez vos bottes,

2
00:00:06,210 --> 00:00:08,470
et commençons avec Bootstrap.

3
00:00:08,470 --> 00:00:13,045
Je suis sûr que vos doigts démangent pour mettre vos mains autour de Bootstrap.

4
00:00:13,045 --> 00:00:18,250
Alors, première étape, allez

5
00:00:18,250 --> 00:00:22,280
aux instructions d'exercice qui suivent cette vidéo

6
00:00:22,280 --> 00:00:27,805
dans votre page de cours Bootstrap sur Coursera.

7
00:00:27,805 --> 00:00:29,840
Et puis dans les instructions,

8
00:00:29,840 --> 00:00:35,520
vous verrez un lien vers ce fichier Bootstrap4-starter.zip.

9
00:00:35,520 --> 00:00:39,695
Téléchargez le fichier zip sur votre ordinateur.

10
00:00:39,695 --> 00:00:46,610
En outre, les instructions étape par étape qui sont illustrées dans cette vidéo

11
00:00:46,610 --> 00:00:52,995
seront également données dans les instructions d'exercice qui suivent cette vidéo.

12
00:00:52,995 --> 00:01:00,595
Là, vous aurez accès à l'un des extraits de code dont vous avez besoin pour cet exercice.

13
00:01:00,595 --> 00:01:04,920
Ce serait également le cas pour tous les exercices à l'avenir.

14
00:01:04,920 --> 00:01:08,125
Donc, si vous avez besoin de mettre la main sur les extraits de code,

15
00:01:08,125 --> 00:01:10,145
c'est là que vous les trouverez.

16
00:01:10,145 --> 00:01:12,180
Une fois que vous avez téléchargé le fichier zip,

17
00:01:12,180 --> 00:01:16,230
déplacez ce fichier zip à un emplacement pratique sur votre ordinateur.

18
00:01:16,230 --> 00:01:23,375
Donc, ici, je l'ai déplacé dans un dossier nommé Coursera sur mon ordinateur,

19
00:01:23,375 --> 00:01:27,145
et puis j'ai le fichier zip avec ce nom long là-bas.

20
00:01:27,145 --> 00:01:28,765
Décompressez simplement le fichier.

21
00:01:28,765 --> 00:01:30,445
Une fois que vous décompressez le fichier,

22
00:01:30,445 --> 00:01:36,715
vous trouverez un dossier nommé Bootstrap4 créé sur votre ordinateur.

23
00:01:36,715 --> 00:01:38,965
Dans le dossier Bootstrap4,

24
00:01:38,965 --> 00:01:42,450
vous verrez un autre dossier nommé Confusion, là.

25
00:01:42,450 --> 00:01:46,260
Allez dans le dossier Confusion et vous y verrez deux fichiers,

26
00:01:46,260 --> 00:01:49,600
index.html et fichier package.json.

27
00:01:49,600 --> 00:01:53,795
Maintenant, ouvrez une fenêtre de commande ou

28
00:01:53,795 --> 00:02:00,290
un terminal, puis déplacez vers ce dossier dans votre fenêtre de commande ou votre terminal.

29
00:02:00,290 --> 00:02:05,125
À l'invite de commandes, tapez npm install.

30
00:02:05,125 --> 00:02:09,150
Notez que j'ai déjà le fichier package.json dedans.

31
00:02:09,150 --> 00:02:12,745
Donc, le fichier package.json est configuré de sorte que

32
00:02:12,745 --> 00:02:19,200
la dépendance de développement lite-server soit installée si je tape npm install.

33
00:02:19,200 --> 00:02:21,150
Ainsi, une fois que vous tapez npm install,

34
00:02:21,150 --> 00:02:27,160
vous verrez que le lite-server sera installé dans votre dossier node_modules chacun.

35
00:02:27,160 --> 00:02:30,415
Une fois cela terminé,

36
00:02:30,415 --> 00:02:35,930
ouvrez ce dossier dans votre éditeur favori.

37
00:02:35,930 --> 00:02:39,060
Une fois que vous avez ouvert le dossier dans votre éditeur,

38
00:02:39,060 --> 00:02:45,170
créez un fichier .gitignore,

39
00:02:45,170 --> 00:02:50,530
puis mettez node_modules dans le fichier gitignore et enregistrez.

40
00:02:50,530 --> 00:02:54,940
C' est donc pour s'assurer que lorsque vous faites un gitcommit,

41
00:02:54,940 --> 00:02:57,615
le dossier node_modules ne sera pas validé.

42
00:02:57,615 --> 00:03:05,475
Après cela, il est temps d'aller chercher Bootstrap pour une utilisation dans notre projet.

43
00:03:05,475 --> 00:03:08,050
Avant de récupérer Bootstrap,

44
00:03:08,050 --> 00:03:11,810
faisons un commit de l'état actuel du fichier.

45
00:03:11,810 --> 00:03:18,535
Donc, faites git init et initialisez votre dépôt git.

46
00:03:18,535 --> 00:03:21,600
Ensuite, vous pouvez vérifier l'état git,

47
00:03:21,600 --> 00:03:25,290
et vous verrez que ces fichiers doivent être validés,

48
00:03:25,290 --> 00:03:29,315
ajoutez tous les fichiers,

49
00:03:29,315 --> 00:03:38,885
gitcommit -m « Initial Setup ».

50
00:03:38,885 --> 00:03:43,745
C' est donc le point de départ de votre dossier en ce moment.

51
00:03:43,745 --> 00:03:52,785
Donc, avec cela, votre point de départ de votre projet web a été maintenant engagé dans git.

52
00:03:52,785 --> 00:03:57,770
Maintenant, vous pouvez configurer ce git pour se synchroniser avec un dépôt en ligne,

53
00:03:57,770 --> 00:04:00,800
comme nous l'avons dit dans les exercices git.

54
00:04:00,800 --> 00:04:05,690
Ainsi, vous pouvez configurer un dépôt soit sur Bitbucket ou sur Github, puis

55
00:04:05,690 --> 00:04:11,430
synchroniser ce projet avec ce dépôt git.

56
00:04:11,430 --> 00:04:15,265
Notre prochaine étape est d'aller chercher Bootstrap.

57
00:04:15,265 --> 00:04:25,260
Pour ce faire, ajoutez le type d'invite npm install bootstrap @4 .0.0 et aussi —save,

58
00:04:25,260 --> 00:04:29,470
et laissez Bootstrap être installé.

59
00:04:29,470 --> 00:04:31,880
Une fois Bootstrap installé,

60
00:04:31,880 --> 00:04:35,535
nous nous rendons compte que nous devons également installer son homologue,

61
00:04:35,535 --> 00:04:38,975
qui est jQuery ainsi que Popper.js.

62
00:04:38,975 --> 00:04:46,350
Alors allons de l'avant et installez à la fois jQuery et Popper.js dans ce dossier de projet.

63
00:04:46,350 --> 00:04:50,905
Donc, pour ce faire, ajoutez le type d'invite npm install

64
00:04:50,905 --> 00:04:55,115
jquery @3 .3.1

65
00:04:55,115 --> 00:05:03,185
et Popper.js @1 .12.9 —save.

66
00:05:03,185 --> 00:05:06,385
Maintenant, chaque fois que j'installe l'un des paquets npm,

67
00:05:06,385 --> 00:05:11,620
je spécifie explicitement la version du paquet que vous devez installer.

68
00:05:11,620 --> 00:05:17,580
La raison en est que je veux m'assurer que pendant que vous passez par cet exercice,

69
00:05:17,580 --> 00:05:19,500
toutes les étapes fonctionneront correctement.

70
00:05:19,500 --> 00:05:25,380
Donc, je spécifie la version exacte des modules npm à installer.

71
00:05:25,380 --> 00:05:33,235
Donc, ici, nous installons la version 3.3.1 de jQuery et Popper.js version 1.12.9.

72
00:05:33,235 --> 00:05:40,895
Par la suite, aussi, je vais spécifier les versions exactes des modules à installer.

73
00:05:40,895 --> 00:05:44,130
Alors allons de l'avant et installons ces.

74
00:05:46,530 --> 00:05:49,030
Et une fois qu'ils sont installés,

75
00:05:49,030 --> 00:05:51,055
nous pouvons passer à l'étape suivante.

76
00:05:51,055 --> 00:05:55,615
En revenant à notre dossier de projet,

77
00:05:55,615 --> 00:05:58,070
vous verrez que si vous allez dans node_modules,

78
00:05:58,070 --> 00:06:02,675
vous verrez un dossier nommé Bootstrap.

79
00:06:02,675 --> 00:06:04,865
Et dans le dossier Bootstrap,

80
00:06:04,865 --> 00:06:07,845
vous trouverez un dossier nommé dist.

81
00:06:07,845 --> 00:06:09,910
Donc, à l'intérieur du dossier dist,

82
00:06:09,910 --> 00:06:13,705
vous trouverez deux sous-dossiers nommés CSS et js.

83
00:06:13,705 --> 00:06:15,775
Si vous allez dans le dossier CSS,

84
00:06:15,775 --> 00:06:20,820
vous trouverez tout un tas de fichiers CSS précompilés ici.

85
00:06:20,820 --> 00:06:27,630
Celui qui nous intéresse au début est Bootstrap min.css.

86
00:06:27,630 --> 00:06:31,620
C' est le fichier que nous allons inclure dans notre

87
00:06:31,620 --> 00:06:36,020
fichier index.html afin d'utiliser Bootstrap dans notre projet.

88
00:06:36,020 --> 00:06:38,820
De même, en allant dans le dossier js,

89
00:06:38,820 --> 00:06:42,165
vous verrez qu'il y a un fichier Bootstrap min.js.

90
00:06:42,165 --> 00:06:45,680
Nous allons inclure cela aussi dans notre index.htm.

91
00:06:45,680 --> 00:06:48,790
Donc ce sera la prochaine étape que vous me verrez faire.

92
00:06:48,790 --> 00:06:51,215
Avant de passer à l'étape suivante,

93
00:06:51,215 --> 00:06:55,550
lançons notre serveur lite-afin que nous puissions voir les changements que nous apportons au

94
00:06:55,550 --> 00:07:01,860
index.html immédiatement reflétés dans notre page web en temps réel.

95
00:07:01,860 --> 00:07:03,630
Alors, commençons les serveurs Lite-server.

96
00:07:03,630 --> 00:07:07,240
Donc, tapez le type d'invite npm start,

97
00:07:07,240 --> 00:07:09,915
puis cela devrait démarrer votre lite-server.

98
00:07:09,915 --> 00:07:13,485
Vous pouvez maintenant voir, à l'écran,

99
00:07:13,485 --> 00:07:21,785
mon éditeur à gauche et la version actuelle de la page index.html à droite.

100
00:07:21,785 --> 00:07:23,215
Donc, comme vous pouvez le voir,

101
00:07:23,215 --> 00:07:27,615
j'ai déjà configuré la page index.html avec du contenu.

102
00:07:27,615 --> 00:07:33,820
Cette page web ressemble à la page Web typique d'un professeur d'informatique.

103
00:07:33,820 --> 00:07:41,170
Ouvrons maintenant la page index.html dans notre éditeur.

104
00:07:41,170 --> 00:07:45,645
Et puis dans la partie tête de la page index.html,

105
00:07:45,645 --> 00:07:47,360
juste avant le titre,

106
00:07:47,360 --> 00:07:49,935
je vais coller un peu de code.

107
00:07:49,935 --> 00:07:53,730
Cet extrait de code vous est donné dans les instructions.

108
00:07:53,730 --> 00:07:56,740
Donc, vous pouvez simplement copier et coller cet extrait de code,

109
00:07:56,740 --> 00:08:00,765
et je vais vous guider à travers ce que cet extrait de code essaie de faire.

110
00:08:00,765 --> 00:08:05,585
Vous remarquerez que j'ai trois balises meta ici.

111
00:08:05,585 --> 00:08:09,130
Le premier dit charset="utf-8".

112
00:08:09,130 --> 00:08:11,860
Donc, c'est l'unicode qui va être utilisé.

113
00:08:11,860 --> 00:08:17,675
La deuxième ligne qui dit meta name="viewport »,

114
00:08:17,675 --> 00:08:21,100
je vais revenir et

115
00:08:21,100 --> 00:08:25,745
vous expliquer cette ligne particulière dans la prochaine leçon quand nous allons regarder la conception web responsive.

116
00:08:25,745 --> 00:08:30,100
Maintenant, permettez-moi d'attirer votre attention sur cette ligne particulière qui

117
00:08:30,100 --> 00:08:34,840
dit lien rel="stylesheet », puis href.

118
00:08:34,840 --> 00:08:43,495
Notez que je spécifie href comme « node_modules/bootstrap/dist/css/bootstrap.min.css ».

119
00:08:43,495 --> 00:08:49,150
Donc, ce que je spécifie est que le fichier bootstrap.min.css,

120
00:08:49,150 --> 00:08:52,970
qui contient les classes CSS correspondant à Bootstrap que nous avons

121
00:08:52,970 --> 00:08:57,995
téléchargé en utilisant NPM dans notre dossier node_modules,

122
00:08:57,995 --> 00:09:05,350
je vais l'inclure dans la tête de ma page index.html.

123
00:09:05,350 --> 00:09:09,370
Vous devez donc inclure les classes CSS fournies par Bootstrap.

124
00:09:09,370 --> 00:09:15,150
Vous devez également inclure les classes JavaScript fournies par Bootstrap,

125
00:09:15,150 --> 00:09:19,445
ce que nous allons faire au bas de cette page.

126
00:09:19,445 --> 00:09:23,465
Aller au bas de cette page, notez,

127
00:09:23,465 --> 00:09:27,400
juste avant la balise de corps de fermeture,

128
00:09:27,400 --> 00:09:32,820
je vais coller dans le code pour inclure tous les scripts là-bas.

129
00:09:32,820 --> 00:09:35,105
Donc, pour ce faire,

130
00:09:35,105 --> 00:09:41,300
je colle simplement dans les trois lignes pour que le script inclue le jQuery,

131
00:09:41,300 --> 00:09:45,085
Popper.js, et aussi le Bootstrap min.js.

132
00:09:45,085 --> 00:09:48,635
Et notez l'ordre dans lequel j'ai inclus ceci.

133
00:09:48,635 --> 00:09:50,895
Donc le Bootstrap est en bas.

134
00:09:50,895 --> 00:09:57,340
Ensuite, puisque Bootstrap dépend à la fois de jQuery et de Popper dans cet ordre,

135
00:09:57,340 --> 00:09:59,945
donc je vais d'abord entrer jQuery.

136
00:09:59,945 --> 00:10:03,835
Et puis après cela, nous entrons Popper, puis finalement,

137
00:10:03,835 --> 00:10:09,585
Bootstrap min.js au bas du fichier index.html.

138
00:10:09,585 --> 00:10:13,400
Maintenant, ceci est inclus au bas de la page.

139
00:10:13,400 --> 00:10:18,665
Parce que lorsque vous chargez la page à partir d'un serveur Web,

140
00:10:18,665 --> 00:10:24,360
vous voulez que les classes CSS soient chargées immédiatement afin qu'au fur et à mesure que la page commence

141
00:10:24,360 --> 00:10:26,430
le rendu, lorsque le JavaScript est récupéré,

142
00:10:26,430 --> 00:10:29,810
le JavaScript doit s'exécuter afin d'apporter des modifications

143
00:10:29,810 --> 00:10:33,395
à votre page avec le code JavaScript,

144
00:10:33,395 --> 00:10:34,970
et que prendra un peu de temps.

145
00:10:34,970 --> 00:10:38,060
Donc, vous ne voulez pas que l'utilisateur attende que

146
00:10:38,060 --> 00:10:43,805
la page entière soit chargée avant qu'il ne voit quelque chose dans sa fenêtre de navigateur.

147
00:10:43,805 --> 00:10:48,720
C' est pourquoi nous chargeons normalement les classes JavaScript

148
00:10:48,720 --> 00:10:55,325
vers la fin de notre page html juste avant le body tech.

149
00:10:55,325 --> 00:10:58,270
Après avoir effectué ces modifications,

150
00:10:58,270 --> 00:11:00,065
sauvegardons le fichier.

151
00:11:00,065 --> 00:11:04,420
Maintenant, la raison pour laquelle je montre le

152
00:11:04,420 --> 00:11:09,385
fichier index.html dans mon éditeur et aussi le navigateur juste à côté est, au

153
00:11:09,385 --> 00:11:13,630
moment où vous enregistrez les modifications que vous avez apportées au fichier index.html,

154
00:11:13,630 --> 00:11:18,920
notez comment le rendu du navigateur de ce fichier se

155
00:11:18,920 --> 00:11:26,525
met immédiatement à jour et voyez Bootstrap déjà en action sur la page. À l'

156
00:11:26,525 --> 00:11:33,150
heure actuelle, vous verrez que votre page utilise Times New Roman pour afficher tout le contenu.

157
00:11:33,150 --> 00:11:36,130
Au moment où j'enregistre la page web,

158
00:11:36,130 --> 00:11:42,670
vous remarquez que les polices utilisées sur votre page web ont changé.

159
00:11:42,670 --> 00:11:48,425
Maintenant, votre page Web est configurée pour utiliser les classes Bootstrap,

160
00:11:48,425 --> 00:11:53,850
et elle utilise la typographie par défaut Bootstraps pour afficher tout le contenu.

161
00:11:53,850 --> 00:12:01,360
Bootstrap utilise par défaut Helvetica Neue pour la police.

162
00:12:01,360 --> 00:12:06,180
Vous pouvez modifier la police par défaut pour bootstrap et ainsi de suite,

163
00:12:06,180 --> 00:12:09,905
mais cela va au-delà de la portée de notre discussion en ce moment.

164
00:12:09,905 --> 00:12:15,120
Donc, une fois que vous avez configuré votre page index.html et

165
00:12:15,120 --> 00:12:20,710
que vous l'avez enregistrée, vous verrez immédiatement Bootstrap entrer en action dans notre page Web.

166
00:12:20,710 --> 00:12:23,675
Donc, c'est comme ça que je vais continuer à illustrer,

167
00:12:23,675 --> 00:12:27,385
comme nous ajoutons divers bootstraps, classes CSS

168
00:12:27,385 --> 00:12:30,435
et composants à notre page Web,

169
00:12:30,435 --> 00:12:35,720
comment le rendu de celui-ci dans notre navigateur va continuer à changer.

170
00:12:35,720 --> 00:12:44,860
Maintenant, évidemment, le rendu de la page dans notre navigateur est toujours terrible.

171
00:12:44,860 --> 00:12:49,230
C' est mieux que la page Web typique des professeurs d'informatique,

172
00:12:49,230 --> 00:12:51,715
mais certainement pas lisible.

173
00:12:51,715 --> 00:12:58,320
Nous devons maintenant mettre en œuvre les différentes classes CSS et

174
00:12:58,320 --> 00:12:59,910
les composants JavaScript fournis par

175
00:12:59,910 --> 00:13:06,960
notre infrastructure d'interface utilisateur Web Bootstrap afin de concevoir notre page Web.

176
00:13:06,960 --> 00:13:12,720
Nous ferons donc cela étape par étape au fur et à mesure que nous poursuivrons cet exercice.

177
00:13:12,720 --> 00:13:18,535
Cela peut être un moment pratique pour vous de faire une validation git

178
00:13:18,535 --> 00:13:24,355
des modifications que vous avez faites afin qu'à la fin de cet exercice,

179
00:13:24,355 --> 00:13:30,365
votre état de votre dossier de projet soit enregistré dans votre dépôt git.

180
00:13:30,365 --> 00:13:36,610
Aller à mon dossier Confusion dans un autre onglet de ma fenêtre de terminal,

181
00:13:36,610 --> 00:13:38,990
si je tape git status,

182
00:13:38,990 --> 00:13:44,455
je vois maintenant que mon fichier index.html et le paquet du fichier JSON ont été modifiés.

183
00:13:44,455 --> 00:13:47,930
Donc, je vais faire un commit.

184
00:13:59,540 --> 00:14:04,635
Donc, maintenant, mon état

185
00:14:04,635 --> 00:14:10,610
du dossier à la fin de cet exercice a été validé dans mon dépôt git.

186
00:14:10,610 --> 00:14:13,920
Vous pouvez synchroniser cela avec votre référentiel en ligne afin que

187
00:14:13,920 --> 00:14:18,390
l'état de votre projet soit sauvegardé à ce stade.

188
00:14:18,390 --> 00:14:24,955
Avec cela, nous terminons notre premier exercice Bootstrap.

189
00:14:24,955 --> 00:14:33,210
Vous avez maintenant vu comment nous pouvons configurer Bootstrap pour être utilisé dans notre projet web.

190
00:14:33,210 --> 00:14:36,140
Au fur et à mesure que nous procédons

191
00:14:36,140 --> 00:14:42,470
aux prochains exercices, nous allons utiliser les cours Bootstrap pour concevoir nos pages Web.