1
00:00:03,550 --> 00:00:05,885
Lors de la conférence précédente,

2
00:00:05,885 --> 00:00:08,860
nous avons appris sur le design responsive.

3
00:00:08,860 --> 00:00:12,300
Nous avons également brièvement mentionné que le système de grille Bootstrap est

4
00:00:12,300 --> 00:00:16,505
conçu pour prendre en charge les sites Web réactifs.

5
00:00:16,505 --> 00:00:20,275
Comment la grille Bootstraps supporte-t-elle cela ?

6
00:00:20,275 --> 00:00:23,765
Et qu'implique exactement la grille Bootstrap,

7
00:00:23,765 --> 00:00:27,710
qui nous permet de concevoir des sites web réactifs ?

8
00:00:27,710 --> 00:00:32,535
Parlons un peu plus de détails sur le système de grille Bootstrap

9
00:00:32,535 --> 00:00:36,700
et comment il prend en charge la réactivité ensuite.

10
00:00:36,700 --> 00:00:45,450
Nous avons vu l'utilisation de la balise meta viewport dans la leçon précédente,

11
00:00:45,450 --> 00:00:53,590
lorsque nous avons fait l'exercice initial sur la configuration de Bootstrap dans notre page index.html.

12
00:00:53,590 --> 00:00:58,790
J' ai brièvement parlé de cette ligne particulière dans le code à l'époque.

13
00:00:58,790 --> 00:01:05,015
Essayons de comprendre pourquoi nous utilisons cela dans notre page index.html.

14
00:01:05,015 --> 00:01:08,090
Ce que nous spécifions ici est que,

15
00:01:08,090 --> 00:01:14,555
lorsque notre page Web est rendue par le navigateur dans un appareil particulier, alors,

16
00:01:14,555 --> 00:01:20,970
leur rendu dans le navigateur prendra en compte la taille de l'écran et

17
00:01:20,970 --> 00:01:28,080
adaptera automatiquement le rendu de la page à la largeur de l'écran des appareils.

18
00:01:28,080 --> 00:01:32,090
De cette façon, nous avons des classes réactives,

19
00:01:32,090 --> 00:01:35,740
des classes CSS intégrées dans notre infrastructure d'interface utilisateur,

20
00:01:35,740 --> 00:01:39,030
alors cela garantira que notre page Web est

21
00:01:39,030 --> 00:01:42,855
correctement rendue pour cette taille d'écran particulière.

22
00:01:42,855 --> 00:01:46,930
C' est là que le système de grille Bootstrap vient à notre secours et

23
00:01:46,930 --> 00:01:51,000
nous permet de concevoir des sites web réactifs.

24
00:01:51,000 --> 00:01:53,480
Donc, encore une fois, en soulignant ce point, la

25
00:01:53,480 --> 00:01:57,100
grille Bootstrap est conçue pour être réactive.

26
00:01:57,100 --> 00:02:01,525
Vous avez déjà vu ce que cela signifie dans la conférence précédente,

27
00:02:01,525 --> 00:02:07,845
et mobile d'abord, que nous avons déjà discuté dans la conférence précédente, puis fluide,

28
00:02:07,845 --> 00:02:11,055
s'adaptant automatiquement à la largeur de l'écran.

29
00:02:11,055 --> 00:02:16,220
La grille Bootstrap tire parti de la mise en page CSS flexbox.

30
00:02:16,220 --> 00:02:19,860
La mise en page CSS flexbox qui est prise en charge par

31
00:02:19,860 --> 00:02:23,955
les versions les plus récentes des différents navigateurs,

32
00:02:23,955 --> 00:02:30,070
permet des options de mise en page beaucoup plus simples et flexibles dans CSS.

33
00:02:30,070 --> 00:02:31,980
Maintenant, la discussion réelle sur le

34
00:02:31,980 --> 00:02:36,800
fonctionnement de la mise en page CSS flexbox dépasse le cadre de ce cours,

35
00:02:36,800 --> 00:02:41,040
nous nous limiterons à la façon dont la flexbox CSS est

36
00:02:41,040 --> 00:02:45,565
exploitée par Bootstrap pour son système de grille.

37
00:02:45,565 --> 00:02:54,710
Auparavant, Bootstrap avait son propre système de grille qui était antérieure à la mise en page CSS flexbox,

38
00:02:54,710 --> 00:02:58,840
mais la dernière version de Bootstrap

39
00:02:58,840 --> 00:03:06,650
a fait la mise en page CSS flexbox comme norme pour la grille Bootstrap.

40
00:03:06,650 --> 00:03:10,375
Cette disposition flexbox peut facilement gérer le

41
00:03:10,375 --> 00:03:17,390
contenu dynamique et adapter les conteneurs au contenu dynamique,

42
00:03:17,390 --> 00:03:20,780
et peut également s'adapter facilement à la taille inconnue

43
00:03:20,780 --> 00:03:24,890
du contenu réel inclus dans les conteneurs.

44
00:03:24,890 --> 00:03:30,320
La mise en page flexbox prend également en charge la mise en page indépendante de la direction.

45
00:03:30,320 --> 00:03:37,084
Ce que la disposition flexbox apporte aux grilles Bootstrap est la possibilité de

46
00:03:37,084 --> 00:03:44,005
faire un alignement vertical facile du contenu dans un élément parent.

