1 00:00:03,730 --> 00:00:06,755 Dans les conférences précédentes, 2 00:00:06,755 --> 00:00:12,055 nous avons appris le design responsive et le système de grille d'amorçage. 3 00:00:12,055 --> 00:00:18,050 Nous avons vu comment la grille bootstrap nous permet de concevoir des sites web réactifs. 4 00:00:18,050 --> 00:00:21,890 Il est temps pour nous de passer à l'exercice suivant. 5 00:00:21,890 --> 00:00:27,755 Nous allons commencer à travailler avec la page html d'index que nous avons créée dans 6 00:00:27,755 --> 00:00:34,945 notre exercice précédent et appliquer les classes de grille d'amorçage pour la rendre réactive. En 7 00:00:34,945 --> 00:00:40,760 regardant rapidement notre page web dans le navigateur, nous voyons que 8 00:00:40,760 --> 00:00:46,415 c'est encore terrible bien que les polices se soient améliorées un peu, 9 00:00:46,415 --> 00:00:50,645 et nous utilisons maintenant les polices par défaut bootstraps. 10 00:00:50,645 --> 00:01:00,930 Essayons maintenant d'appliquer les classes de grille bootstrap à index.html pour améliorer sa mise en page. 11 00:01:00,930 --> 00:01:03,805 Aller à la page index.html, 12 00:01:03,805 --> 00:01:07,960 permettez-moi d'attirer rapidement votre attention sur cette ligne particulière dans la 13 00:01:07,960 --> 00:01:12,805 page index.html que nous avons déjà inclus dans l'exercice précédent. 14 00:01:12,805 --> 00:01:14,660 J' avais parlé de cette ligne, 15 00:01:14,660 --> 00:01:17,065 puis nous parlions du système de grille d'amorçage. 16 00:01:17,065 --> 00:01:23,895 Donc, ici, nous voyons que nous avons spécifié les balises méta avec un port de vue et le contenu, la 17 00:01:23,895 --> 00:01:26,090 largeur comme largeur de l'appareil, 18 00:01:26,090 --> 00:01:29,205 et l'échelle initiale un et rétrécir pour s'adapter à no. 19 00:01:29,205 --> 00:01:33,210 Donc, cette balise meta nous permet de rendre 20 00:01:33,210 --> 00:01:39,225 notre page web réactive en regardant le caractère du port de vue. 21 00:01:39,225 --> 00:01:42,630 Aller de l'avant à l'étape suivante. 22 00:01:42,630 --> 00:01:49,080 Nous allons descendre dans le corps de cette page index.html, 23 00:01:49,080 --> 00:01:54,570 puis rechercher le premier div qui vient juste en dessous de la balise d'en-tête là-bas, 24 00:01:54,570 --> 00:02:00,480 à ce div, vous allez appliquer le conteneur de classe. 25 00:02:00,480 --> 00:02:05,550 Nous avons déjà appris sur la classe de conteneur dans la conférence précédente. 26 00:02:05,550 --> 00:02:09,125 Donc, une fois que nous appliquons la classe conteneur, 27 00:02:09,125 --> 00:02:12,410 puis en regardant notre page web, nous voyons 28 00:02:12,410 --> 00:02:16,620 qu'une partie du contenu s'est déjà adaptée. 29 00:02:16,620 --> 00:02:23,080 Regardez la différence entre le contenu ici et celui ci-dessous. 30 00:02:23,080 --> 00:02:25,370 Maintenant, ce contenu ci-dessous, 31 00:02:25,370 --> 00:02:30,960 est dans le pied de page de notre page index.html et ce contenu est dans l'en-tête. 32 00:02:30,960 --> 00:02:36,890 Mais ce contenu au milieu est le contenu réel de notre page Web, 33 00:02:36,890 --> 00:02:40,785 c'est-à-dire à l'intérieur de la div à laquelle nous appliquons le conteneur. 34 00:02:40,785 --> 00:02:47,480 Donc, en appliquant la classe de conteneur, vous pouvez immédiatement voir que la largeur de la page dans 35 00:02:47,480 --> 00:02:50,700 laquelle notre contenu est disposé a maintenant 36 00:02:50,700 --> 00:02:54,660 diminué et que vous avez un peu d'espace supplémentaire de chaque côté, 37 00:02:54,660 --> 00:02:58,935 donc avec cette largeur de conteneur étant un conteneur de taille fixe, 38 00:02:58,935 --> 00:03:02,330 notre contenu sera fixé à ce largeur particulière sur 39 00:03:02,330 --> 00:03:07,425 l'écran laissant suffisamment de marge de chaque côté comme espace blanc. 40 00:03:07,425 --> 00:03:13,315 Appliquons la même classe de conteneur à la fois à l'en-tête et au pied de page également, 41 00:03:13,315 --> 00:03:17,355 puis voyons comment le contenu change. 42 00:03:17,355 --> 00:03:20,200 Pour revenir à notre page Web, 43 00:03:20,200 --> 00:03:24,940 ce que je vais faire maintenant est pour le contenu interne ici, 44 00:03:24,940 --> 00:03:28,165 la div interne à l'intérieur du conteneur, 45 00:03:28,165 --> 00:03:34,110 je vais appliquer la classe en tant que classe de ligne ici, 46 00:03:34,110 --> 00:03:35,885 à ce premier, 47 00:03:35,885 --> 00:03:38,125 et je vais simplement copier ceci. 48 00:03:38,125 --> 00:03:44,675 Je vais appliquer la même chose à la deuxième div ici qui est aligné pour le div, 49 00:03:44,675 --> 00:03:49,230 et aussi faire défiler vers le bas et ensuite à la troisième div ici, 50 00:03:49,230 --> 00:03:51,375 j'applique également la classe de ligne ici. 51 00:03:51,375 --> 00:03:56,110 Donc maintenant, le contenu à l'intérieur de cette classe de conteneur externe, 52 00:03:56,110 --> 00:03:57,950 est maintenant divisé en trois lignes, 53 00:03:57,950 --> 00:04:01,395 donc tout ce qui est à l'intérieur ici sera une ligne, 54 00:04:01,395 --> 00:04:02,640 ce qui est à l'intérieur ici, 55 00:04:02,640 --> 00:04:06,150 sera la deuxième rangée et celle ici sera la troisième rangée. 56 00:04:06,150 --> 00:04:10,380 Nous appliquerons plus tard les classes de colonne à cela. 57 00:04:10,380 --> 00:04:17,695 Passons maintenant à l'en-tête dans le corps de notre index.html. 58 00:04:17,695 --> 00:04:23,970 Et à l'en-tête, je vais appliquer une classe appelée jumbotron. 59 00:04:23,970 --> 00:04:28,265 Le composant jumbotron vous permet de 60 00:04:28,265 --> 00:04:33,805 distinguer le contenu à l'intérieur du jumbotron du reste de la page. 61 00:04:33,805 --> 00:04:39,035 Nous verrons le résultat dans un court laps de temps lorsque nous à la page web résultante. 62 00:04:39,035 --> 00:04:42,215 Maintenant, à la div à l'intérieur de cet en-tête, 63 00:04:42,215 --> 00:04:46,360 je vais appliquer la classe en tant que conteneur, de 64 00:04:46,360 --> 00:04:49,410 sorte que tout ce qui est à l'intérieur du contenu 65 00:04:49,410 --> 00:04:52,945 sera maintenant limité par la largeur du conteneur là-bas. 66 00:04:52,945 --> 00:04:57,670 De même, en descendant au pied de page ici, 67 00:04:58,780 --> 00:05:01,650 dans le pied de page aussi, 68 00:05:01,650 --> 00:05:04,720 le premier div à l'intérieur du pied de page, 69 00:05:04,720 --> 00:05:09,360 je vais appliquer la classe en tant que conteneur. 70 00:05:09,360 --> 00:05:13,055 Et la div à l'intérieur, 71 00:05:13,055 --> 00:05:16,755 je vais appliquer la classe comme rangée là-bas, 72 00:05:16,755 --> 00:05:19,735 à la div à l'intérieur là-bas. 73 00:05:19,735 --> 00:05:25,225 Donc, cette div nous mènera tout le chemin à cette div particulière ici. 74 00:05:25,225 --> 00:05:29,105 Et puis le div suivant aussi qui est juste en dessous, 75 00:05:29,105 --> 00:05:31,820 je vais appliquer la classe comme ligne. 76 00:05:31,820 --> 00:05:35,380 Donc maintenant mon pied de page contient deux lignes ici, 77 00:05:35,380 --> 00:05:38,520 nous allons styler le contenu en utilisant la colonne, les 78 00:05:38,520 --> 00:05:40,110 classes dans un court laps de temps. 79 00:05:40,110 --> 00:05:42,365 Aller à l'en-tête aussi, 80 00:05:42,365 --> 00:05:51,500 j'appliquerai la classe de ligne à la deuxième div à l'intérieur du conteneur div ici. 81 00:05:51,500 --> 00:05:54,920 Donc, ce div qui correspond à ce que j'ai, 82 00:05:54,920 --> 00:05:58,605 sera une seule ligne dans l'en-tête. 83 00:05:58,605 --> 00:06:02,400 Jetons un coup d'oeil à notre page web qui en résulte. En 84 00:06:02,400 --> 00:06:04,365 allant sur notre page Web, 85 00:06:04,365 --> 00:06:09,300 vous pouvez maintenant voir que le contenu de l'en-tête est maintenant séparé du 86 00:06:09,300 --> 00:06:14,935 reste à l'intérieur de cette boîte grise en haut. 87 00:06:14,935 --> 00:06:22,735 Mais le contenu lui-même est maintenant aligné avec le contenu ci-dessous ici. 88 00:06:22,735 --> 00:06:25,685 Maintenant, c'est le résultat de l'utilisation du conteneur. 89 00:06:25,685 --> 00:06:27,550 En passant au pied de page, 90 00:06:27,550 --> 00:06:32,635 vous pouvez maintenant voir que le contenu du pied de page est également aligné à l'intérieur du conteneur. 91 00:06:32,635 --> 00:06:36,800 Mais la page n'a toujours pas l'air génial, 92 00:06:36,800 --> 00:06:44,705 nous allons maintenant appliquer les classes de colonne aux divs internes maintenant. 93 00:06:44,705 --> 00:06:48,665 Pour revenir à la page index.html, 94 00:06:48,665 --> 00:06:51,865 nous allons maintenant commencer à appliquer les classes de colonne. 95 00:06:51,865 --> 00:06:58,365 Donc, en allant à l'en-tête, à la deuxième div interne à l'intérieur du jumbotron ici, 96 00:06:58,365 --> 00:07:06,230 laissez-moi appliquer une classe en tant que colonne 12, colonne sm-6. 97 00:07:06,230 --> 00:07:09,960 Donc, ici le contenu de 98 00:07:09,960 --> 00:07:15,525 cette première div occupera toute la ligne pour les tailles d'écran extra petites, 99 00:07:15,525 --> 00:07:18,770 puis occupera la moitié de la ligne, c'est pourquoi la colonne 100 00:07:18,770 --> 00:07:24,235 sm-6 pour les tailles d'écran petites à extra grandes. 101 00:07:24,235 --> 00:07:26,480 Maintenant, de même pour la deuxième div ici, 102 00:07:26,480 --> 00:07:28,715 bien qu'il ne contient aucun contenu là, 103 00:07:28,715 --> 00:07:37,840 je vais définir les classes de colonne ici comme colonne 12, puis colonne sm. 104 00:07:37,840 --> 00:07:40,990 Donc, notez qu'ici en spécifiant la colonne 12, 105 00:07:40,990 --> 00:07:45,270 j'affirme explicitement que pour les tailles d'écran extra petites, quel que soit le contenu de 106 00:07:45,270 --> 00:07:49,860 ce div sera empilé en dessous du contenu ici. 107 00:07:49,860 --> 00:07:54,150 Et puis pour les tailles d'écran de petite à très grande taille, 108 00:07:54,150 --> 00:07:59,270 ce contenu occupera la quantité restante de 109 00:07:59,270 --> 00:08:04,925 colonnes dans la rangée pour les tailles d'écran de petite à très grande taille. 110 00:08:04,925 --> 00:08:09,255 Donc ici, dans ce cas, puisque six colonnes sont occupées par ce contenu, 111 00:08:09,255 --> 00:08:12,745 cela obtiendra les six colonnes restantes là-bas. 112 00:08:12,745 --> 00:08:18,030 En descendant vers les lignes de contenu ici, 113 00:08:18,030 --> 00:08:20,110 pour le contenu ici, 114 00:08:20,110 --> 00:08:22,860 donc pour ce premier contenu, 115 00:08:22,860 --> 00:08:24,590 qui est une étiquette ici, 116 00:08:24,590 --> 00:08:29,240 je vais appliquer les classes comme colonne 12, 117 00:08:29,240 --> 00:08:34,985 colonne sm-4, colonne md-3. 118 00:08:34,985 --> 00:08:39,770 Donc, en indiquant que pour les tailles d'écran extra petites, 119 00:08:39,770 --> 00:08:42,650 cela occupera toute la rangée, pour les petites, 120 00:08:42,650 --> 00:08:44,160 il occupera des colonnes pleines, 121 00:08:44,160 --> 00:08:46,585 puis pour les moyennes à extra grandes, 122 00:08:46,585 --> 00:08:50,395 il occupera trois colonnes dans la rangée. 123 00:08:50,395 --> 00:08:56,810 Maintenant, donc la partie restante sera occupée par le contenu ci-dessous, 124 00:08:56,810 --> 00:09:00,575 donc à cela, j'appliquerai les classes en tant que col, 125 00:09:00,575 --> 00:09:05,715 indiquant que cela sera empilé en dessous 126 00:09:05,715 --> 00:09:11,025 du contenu ici dans les tailles d'écran extra petites, 127 00:09:11,025 --> 00:09:12,690 puis je dirai la colonne sm, 128 00:09:12,690 --> 00:09:16,940 ce qui signifie que cela occupera le huit colonnes restantes ici, 129 00:09:16,940 --> 00:09:19,300 parce que quatre colonnes sont prises par celle-ci, 130 00:09:19,300 --> 00:09:22,360 et ensuite nous dirons colonne md, 131 00:09:22,360 --> 00:09:24,320 ce qui signifie que cela occupera 132 00:09:24,320 --> 00:09:27,300 les neuf colonnes restantes parce que trois colonnes sont prises 133 00:09:27,300 --> 00:09:33,230 pour les tailles d'écran moyennes à très grandes par le contenu ci-dessus ici. 134 00:09:33,230 --> 00:09:37,810 Maintenant que j'ai défini pour la première ligne de contenu, 135 00:09:37,810 --> 00:09:43,070 je vais prendre la même application de classe de colonne ici, 136 00:09:43,070 --> 00:09:49,415 puis l'appliquer à la deuxième ligne ici, 137 00:09:49,415 --> 00:09:52,345 et aussi à la troisième ligne de contenu ici. 138 00:09:52,345 --> 00:09:57,240 De même, je vais copier celui-ci, puis appliquer la même chose 139 00:09:57,240 --> 00:10:04,690 aux divs de contenu ci-dessous ici. 140 00:10:04,690 --> 00:10:11,950 Donc maintenant, nous avons configuré à la fois l'en-tête et les colonnes de contenu là-bas. 141 00:10:11,950 --> 00:10:14,690 Passons maintenant au pied de page. 142 00:10:14,690 --> 00:10:21,260 Dans le pied de page, vous remarquerez que cette div contient trois divs internes ici, 143 00:10:21,260 --> 00:10:23,720 donc pour chacun de ces trois divs internes ici, 144 00:10:23,720 --> 00:10:26,570 je vais appliquer les classes de colonne correspondantes. 145 00:10:26,570 --> 00:10:27,680 Donc, pour le premier, 146 00:10:27,680 --> 00:10:35,280 qui contient des liens vers les différentes pages qui feront partie de ce site, 147 00:10:35,280 --> 00:10:38,395 je vais appliquer une classe de colonne, 148 00:10:38,395 --> 00:10:46,045 comme colonne quatre, colonne sm-2 ici. 149 00:10:46,045 --> 00:10:50,840 Donc, pour les tailles d'écran très petites, 150 00:10:50,840 --> 00:10:55,320 cela occupera quatre colonnes et pour les petites à très grandes, 151 00:10:55,320 --> 00:10:58,660 il n'occupera que deux colonnes ici. 152 00:10:59,040 --> 00:11:01,790 Ensuite, pour le second, 153 00:11:01,790 --> 00:11:08,425 le deuxième div là-dedans, j'appliquerai les classes en tant que colonne sept. 154 00:11:08,425 --> 00:11:12,050 Donc, notez que j'ai quatre ici et puis sept ici, de 155 00:11:12,050 --> 00:11:14,755 sorte que total occupe 11 colonnes. 156 00:11:14,755 --> 00:11:16,430 J' ai laissé une colonne vide. 157 00:11:16,430 --> 00:11:21,520 Je reviendrai plus tard pour appliquer un décalage pour prendre soin de la colonne supplémentaire. 158 00:11:21,520 --> 00:11:23,400 Donc c'est la colonne sept, 159 00:11:23,400 --> 00:11:31,345 puis col-sm-5 à la seconde. 160 00:11:31,345 --> 00:11:33,630 Donc c'est deux plus cinq, sept. 161 00:11:33,630 --> 00:11:36,390 Donc, il me reste encore cinq colonnes, 162 00:11:36,390 --> 00:11:40,685 que je peux utiliser pour le troisième div ici. 163 00:11:40,685 --> 00:11:44,610 Maintenant, pour les tailles d'écran extra petites, 164 00:11:44,610 --> 00:11:47,700 ces deux contenus seront positionnés côte à côte, 165 00:11:47,700 --> 00:11:52,080 puis cette div qui contient des liens vers 166 00:11:52,080 --> 00:11:58,585 un site de médias sociaux sera dans une rangée séparée empilée ci-dessous. 167 00:11:58,585 --> 00:12:04,390 Mais pour les tailles d'écran de petite à très grande taille, 168 00:12:04,390 --> 00:12:07,680 la première occupera deux colonnes, 169 00:12:07,680 --> 00:12:10,240 la seconde occupera cinq et le reste sera 170 00:12:10,240 --> 00:12:13,545 pris en charge par les liens de médias sociaux ici. 171 00:12:13,545 --> 00:12:15,230 Donc pour le troisième, 172 00:12:15,230 --> 00:12:18,650 je vais appliquer la classe 173 00:12:18,650 --> 00:12:26,515 comme col-12 col-sm-4 ici. 174 00:12:26,515 --> 00:12:32,625 Donc col-12 col-sm-4, ce qui signifie que cela occupera 175 00:12:32,625 --> 00:12:37,090 un ensemble séparé de 12 colonnes 176 00:12:37,090 --> 00:12:42,310 empilées en dessous du contenu précédent pour les tailles d'écran très petites, 177 00:12:42,310 --> 00:12:45,040 mais pour les petites à très grandes, il occupera quatre colonnes. 178 00:12:45,040 --> 00:12:46,815 Donc nous voilà quatre plus cinq, 179 00:12:46,815 --> 00:12:48,430 neuf plus deux 11. 180 00:12:48,430 --> 00:12:52,635 Donc, une colonne reste encore pour les petites à très grandes. 181 00:12:52,635 --> 00:12:57,510 Donc, c'est comme ça que je vais appliquer la colonne la plus proche de cela. 182 00:12:57,510 --> 00:13:03,250 Maintenant, nous avons encore celui ci-dessous où nous contiendrons les droits d'auteur à cela. 183 00:13:03,250 --> 00:13:08,745 Je vais appliquer la classe en tant que colonne automatique, 184 00:13:08,745 --> 00:13:12,050 ce qui signifie que ce contenu occupera 185 00:13:12,050 --> 00:13:15,515 juste assez de colonnes comme l'exige le contenu là-bas. 186 00:13:15,515 --> 00:13:20,405 Plus tard, vous verrez que je vais positionner ce contenu au centre de 187 00:13:20,405 --> 00:13:26,385 l'écran en utilisant ainsi une autre classe CSS bootstrap. 188 00:13:26,385 --> 00:13:29,035 Nous y reviendrons dans le prochain exercice. 189 00:13:29,035 --> 00:13:33,405 Donc, avec cela, nous avons appliqué diverses classes de colonne à l'en-tête, 190 00:13:33,405 --> 00:13:35,880 le contenu et le pied de page. 191 00:13:35,880 --> 00:13:39,280 C' est un bon moment pour nous d'enregistrer les modifications, puis aller 192 00:13:39,280 --> 00:13:43,475 jeter un oeil à la page indexée ou HTML mise à jour. En 193 00:13:43,475 --> 00:13:46,690 regardant notre page index.html, 194 00:13:46,690 --> 00:13:51,315 vous remarquerez comment dans l'en-tête qui est le Jumbotron, 195 00:13:51,315 --> 00:13:55,145 le contenu occupe maintenant seulement la moitié de l'écran là-bas. 196 00:13:55,145 --> 00:14:00,210 L' autre moitié de l'écran de cette ligne particulière est maintenant laissée vide. 197 00:14:00,210 --> 00:14:03,180 En descendant aux lignes de contenu, 198 00:14:03,180 --> 00:14:07,685 vous voyez que l'étiquette sur le côté gauche occupe 199 00:14:07,685 --> 00:14:14,280 trois ou quatre colonnes en fonction de la taille de l'écran utilisé, 200 00:14:14,280 --> 00:14:18,250 et le reste étant occupé par le reste du contenu. 201 00:14:18,250 --> 00:14:19,780 Donc, ici, nous avons une rangée, 202 00:14:19,780 --> 00:14:21,770 la deuxième rangée, et la troisième rangée. 203 00:14:21,770 --> 00:14:26,330 Et puis le pied de page ici vous pouvez voir que les liens sont sur le côté gauche, 204 00:14:26,330 --> 00:14:28,065 les autres au milieu, 205 00:14:28,065 --> 00:14:31,150 puis les liens de médias sociaux sur le côté droit. 206 00:14:31,150 --> 00:14:35,460 Donc, c'est pour un écran de taille moyenne. 207 00:14:35,460 --> 00:14:42,765 Maintenant, si vous voulez regarder la même vue pour une taille d'écran extra petite ou petite, 208 00:14:42,765 --> 00:14:45,045 si vous utilisez Chrome, 209 00:14:45,045 --> 00:14:47,960 alors Chrome a les outils de développement que vous pouvez 210 00:14:47,960 --> 00:14:51,010 activer en cliquant sur les outils de développement de vue, 211 00:14:51,010 --> 00:14:53,105 et lorsque les outils de développement viennent, 212 00:14:53,105 --> 00:14:56,890 vous remarquerez, laissez-moi réduire la taille ici. 213 00:14:56,890 --> 00:15:00,930 Vous remarquerez ce petit aux fenêtres là-bas. 214 00:15:00,930 --> 00:15:06,500 Donc, en cliquant sur ce qui va activer la vue responsive pour ces sites là. 215 00:15:06,500 --> 00:15:15,680 Donc, vous pouvez voir que ici la vue de cette même page web sur un pixel à site, 216 00:15:15,680 --> 00:15:19,300 qui est 411 par 731 en mode portrait, 217 00:15:19,300 --> 00:15:22,805 ce qui correspond à une taille d'écran extra petite, de 218 00:15:22,805 --> 00:15:25,300 sorte que vous pouvez voir comment le contenu est disposé. 219 00:15:25,300 --> 00:15:28,145 Ainsi, vous pouvez voir le contenu Jumbotron 220 00:15:28,145 --> 00:15:31,745 ici, puis la partie restante du contenu ci-dessous. 221 00:15:31,745 --> 00:15:34,585 Et puis jusqu'au pied de page. 222 00:15:34,585 --> 00:15:40,500 Ainsi, dans le pied de page, vous pouvez voir comment les liens et l'annonce ont été disposés côte à côte. 223 00:15:40,500 --> 00:15:45,880 Réduire maintenant la taille de l'écran afin que nous puissions voir comment ce pied de page est disposé ici. 224 00:15:45,880 --> 00:15:48,735 Donc, la partie restante, vous avez les liens sur le côté gauche, 225 00:15:48,735 --> 00:15:51,470 vous avez l'adresse sur le côté droit, 226 00:15:51,470 --> 00:15:56,515 puis les liens de médias sociaux ci-dessous dans une rangée séparée ici, 227 00:15:56,515 --> 00:15:59,775 puis le droit d'auteur en bas là. 228 00:15:59,775 --> 00:16:04,935 C' est donc la vue intéressante que nous voyons pour les tailles d'écran extra petites. 229 00:16:04,935 --> 00:16:07,450 Pour revenir à notre code ici, 230 00:16:07,450 --> 00:16:11,710 je vais maintenant appliquer les classes d'ordre et de décalage à 231 00:16:11,710 --> 00:16:17,255 ce contenu afin d'afficher le contenu d'une manière légèrement différente. 232 00:16:17,255 --> 00:16:21,850 Donc, en allant à la ligne de contenu ici, 233 00:16:21,850 --> 00:16:27,820 pour les deux divs ici qui contiennent le contenu, 234 00:16:27,820 --> 00:16:32,020 je vais appliquer les classes comme 235 00:16:32,020 --> 00:16:40,150 order-sm-last pour la première ligne ici. 236 00:16:40,150 --> 00:16:50,120 Et puis pour celui-là en bas, je vais appliquer l'ordre sm d'abord à la ligne en bas ici. 237 00:16:50,120 --> 00:16:53,300 Donc, ce qui signifie que lorsque ce contenu est affiché, 238 00:16:53,300 --> 00:16:56,090 ce contenu sera tiré sur le côté gauche de l'écran, puis 239 00:16:56,090 --> 00:16:58,880 cette colonne sera poussée vers le côté droit de l'écran. 240 00:16:58,880 --> 00:17:02,400 Donc, cela sera commandé sur le côté droit et cela sera commandé sur le côté gauche. 241 00:17:02,400 --> 00:17:08,075 Comme je l'ai expliqué sur les clauses d'ordre dans la conférence précédente. 242 00:17:08,075 --> 00:17:09,880 De même à partir de la deuxième ligne, 243 00:17:09,880 --> 00:17:13,330 je vais le laisser en tant que tel mais à partir de la troisième ligne, je vais appliquer 244 00:17:13,330 --> 00:17:17,240 le même ensemble de classes d'ordre. 245 00:17:17,240 --> 00:17:20,290 Donc, je vais aller à la troisième ligne ici, 246 00:17:20,290 --> 00:17:25,425 puis appliquer l'order-sm-last à celui-ci, 247 00:17:25,425 --> 00:17:30,850 et ensuite j'appliquerai l'order-sm-first à celui-ci. 248 00:17:31,460 --> 00:17:36,450 Et donc celui-ci sera à nouveau réorganisé de 249 00:17:36,450 --> 00:17:38,300 telle sorte que ce contenu apparaîtra sur 250 00:17:38,300 --> 00:17:40,870 le côté gauche et ce contenu apparaîtra sur le côté droit. 251 00:17:40,870 --> 00:17:46,640 C' est juste une façon de positionner le contenu d'une manière un peu plus intéressante. 252 00:17:46,640 --> 00:17:50,210 Maintenant, en descendant dans le pied de page ici, 253 00:17:50,210 --> 00:17:54,690 maintenant je vais appliquer une classe de décalage ici. 254 00:17:54,690 --> 00:18:00,440 Notez donc que j'ai mentionné que ces deux colonnes occuperont quatre plus sept, 11. 255 00:18:00,440 --> 00:18:02,130 Donc, une colonne est restée. 256 00:18:02,130 --> 00:18:07,295 Donc, je vais appliquer une classe offset-1 à celle-ci. 257 00:18:07,295 --> 00:18:12,320 Donc, ce qui signifie que ce contenu sur cette div sera poussé juste par une colonne ici. 258 00:18:12,320 --> 00:18:14,710 De même, puisque je l'ai dit offset un, 259 00:18:14,710 --> 00:18:23,145 cela sera appliqué à extra petit tout le chemin jusqu'aux tailles d'écran extra grand. 260 00:18:23,145 --> 00:18:28,235 Et c'est donc l'utilisation de la classe offset. 261 00:18:28,235 --> 00:18:30,060 Alors maintenant que nous avons fait les changements, 262 00:18:30,060 --> 00:18:36,285 sauvegardons les changements et puis allons jeter un oeil à notre page Web dans le navigateur. 263 00:18:36,285 --> 00:18:38,430 Pour revenir à ce navigateur, 264 00:18:38,430 --> 00:18:43,715 vous voyez maintenant comment l'en-tête est comme avant, 265 00:18:43,715 --> 00:18:46,850 mais dans la première ligne de contenu, 266 00:18:46,850 --> 00:18:49,090 vous voyez que ce contenu a été poussé vers 267 00:18:49,090 --> 00:18:51,925 le côté gauche et l'étiquette vers le côté droit. 268 00:18:51,925 --> 00:18:56,090 La deuxième rangée est différente a été maintenue comme avant. 269 00:18:56,090 --> 00:18:58,330 Mais pour la troisième, vous verrez que cela a été 270 00:18:58,330 --> 00:19:00,780 poussé vers la droite et cela a été poussé vers la gauche. 271 00:19:00,780 --> 00:19:06,900 C' est donc l'utilisation de la classe order-sm-last et order-sm-first est là. 272 00:19:06,900 --> 00:19:08,530 Maintenant, en allant au pied de page, 273 00:19:08,530 --> 00:19:18,195 vous voyez maintenant que le contenu de la première div ici a été poussé à droite par une colonne,. 274 00:19:18,195 --> 00:19:21,560 Vous pouvez donc voir qu'il y a une colonne d'espaces ici, 275 00:19:21,560 --> 00:19:27,790 et cela n'est pas poussé à droite et les autres ont été formatés en conséquence. 276 00:19:27,790 --> 00:19:32,235 Donc, avec cela, nous complétons les modifications apportées 277 00:19:32,235 --> 00:19:37,790 à notre page index.html ou page supplémentaire pour cet exercice particulier. 278 00:19:37,790 --> 00:19:41,665 Avec cela, nous complétons cet exercice particulier. 279 00:19:41,665 --> 00:19:46,235 Dans cet exercice, nous avons examiné l'utilisation des 280 00:19:46,235 --> 00:19:53,800 classes de conteneur, de ligne et de colonne afin de concevoir notre page Web un peu plus agréable. 281 00:19:53,800 --> 00:19:57,705 Dans la deuxième partie de l'exercice qui suivra, 282 00:19:57,705 --> 00:20:04,680 nous allons en ajouter d'autres pour essayer d'améliorer la façon dont ces pages Web sont rendues. 283 00:20:04,680 --> 00:20:08,375 Ce n'est toujours pas à ma satisfaction. 284 00:20:08,375 --> 00:20:12,920 De toute évidence, il y a encore des possibilités d'amélioration. 285 00:20:12,920 --> 00:20:16,290 Cela peut être un bon moment pour vous de faire un commentaire git avec 286 00:20:16,290 --> 00:20:21,470 le message Bootstrap Grid Part One.