47
00:03:44,005 --> 00:03:48,595
Nous verrons l'utilisation de cela dans l'exercice qui suit.

48
00:03:48,595 --> 00:03:52,625
En outre, il permet de réorganiser facilement le contenu

49
00:03:52,625 --> 00:03:58,170
sur différents appareils et résolutions d'écran à l'aide de requêtes multimédias.

50
00:03:58,170 --> 00:04:03,050
Encore une fois, nous verrons un peu cela dans l'exercice sur la façon dont Bootstrap

51
00:04:03,050 --> 00:04:08,645
tire parti de cela pour prendre en charge des méthodes intéressantes de présentation du contenu.

52
00:04:08,645 --> 00:04:11,670
En outre, ce contenu lui-même,

53
00:04:11,670 --> 00:04:19,275
les conteneurs de contenu peuvent également être conçus pour être des colonnes de hauteur égale de sorte que

54
00:04:19,275 --> 00:04:25,245
le conteneur de contenu avec la plus grande

55
00:04:25,245 --> 00:04:32,915
hauteur détermine la hauteur de tous les conteneurs restants qui sont disposés dans la même ligne.

56
00:04:32,915 --> 00:04:39,375
Parlons maintenant un peu plus de détails sur la grille Bootstrap et comment cela fonctionne réellement.

57
00:04:39,375 --> 00:04:41,400
La façon dont fonctionne la grille Bootstrap,

58
00:04:41,400 --> 00:04:48,765
consiste à appliquer un conteneur plus à la couche la plus externe.

59
00:04:48,765 --> 00:04:51,815
Nous pourrions utiliser un div pour

60
00:04:51,815 --> 00:04:57,075
définir l'élément pour lequel nous appliquons la classe conteneur en général.

61
00:04:57,075 --> 00:05:03,855
Le conteneur est l'unité la plus extérieure à l'intérieur de laquelle le contenu réel est exposé.

62
00:05:03,855 --> 00:05:10,220
Bootstrap prend en charge à la fois la classe de conteneur qui est une disposition de largeur fixe,

63
00:05:10,220 --> 00:05:16,010
ce qui signifie que le contenu lui-même est limité à une largeur fixe sur l'écran.

64
00:05:16,010 --> 00:05:22,420
Cette classe de conteneur permet à cette largeur fixe de s'adapter automatiquement à

65
00:05:22,420 --> 00:05:25,920
la taille de l'écran en utilisant des requêtes de média de sorte que

66
00:05:25,920 --> 00:05:29,695
c'est là que la conception responsive entre dans notre sauvetage.

67
00:05:29,695 --> 00:05:36,340
Plus tard, nous verrons comment ce conteneur s'ajustera à différentes tailles d'écran.

68
00:05:36,340 --> 00:05:39,490
Maintenant, nous avons également la flexibilité d'utiliser dans

69
00:05:39,490 --> 00:05:42,684
d'autres liquides de récipient classiques qui permettent

70
00:05:42,684 --> 00:05:49,200
au récipient de s'adapter automatiquement à la taille de l'écran.

71
00:05:49,200 --> 00:05:50,855
Mais le conteneur de largeur fixe,

72
00:05:50,855 --> 00:05:56,270
fixe la taille de la largeur de mise en page réelle.

73
00:05:56,270 --> 00:06:01,370
À l'intérieur du conteneur, le contenu sera disposé sous la forme de lignes,

74
00:06:01,370 --> 00:06:04,770
donc généralement ce que nous ferions est à l'intérieur

75
00:06:04,770 --> 00:06:08,360
et à l'extérieur de div auquel nous appliquons la classe conteneur,

76
00:06:08,360 --> 00:06:12,440
nous inclurons une div interne à laquelle nous appliquerons la classe de ligne.

77
00:06:12,440 --> 00:06:17,550
Ainsi, le contenu lui-même sera divisé verticalement en plusieurs lignes.

78
00:06:17,550 --> 00:06:21,000
Et une fois que cela est divisé en lignes, à l'intérieur de chaque ligne,

79
00:06:21,000 --> 00:06:25,995
vous pouvez ensuite mettre en page le contenu à l'aide de colonnes.

80
00:06:25,995 --> 00:06:28,810
Ainsi, chaque ligne dans Bootstrap,

81
00:06:28,810 --> 00:06:34,565
sera divisée en 12 colonnes de taille égale.

82
00:06:34,565 --> 00:06:43,820
Maintenant, vous pouvez concevoir votre contenu pour occuper n'importe quel nombre de ces 12 colonnes.

83
00:06:43,820 --> 00:06:48,900
Ainsi, et le fait que le contenu lui-même s'adapte à

84
00:06:48,900 --> 00:06:51,310
la largeur de l'écran et la ligne elle-même étant

85
00:06:51,310 --> 00:06:54,710
enfermée à l'intérieur du conteneur s'adaptera automatiquement à la largeur de

86
00:06:54,710 --> 00:06:58,120
l'écran, ainsi que les colonnes,

87
00:06:58,120 --> 00:07:01,320
les 12 colonnes seront déterminées.

88
00:07:01,320 --> 00:07:05,010
Leurs largeurs seront déterminées par la rangée par elle-même.

89
00:07:05,010 --> 00:07:08,520
Donc, ce qui signifie que pour une taille d'écran différente,

90
00:07:08,520 --> 00:07:12,470
quel que soit le contenu que vous mettez en page toutes ces 12 colonnes

91
00:07:12,470 --> 00:07:18,220
s'ajustera automatiquement à la largeur qui est autorisée pour le contenu.

92
00:07:18,220 --> 00:07:21,990
Donc, c'est ainsi que la réactivité est

93
00:07:21,990 --> 00:07:27,370
intégrée dans la façon de la grille Bootstrap de disposition du contenu.

94
00:07:27,370 --> 00:07:30,285
Alors, comment dispose-t-on exactement le contenu ?

95
00:07:30,285 --> 00:07:33,845
Nous en parlerons dans les prochaines diapositives.

96
00:07:33,845 --> 00:07:36,315
La grille Bootstrap elle-même,

97
00:07:36,315 --> 00:07:45,160
nous met à disposition cinq classes pour spécifier différentes tailles d'écran par défaut.

98
00:07:45,160 --> 00:07:49,870
Il existe une classe par défaut qui cible toutes les tailles d'

99
00:07:49,870 --> 00:07:53,210
écran, de extra small à extra large.

100
00:07:53,210 --> 00:07:59,205
Ainsi, toute la gamme des largeurs d'écran en termes Bootstrap,

101
00:07:59,205 --> 00:08:02,884
est divisée en très petites, petites,

102
00:08:02,884 --> 00:08:07,405
moyennes, grandes et très grandes tailles d'écran.

103
00:08:07,405 --> 00:08:11,180
Regardez ensuite comment ces différentes classes

104
00:08:11,180 --> 00:08:16,350
de tailles d'écran sont déterminées en détail dans l'une des diapositives ultérieures.

105
00:08:16,350 --> 00:08:18,540
Ainsi, dans votre code,

106
00:08:18,540 --> 00:08:22,830
vous allez identifier la spécification de mise en page en

107
00:08:22,830 --> 00:08:29,060
spécifiant sm pour la petite taille d'écran,

108
00:08:29,060 --> 00:08:32,195
md pour moyenne, lg pour grande

109
00:08:32,195 --> 00:08:35,905
et xl pour les tailles d'écran extra grandes.

110
00:08:35,905 --> 00:08:37,400
Ainsi, lorsque vous faites la mise en page,

111
00:08:37,400 --> 00:08:40,345
comme nous l'avons vu dans la diapositive précédente,

112
00:08:40,345 --> 00:08:45,405
chaque ligne d'un système de grille Bootstrap est divisée en 12 colonnes.

113
00:08:45,405 --> 00:08:50,905
Maintenant, nous allons mettre en page le contenu en utilisant ce qu'on appelle les classes de colonne.

114
00:08:50,905 --> 00:08:52,450
Pour les classes de colonnes,

115
00:08:52,450 --> 00:08:59,162
nous pouvons spécifier comment la mise en page est faite pour différentes largeurs d'écran.

116
00:08:59,162 --> 00:09:04,735
Regardez les détails de ceci dans les diapositives suivantes plus tard.

117
00:09:04,735 --> 00:09:11,020
Mais permettez-moi d'attirer rapidement votre attention sur la façon dont nous spécifions les tailles de colonnes.

118
00:09:11,020 --> 00:09:13,655
Ils peuvent spécifier les tailles de colonne comme col,

119
00:09:13,655 --> 00:09:19,485
qui est l'une des classes qu'ils diront col-sm pour

120
00:09:19,485 --> 00:09:25,360
small et col-md pour medium et large et extra large et ainsi de suite.

121
00:09:25,360 --> 00:09:29,810
Maintenant, ces classes de colonnes sont utilisées pour spécifier

122
00:09:29,810 --> 00:09:38,260
exactement le nombre de colonnes d'une ligne que chaque élément de contenu occupera.

123
00:09:38,260 --> 00:09:40,015
Comment cela fonctionne-t-il ?

124
00:09:40,015 --> 00:09:42,215
On verra ça dans la diapositive suivante.

125
00:09:42,215 --> 00:09:45,565
Donc, pour revenir à notre grille Bootstrap,

126
00:09:45,565 --> 00:09:50,345
supposons que nous ayons un contenu et que nous voulons mettre en place la tranquillité du contenu.

127
00:09:50,345 --> 00:09:54,915
Nous pouvons spécifier que ce contenu est enfermé dans une autre div,

128
00:09:54,915 --> 00:09:57,815
à laquelle nous appliquons la classe de colonne,

129
00:09:57,815 --> 00:10:00,390
comme par exemple, col-sm-5.

130
00:10:00,390 --> 00:10:08,560
Donc, dans ce cas, ce que nous spécifions est que pour les tailles d'écran de petite à très grande taille,

131
00:10:08,560 --> 00:10:15,890
ce morceau de contenu occupera cinq colonnes sur ces 12 colonnes.

132
00:10:15,890 --> 00:10:17,505
Maintenant, vous allez me demander immédiatement,

133
00:10:17,505 --> 00:10:19,835
qu'en est-il du smockage supplémentaire ?

134
00:10:19,835 --> 00:10:23,465
S' il n'est pas explicitement spécifié pour la lockette intelligente supplémentaire

135
00:10:23,465 --> 00:10:27,120
par toute la largeur des 12 colonnes,

136
00:10:27,120 --> 00:10:31,575
ils peuvent spécifier explicitement à partir de

137
00:10:31,575 --> 00:10:38,135
quelle plage la disposition de colonne occupera le nombre de colonnes.

138
00:10:38,135 --> 00:10:39,890
Donc, dans ce cas particulier,

139
00:10:39,890 --> 00:10:42,470
quand je spécifie que je les appelle seulement sm-5,

140
00:10:42,470 --> 00:10:48,295
ce que je veux dire est que ce contenu particulier qui est enfermé à l'intérieur de ces div,

141
00:10:48,295 --> 00:10:52,375
occupera cinq colonnes pour toutes les tailles d'écran,

142
00:10:52,375 --> 00:10:56,595
de petit jusqu'à extra grand.

143
00:10:56,595 --> 00:11:00,595
Maintenant, nous voyons maintenant que sur les 12 colonnes,

144
00:11:00,595 --> 00:11:02,515
nous avons déjà occupé cinq colonnes.

145
00:11:02,515 --> 00:11:05,070
Il reste encore sept colonnes.

146
00:11:05,070 --> 00:11:09,925
Je pourrais prendre un autre morceau de contenu, puis le positionner à droite de ceci,

147
00:11:09,925 --> 00:11:14,085
en défendant un autre div, puis en appliquant la colonne sm-7.

148
00:11:14,085 --> 00:11:15,855
Maintenant, dans ce cas,

149
00:11:15,855 --> 00:11:18,065
vous voyez que 5 plus 7 est égal à 12.

150
00:11:18,065 --> 00:11:22,900
Ainsi, ces deux éléments de contenu qui sont enfermés dans les deux divs,

151
00:11:22,900 --> 00:11:25,530
seront maintenant positionnés côte à côte,

152
00:11:25,530 --> 00:11:30,070
et la somme totale d'entre eux occupe toute la largeur de la colonne 12.

153
00:11:30,070 --> 00:11:35,765
Donc, voici comment nous pouvons spécifier et le travail avec les 12 colonnes

154
00:11:35,765 --> 00:11:42,630
dans la définition de la mise en page du niveau actuel.

155
00:11:42,630 --> 00:11:46,960
Avec l'utilisation de la disposition CSS flex box,

156
00:11:46,960 --> 00:11:51,660
Bootstrap prend également en charge ce qu'on appelle les colonnes de mise en page automatique.

157
00:11:51,660 --> 00:11:52,905
Donc, dans ce cas,

158
00:11:52,905 --> 00:11:55,380
je peux simplement spécifier

159
00:11:55,380 --> 00:12:00,060
la colonne sm sans spécifier combien de colonnes il est censé occuper.

160
00:12:00,060 --> 00:12:07,570
Mais au cas où je spécifie trois colonnes de largeur de Doobs sm dans mon heml 5,

161
00:12:07,570 --> 00:12:13,575
alors la grille de bootstrap positionnera automatiquement ce contenu à l'intérieur de ces divs

162
00:12:13,575 --> 00:12:14,905
, côte à côte,

163
00:12:14,905 --> 00:12:18,875
de sorte que chacun d'eux obtient un tiers de la largeur totale.

164
00:12:18,875 --> 00:12:22,220
Donc, puisque nous avons 12 colonnes ici,

165
00:12:22,220 --> 00:12:26,045
chacune de ces trois aura quatre colonnes chacune.

166
00:12:26,045 --> 00:12:32,525
Et cela est automatiquement pris en charge par le mécanisme de mise en page des bootstraps.

167
00:12:32,525 --> 00:12:35,550
Maintenant, nous pouvons spécifier explicitement

168
00:12:35,550 --> 00:12:40,375
le nombre de colonnes qu'occupe un contenu particulier.

169
00:12:40,375 --> 00:12:45,625
Donc, par exemple, supposons que je spécifie trois classes de colonnes,

170
00:12:45,625 --> 00:12:49,565
mais la colonne du milieu je spécifie sm 6.

171
00:12:49,565 --> 00:12:52,615
Ensuite, ce qui se passe est, quand bootstrap fait

172
00:12:52,615 --> 00:12:55,760
la mise en page, le milieu occupera six colonnes,

173
00:12:55,760 --> 00:13:01,885
puis les parties gauche et droite du contenu occuperont tout ce qui reste.

174
00:13:01,885 --> 00:13:04,785
Donc, sur les 12 colonnes que nous avons,

175
00:13:04,785 --> 00:13:08,630
si 6 colonnes qui occupaient par le morceau du milieu de contenu,

176
00:13:08,630 --> 00:13:12,855
alors nous avons laissé avec nous 6 autres colonnes et qui seront également

177
00:13:12,855 --> 00:13:17,965
divisés entre le contenu et les deux côtés de cette colonne du milieu.

178
00:13:17,965 --> 00:13:23,585
Ainsi, chacun d'eux obtiendra des colonnes libres d'espace chacun.

179
00:13:23,585 --> 00:13:27,730
Donc, c'est ainsi que la mise en page est automatiquement effectuée avec Bootstrap.

180
00:13:27,730 --> 00:13:34,110
Dans l'exercice, nous allons voir diverses combinaisons d'utilisation de ce genre de

181
00:13:34,110 --> 00:13:43,680
spécifications du nombre de colonnes que chaque morceau de contenu occupera dans la mise en page des couleurs.

182
00:13:43,680 --> 00:13:49,135
Ce tableau résume la façon dont Bootstrap traite

183
00:13:49,135 --> 00:13:54,860
les différentes grilles d'écran et, en conséquence, comment vous identifiez ces grilles d'écran.

184
00:13:54,860 --> 00:13:57,095
Donc, comme je l'ai spécifié plus tôt,

185
00:13:57,095 --> 00:14:04,580
Bootstrap divise toute la plage de largeur de l'écran en 5 classes.

186
00:14:04,580 --> 00:14:12,890
Les très petits écrans sont ceux dont les grilles sont inférieures à 776 pixels. Les

187
00:14:12,890 --> 00:14:22,090
petits écrans sont ceux qui se situent entre 576 et moins de 768 pixels.

188
00:14:22,090 --> 00:14:25,600
Écrans moyens de 768 à 992,

189
00:14:25,600 --> 00:14:31,380
grands de 992 à 1200 et tout ce qui est d'environ 1200 pixels de largeur

190
00:14:31,380 --> 00:14:34,685
est traité comme un très grand écran.

191
00:14:34,685 --> 00:14:39,390
Donc, c'est ainsi que la grille Bootstrap par défaut est configurée.

192
00:14:39,390 --> 00:14:43,570
Maintenant, une fois que vous vous sentirez à l'aise avec Bootstrap,

193
00:14:43,570 --> 00:14:48,595
vous pouvez également configurer ces divisions vous-même.

194
00:14:48,595 --> 00:14:50,770
Mais pour ce cours,

195
00:14:50,770 --> 00:14:56,210
nous allons rester avec la configuration par défaut prise en charge par bootstrap.

196
00:14:56,210 --> 00:14:59,195
Maintenant, le comportement de la grille dans ce cas,

197
00:14:59,195 --> 00:15:01,825
est que tout ce qui est prévu pour extra small,

198
00:15:01,825 --> 00:15:04,885
sera horizontal à tout moment,

199
00:15:04,885 --> 00:15:09,235
pour les bits plus élevés, ils seront réduits à 2start largeur,

200
00:15:09,235 --> 00:15:13,040
mais horizontal autour des points de rupture.

201
00:15:13,040 --> 00:15:17,855
Nous verrons comment cela fonctionne dans un court moment avec quelques exemples.

202
00:15:17,855 --> 00:15:24,980
Maintenant, nous avons vu l'utilisation du conteneur dans la diapositive précédente.

203
00:15:24,980 --> 00:15:28,545
Pour les petits écrans,

204
00:15:28,545 --> 00:15:32,895
la largeur du conteneur est automatiquement déterminée par la largeur de l'écran.

205
00:15:32,895 --> 00:15:34,575
Mais pour les petits, moyens,

206
00:15:34,575 --> 00:15:36,045
grands et extra grands,

207
00:15:36,045 --> 00:15:39,425
la largeur du conteneur est telle que spécifiée.

208
00:15:39,425 --> 00:15:42,600
Donc, si vous utilisez le div avec un conteneur de classe,

209
00:15:42,600 --> 00:15:46,105
alors pour les petits écrans, il est de 540 pixels.

210
00:15:46,105 --> 00:15:52,330
Ainsi, vous remarquerez que si vous avez une largeur d'écran comprise entre 576 et 768,

211
00:15:52,330 --> 00:15:56,485
votre contenu sera disposé en 540 pixels,

212
00:15:56,485 --> 00:16:00,670
sera centré dans la largeur de l'écran.

213
00:16:00,670 --> 00:16:08,435
Ainsi, l'espace restant sera laissé sous forme de marges de chaque côté de ce contenu.

214
00:16:08,435 --> 00:16:12,795
De même, pour le moyen, il est de 720 pixels et ainsi de suite.

215
00:16:12,795 --> 00:16:17,640
Maintenant, vous spécifiez le nombre de colonnes que chaque contenu occupe.

216
00:16:17,640 --> 00:16:20,885
Ensuite, les préfixes de classe de colonne que vous utiliserez sont

217
00:16:20,885 --> 00:16:26,670
.col pour extra small, .col-sm pour small,

218
00:16:26,670 --> 00:16:29,420
tout le chemin vers extra large.

219
00:16:29,420 --> 00:16:31,625
Si vous spécifiez quelque chose avec .col-md,

220
00:16:31,625 --> 00:16:36,530
cela s'applique pour les écrans moyens à très grands.

221
00:16:36,530 --> 00:16:41,785
Donc, chaque fois que vous spécifiez un col- et certains nombres,

222
00:16:41,785 --> 00:16:47,895
cela s'applique à cette taille d'écran particulière et tout ce qui concerne cette taille d'écran.

223
00:16:47,895 --> 00:16:51,035
Maintenant, dans tous les cas de taille d'écran,

224
00:16:51,035 --> 00:16:54,955
le nombre de colonnes est défini comme étant de 12 colonnes.

225
00:16:54,955 --> 00:17:02,345
La grille en cas de bootstrap est conçue pour être de 12 colonnes et qui est configurable,

226
00:17:02,345 --> 00:17:04,830
mais la valeur par défaut est de 12 colonnes.

227
00:17:04,830 --> 00:17:10,355
La raison de choisir 12 est que 12 est un bon multiple de deux, trois,

228
00:17:10,355 --> 00:17:11,755
quatre et ainsi de suite.

229
00:17:11,755 --> 00:17:14,965
Cela vous donne donc beaucoup de flexibilité en termes de

230
00:17:14,965 --> 00:17:19,065
nombre de colonnes que vous choisissez pour mettre en page votre contenu.

231
00:17:19,065 --> 00:17:22,345
Entre chaque colonne, donc si vous

232
00:17:22,345 --> 00:17:25,510
disposez deux morceaux de contenu côte à côte avec leurs divs,

233
00:17:25,510 --> 00:17:31,035
entre ces deux morceaux de contenu, ils seront une petite gouttière qui sera laissée.

234
00:17:31,035 --> 00:17:37,255
Espace blanc vide qui sera laissé hors largeur de la largeur de la gouttière,

235
00:17:37,255 --> 00:17:41,030
qui est juste 30 pixels par défaut.

236
00:17:41,030 --> 00:17:45,855
Ainsi, 15 pixels proviennent d'un élément de contenu et 15 pixels d'un autre élément de contenu.

237
00:17:45,855 --> 00:17:48,600
SumTotal ensemble 30 pixels d'

238
00:17:48,600 --> 00:17:53,470
espace blanc seront laissés entre les deux morceaux de contenu.

239
00:17:53,470 --> 00:17:57,465
Pensez à la façon dont une mise en page de colonne de journal

240
00:17:57,465 --> 00:18:01,530
est faite et vous commencez à voir

241
00:18:01,530 --> 00:18:04,970
la correspondance entre la disposition de la colonne de journal est faite et comment

242
00:18:04,970 --> 00:18:10,815
la grille du bootstrap effectue la mise en page du contenu sur cette hauteur.

243
00:18:10,815 --> 00:18:14,725
La grille de Bootastrap vous permet de faire du contenu de niveau supérieur, de

244
00:18:14,725 --> 00:18:20,710
sorte que vous pouvez inclure du contenu dans le contenu, puis faire une mise en page de contenu imbriqué.

245
00:18:20,710 --> 00:18:23,790
En outre, il prend en charge les décalages.

246
00:18:23,790 --> 00:18:28,712
Nous verrons l'utilisation de décalages également dans quelques exemples plus tard.

247
00:18:28,712 --> 00:18:36,555
Regardons donc notre premier exemple de la façon dont vous appliqueriez des classes de colonnes bootstraps,

248
00:18:36,555 --> 00:18:41,515
et comment elles seraient réellement rendues sur différentes tailles d'écran.

249
00:18:41,515 --> 00:18:47,310
Voici un exemple d'une situation où j'ai appliqué aux deux divs,

250
00:18:47,310 --> 00:18:53,510
tiret de colonne 12, puis tiret de colonne sm trait cinq pour

251
00:18:53,510 --> 00:18:56,050
le morceau rouge de contenu et pour

252
00:18:56,050 --> 00:19:00,980
l'autre j'ai appliqué le tiret de colonne 12 et la colonne sm sept.

253
00:19:00,980 --> 00:19:06,045
Donc, la façon dont ce contenu sera disposé est pour des écrans très petits,

254
00:19:06,045 --> 00:19:10,690
les deux morceaux de contenu seront empilés l'un sur l'autre.

255
00:19:10,690 --> 00:19:15,450
Donc, le rouge sera empilé sur le dessus de la mer de couleur verte.

256
00:19:15,450 --> 00:19:19,010
Mais pour les écrans de petite à très grande taille,

257
00:19:19,010 --> 00:19:22,310
les deux morceaux de contenu seront disposés côte à côte.

258
00:19:22,310 --> 00:19:27,490
La raison en est que nous avons dit la colonne sm cinq et la colonne sm sept pour les deux.

259
00:19:27,490 --> 00:19:31,510
Donc, pour les petits à très grands, ils sont disposés côte à côte de sorte

260
00:19:31,510 --> 00:19:36,210
que le contenu rouge occupera les

261
00:19:36,210 --> 00:19:45,945
cinq colonnes les plus à gauche et le contenu vert de mer occupera

262
00:19:45,945 --> 00:19:50,440
les sept colonnes droites de votre rangée, de petits à très grands écrans.

263
00:19:50,440 --> 00:19:55,605
C' est ainsi que nous pourrions spécifier la mise en page du contenu pour différentes tailles d'écran.

264
00:19:55,605 --> 00:20:00,220
Bootstrap fournit également des classes supplémentaires appelées classes

265
00:20:00,220 --> 00:20:07,055
de tiret d'ordre qui vous permettent de réorganiser le contenu à l'écran.

266
00:20:07,055 --> 00:20:11,440
Ainsi, par exemple, si vous appliquez un ordre sm en premier,

267
00:20:11,440 --> 00:20:15,200
un ordre d'une dernière classe aux divs,

268
00:20:15,200 --> 00:20:19,265
comme cela est montré dans l'exemple ici, dans ce cas,

269
00:20:19,265 --> 00:20:26,160
le div pour lequel vous appliquez l'ordre sm last sera poussé vers

270
00:20:26,160 --> 00:20:29,390
le côté droit de l'écran et l'ordre

271
00:20:29,390 --> 00:20:33,125
sm first div sera poussé vers le côté gauche de la écran.

272
00:20:33,125 --> 00:20:38,570
Ainsi, l'application de ces classes d'ordre vous permet de réorganiser le contenu sur le script.

273
00:20:38,570 --> 00:20:45,000
Non seulement cela, l'ordre sm vous permet également de spécifier le même ordre sm un à l'

274
00:20:45,000 --> 00:20:51,750
ordre sm 12 pour spécifier l'ordre dans lequel le contenu doit être affiché à l'écran.

275
00:20:51,750 --> 00:20:53,850
Ainsi, en utilisant un nombre plus grand,

276
00:20:53,850 --> 00:20:57,395
vous pouvez déplacer le contenu vers le côté droit de

277
00:20:57,395 --> 00:21:01,795
la ligne et un nombre plus petit déplacera le contenu vers le côté gauche de la ligne.

278
00:21:01,795 --> 00:21:05,785
Nous en verrons un exemple également dans l'exercice.

279
00:21:05,785 --> 00:21:10,850
Le support intéressant mixte que Bootstrap Grid apporte avec l'utilisation de

280
00:21:10,850 --> 00:21:16,195
la mise en page Flexbox est l'alignement vertical du contenu.

281
00:21:16,195 --> 00:21:19,530
Les versions antérieures de Bootstrap,

282
00:21:19,530 --> 00:21:22,315
comme Bootstrap 3 et antérieures,

283
00:21:22,315 --> 00:21:27,915
n'avaient pas la possibilité de faire l'alignement vertical du contenu.

284
00:21:27,915 --> 00:21:34,870
Avec l'utilisation de la Flexbox pour la conception de la grille Bootstrap dans Bootstrap quatre,

285
00:21:34,870 --> 00:21:41,365
nous obtenons la flexibilité que CSS Flexbox apporte en termes d'alignement vertical.

286
00:21:41,365 --> 00:21:46,295
Donc, si vous vouliez que le contenu soit centré verticalement,

287
00:21:46,295 --> 00:21:48,370
alors à la ligne,

288
00:21:48,370 --> 00:21:52,765
vous appliqueriez la classe appelée « aligner les éléments centre ».

289
00:21:52,765 --> 00:21:55,585
Donc, dans ce cas, quel que soit le contenu prévu,

290
00:21:55,585 --> 00:22:00,750
sera disposé verticalement aligné dans cette ligne particulière.

291
00:22:00,750 --> 00:22:03,560
Ainsi, le contenu qui occupe

292
00:22:03,560 --> 00:22:08,780
la plus grande hauteur sera celui sur lequel les autres seront

293
00:22:08,780 --> 00:22:16,905
alignés lorsqu'il est disposé dans cette ligne ou si vous préspécifiez la hauteur de la ligne,

294
00:22:16,905 --> 00:22:24,935
alors tout le contenu sera centré verticalement dans cette ligne particulière là.

295
00:22:24,935 --> 00:22:30,795
Non seulement cela, la grille de Bootstrap prend également en charge l'alignement horizontal du contenu.

296
00:22:30,795 --> 00:22:32,400
Regardons un exemple.

297
00:22:32,400 --> 00:22:35,060
Donc, si vous spécifiez votre contenu comme celui-ci.

298
00:22:35,060 --> 00:22:40,320
Dites, vous avez trois colonnes et la première vous spécifiez la colonne de classe div trois,

299
00:22:40,320 --> 00:22:44,140
puis la colonne du milieu, vous direz la colonne de classe div auto.

300
00:22:44,140 --> 00:22:47,010
Je vais revenir à cette colonne auto dans un peu de temps.

301
00:22:47,010 --> 00:22:50,045
Et le bon dit div classe colonne 3.

302
00:22:50,045 --> 00:22:53,065
Donc, dans ce cas, ce que nous spécifions est que le contenu

303
00:22:53,065 --> 00:22:58,540
de gauche et le contenu le plus à droite occuperont trois colonnes chacune.

304
00:22:58,540 --> 00:23:02,120
Le milieu, quand je dis, « colonne auto »,

305
00:23:02,120 --> 00:23:07,200
cela signifie que le nombre de colonnes que cette div particulière

306
00:23:07,200 --> 00:23:14,090
occupe sera automatiquement déterminé par le contenu qui est enfermé à l'intérieur.

307
00:23:14,090 --> 00:23:16,840
Donc, en fonction du contenu,

308
00:23:16,840 --> 00:23:21,710
le nombre de colonnes occupées par le div s'ajustera automatiquement.

309
00:23:21,710 --> 00:23:25,070
Dans ce cas particulier, dans cette mise en page,

310
00:23:25,070 --> 00:23:31,040
ce contenu particulier est logé dans quatre colonnes.

311
00:23:31,040 --> 00:23:34,985
Donc maintenant, vous avez quatre colonnes utilisées par le div central,

312
00:23:34,985 --> 00:23:38,020
trois colonnes par la gauche et trois colonnes par la droite.

313
00:23:38,020 --> 00:23:40,650
Donc, somme totale, vous avez 10 colonnes.

314
00:23:40,650 --> 00:23:43,730
Donc, vous avez deux colonnes qui sont laissées vides.

315
00:23:43,730 --> 00:23:46,070
Maintenant, si vous spécifiez pour la ligne,

316
00:23:46,070 --> 00:23:50,165
vous spécifiez justifier le centre de contenu, alors,

317
00:23:50,165 --> 00:23:54,570
tout le contenu de cette ligne particulière sera centré par

318
00:23:54,570 --> 00:23:59,365
rapport à la ligne horizontale.

319
00:23:59,365 --> 00:24:02,080
Vous pouvez également avoir le contenu justifié à gauche,

320
00:24:02,080 --> 00:24:05,584
justifié à droite et quelques autres options.

321
00:24:05,584 --> 00:24:09,260
Les détails se trouvent dans la documentation d'amorçage.

322
00:24:09,260 --> 00:24:13,755
Bootstrap vous permet également de faire des décalages de colonne.

323
00:24:13,755 --> 00:24:16,725
Comment cela fonctionne-t-il ? Regardons un exemple.

324
00:24:16,725 --> 00:24:18,710
Dans ce décalage de colonne,

325
00:24:18,710 --> 00:24:21,320
nous pouvons spécifier un morceau de contenu,

326
00:24:21,320 --> 00:24:27,750
ajouter à cela si nous appliquons la classe comme tiret offset sm un trait d'union.

327
00:24:27,750 --> 00:24:33,585
Ce que nous spécifions est pour les petits et les très grands écrans,

328
00:24:33,585 --> 00:24:38,425
ce morceau de contenu doit être décalé à droite d'une colonne.

329
00:24:38,425 --> 00:24:41,970
Ainsi, lorsque ce contenu est disposé, comme vous pouvez le voir,

330
00:24:41,970 --> 00:24:49,560
la colonne la plus à gauche est vide et le contenu est décalé vers la droite d'une colonne.

331
00:24:49,560 --> 00:24:52,925
Et vous pouvez mettre en page le contenu restant sur le côté droit.

332
00:24:52,925 --> 00:24:55,860
Donc, somme totale, vous pouvez voir que les deux divs

333
00:24:55,860 --> 00:24:59,670
occuperont 11 colonnes mais une colonne décalée vers la droite. C'

334
00:24:59,670 --> 00:25:05,910
est ainsi que nous pouvons contrôler la mise en page du contenu en utilisant un décalage de colonne.

335
00:25:05,910 --> 00:25:07,380
Ainsi, comme vous pouvez

336
00:25:07,380 --> 00:25:11,280
le voir, en utilisant les spécifications de taille de colonne,

337
00:25:11,280 --> 00:25:13,540
l'alignement vertical et horizontal,

338
00:25:13,540 --> 00:25:15,975
le décalage, la poussée et la traction,

339
00:25:15,975 --> 00:25:18,635
et flex premier et flex dernier,

340
00:25:18,635 --> 00:25:23,925
nous sommes en mesure d'obtenir beaucoup de contrôle sur la façon dont nous mettons en page le

341
00:25:23,925 --> 00:25:29,825
contenu pour différentes largeurs d'écran et tailles d'écran différentes .

342
00:25:29,825 --> 00:25:36,800
Bootstrap va encore plus loin en vous permettant d'imbriquer du contenu dans les divs.

343
00:25:36,800 --> 00:25:39,585
Ainsi, par exemple, si vous spécifiez deux divs,

344
00:25:39,585 --> 00:25:43,130
comme vous le voyez avec la colonne sm cinq et

345
00:25:43,130 --> 00:25:45,725
la colonne sm sept, les deux contenus seront disposés comme vu ici.

346
00:25:45,725 --> 00:25:48,265
Maintenant, à l'intérieur de la div droite,

347
00:25:48,265 --> 00:25:50,630
je peux à nouveau aller et diviser la

348
00:25:50,630 --> 00:25:58,080
largeur de cette div en une rangée, puis cette ligne me donnera automatiquement

349
00:25:58,080 --> 00:26:04,960
12 autres colonnes pour cette partie de l'écran et ensuite je peux faire la mise en page en utilisant l'

350
00:26:04,960 --> 00:26:13,330
imbrication des divs et faire la mise en page pour différentes parties de cette colonne .

351
00:26:13,330 --> 00:26:15,595
Donc, imbriquer comme ça,

352
00:26:15,595 --> 00:26:23,570
vous apporte encore plus de flexibilité dans la façon dont vous disposez le contenu dans votre pitch.

353
00:26:23,570 --> 00:26:27,910
Avec toute la discussion sur le système de grille Bootstrap et

354
00:26:27,910 --> 00:26:34,280
la façon dont la grille Bootstrap prend en charge diverses façons de

355
00:26:34,280 --> 00:26:39,670
mettre en page le contenu, nous allons maintenant passer à notre prochaine série d'exercices.

356
00:26:39,670 --> 00:26:45,820
Nous allons appliquer la grille Bootstrap à notre page index.html

357
00:26:45,820 --> 00:26:52,770
afin de faire la mise en page du contenu à l'intérieur ou de la page index.html.

358
00:26:52,770 --> 00:26:57,350
Nous allons également utiliser des classes CSS personnalisées.