1 00:00:03,800 --> 00:00:07,660 Nous continuerons avec l'exercice de la grille d'amorçage 2 00:00:07,660 --> 00:00:11,074 que nous avons commencé lors de l'exercice précédent. 3 00:00:11,074 --> 00:00:14,535 Nous allons faire quelques choses supplémentaires à notre 4 00:00:14,535 --> 00:00:18,965 page index.html afin d'améliorer sa mise en page. 5 00:00:18,965 --> 00:00:24,085 Nous allons utiliser des classes CSS personnalisées et ajouter de la couleur 6 00:00:24,085 --> 00:00:30,535 à notre page index.html en utilisant des classes CSS personnalisées. 7 00:00:30,535 --> 00:00:39,265 La prochaine chose que je vais faire est de descendre au pied de page et pour cet UL ici, 8 00:00:39,265 --> 00:00:42,790 vous remarquerez que cette liste lorsque vous regardez 9 00:00:42,790 --> 00:00:49,705 notre page Web est affichée dans la page Web en utilisant cette liste à puces ici. 10 00:00:49,705 --> 00:00:52,820 Je ne suis pas trop content de cette liste à puces, 11 00:00:52,820 --> 00:00:59,350 je veux supprimer ces puces et ensuite simplement les montrer comme seulement les liens là-bas. 12 00:00:59,350 --> 00:01:03,440 Donc, pour ce faire, je vais utiliser un autre style de liste appelé comme 13 00:01:03,440 --> 00:01:08,120 list- non stylé et l'appliquer à cette balise UL là. 14 00:01:08,120 --> 00:01:09,950 Pour revenir à notre page Web, 15 00:01:09,950 --> 00:01:12,425 à cette balise UL dans le pied de page, 16 00:01:12,425 --> 00:01:21,520 je vais appliquer la classe comme list-unstyled, 17 00:01:23,230 --> 00:01:32,275 et cela supprimerait les puces en face de ces liens là-bas. 18 00:01:32,275 --> 00:01:40,375 Maintenant, laissez-moi ajouter quelques classes CSS personnalisées à la page index.html. 19 00:01:40,375 --> 00:01:49,635 Pour ce faire, nous allons maintenant créer un dossier ici et le nommer comme dossier CSS ici. 20 00:01:49,635 --> 00:01:51,650 À l'intérieur du dossier CSS, 21 00:01:51,650 --> 00:01:59,670 je vais créer un nouveau fichier et nommer le fichier comme styles.css. 22 00:01:59,670 --> 00:02:02,835 Maintenant, à l'intérieur du fichier styles.css, 23 00:02:02,835 --> 00:02:11,685 je peux maintenant ajouter quelques classes CSS afin de styliser notre page. 24 00:02:11,685 --> 00:02:14,600 Permettez-moi d'ajouter quelques classes CSS ici. 25 00:02:14,600 --> 00:02:18,765 Donc, j'ajouterais ma première classe en tant qu'en-tête de ligne. 26 00:02:18,765 --> 00:02:21,035 Donc, comme le nom l'indique, 27 00:02:21,035 --> 00:02:23,770 cette classe que j'applique à l'en-tête. 28 00:02:23,770 --> 00:02:28,865 Et puis, j'appliquerais la marge comme 29 00:02:28,865 --> 00:02:34,330 zéro pixel auto 30 00:02:34,330 --> 00:02:40,150 , puis rembourrage comme zéro pixel auto. 31 00:02:40,150 --> 00:02:41,820 Donc, c'est pour l'en-tête de ligne. 32 00:02:41,820 --> 00:02:46,100 Donc, je vais avoir zéro marge et zéro remplissage pour l'en-tête de ligne. 33 00:02:46,100 --> 00:02:48,840 Et puis pour le contenu de la ligne, 34 00:02:48,840 --> 00:02:54,005 donc je vais ajouter une classe CSS de plus appelée row-content. 35 00:02:54,005 --> 00:03:01,470 Et puis pour cela, je vais ajouter la marge zéro pixel auto, 36 00:03:01,470 --> 00:03:07,815 puis le rembourrage l'avoir à 50 pixels, 37 00:03:07,815 --> 00:03:16,170 zéro pixel, 50 et zéro pixel. 38 00:03:16,170 --> 00:03:21,060 Ensuite, je vais ajouter une bordure 39 00:03:21,060 --> 00:03:28,880 au bas de ma ligne ici. 40 00:03:28,880 --> 00:03:35,195 Et puis, la frontière, je vais lui donner un pixel et ensuite l'appeler une crête. 41 00:03:35,195 --> 00:03:45,915 Et je vais définir la hauteur minimale à 400 pixels pour le contenu ici. 42 00:03:45,915 --> 00:03:51,910 De cette façon, ma page web sera plus agréable à l'écran. 43 00:03:51,910 --> 00:03:55,475 Maintenant, cela encore une fois, vous devez essayer de 44 00:03:55,475 --> 00:03:59,900 voir jusqu'à ce que vous soyez satisfait de la façon dont la page est disposée. 45 00:03:59,900 --> 00:04:03,560 Maintenant aussi, je vais inclure 46 00:04:03,560 --> 00:04:08,320 une autre classe appelée comme le pied de page qui, comme vous l'avez déjà deviné, 47 00:04:08,320 --> 00:04:13,560 je vais appliquer au pied de page et j' 48 00:04:13,560 --> 00:04:21,100 appliquerai une couleur d'arrière-plan au pied de page comme D1C4E9. 49 00:04:29,140 --> 00:04:32,465 Si vous me demandez comment j'ai sélectionné la couleur, 50 00:04:32,465 --> 00:04:37,630 j'ai juste regardé la couleur et ensuite j'étais content de cette couleur. 51 00:04:37,630 --> 00:04:41,460 Vous pouvez choisir n'importe quelle couleur que vous voulez appliquer, 52 00:04:41,460 --> 00:04:44,460 mais cette couleur semble être bonne pour moi. 53 00:04:44,460 --> 00:04:46,950 Donc, j'ai ajouté cette couleur. 54 00:04:46,950 --> 00:04:50,110 Et pour le rembourrage, pour le pied de page, 55 00:04:50,110 --> 00:04:58,890 j'ajouterais 20 pixels et zéro pixels. 56 00:04:59,100 --> 00:05:06,160 Maintenant, une fois que j'ai ajouté ces styles à mon fichier CSS, 57 00:05:06,160 --> 00:05:10,610 permettez-moi d'appliquer le fichier CSS à la page index.html. 58 00:05:10,610 --> 00:05:12,820 Je vais à la page index.html. 59 00:05:12,820 --> 00:05:18,950 Évidemment, j'ai besoin d'utiliser ce fichier CSS dans ma page index.html. 60 00:05:18,950 --> 00:05:22,160 Donc, juste après le fichier CSS bootstrap, 61 00:05:22,160 --> 00:05:32,200 je vais faire un lien et une feuille de style, 62 00:05:32,970 --> 00:05:39,900 et c'est le fichier style.css là-bas. C' 63 00:05:39,900 --> 00:05:43,525 est donc là que mon fichier CSS est stocké. 64 00:05:43,525 --> 00:05:49,760 Donc, je vais inclure cela dans ma page index.html. 65 00:05:49,760 --> 00:05:56,350 Maintenant, je vais aller dans le corps et appliquer les classes que je viens de créer. 66 00:05:56,350 --> 00:05:57,955 Donc, en allant à l'en-tête, 67 00:05:57,955 --> 00:06:03,055 j'appliquerai la classe d'en-tête de ligne à la div dans l'en-tête. 68 00:06:03,055 --> 00:06:07,475 Ensuite, pour le contenu, 69 00:06:07,475 --> 00:06:14,085 j'appliquerais les classes de contenu de ligne aux lignes là-bas. 70 00:06:14,085 --> 00:06:21,180 Ainsi, aux trois lignes du contenu, 71 00:06:21,190 --> 00:06:26,690 j'applique la classe de contenu de ligne, puis je descends au pied de page, 72 00:06:26,690 --> 00:06:28,325 à la balise de pied de page, 73 00:06:28,325 --> 00:06:32,315 j'appliquerai le pied de page de classe ici, 74 00:06:32,315 --> 00:06:35,240 puis j'enregistrerai les modifications. 75 00:06:35,240 --> 00:06:38,290 Allons jeter un coup d'oeil à cette page maintenant. 76 00:06:38,290 --> 00:06:40,430 En accédant à votre page Web, 77 00:06:40,430 --> 00:06:45,970 nous commençons déjà à voir quelques changements intéressants à la page Web. 78 00:06:45,970 --> 00:06:48,960 Donc, vous pouvez maintenant voir que le contenu de 79 00:06:48,960 --> 00:06:52,445 la page Web a été mis en page un peu plus propre. 80 00:06:52,445 --> 00:06:58,290 C' est la bordure inférieure que nous avons ajoutée au contenu de la ligne, de 81 00:06:58,290 --> 00:07:03,200 sorte que vous pouvez voir qu'il y a assez de séparation entre les lignes bien que 82 00:07:03,200 --> 00:07:08,530 le contenu des lignes soit toujours positionné vers le haut dans les lignes, de 83 00:07:08,530 --> 00:07:11,900 sorte que vous avez ces trois lignes, puis regardez le pied de page, 84 00:07:11,900 --> 00:07:17,740 le pied de page a maintenant acquis la couleur d'arrière-plan que j'ai appliquée, 85 00:07:17,740 --> 00:07:26,717 et remarquez comment les liens sont stylés avec la liste-déstylée sur le côté gauche ici. 86 00:07:26,717 --> 00:07:33,495 Nous n'avons pas encore terminé, nous avons dû faire quelques changements supplémentaires à la page index.html, 87 00:07:33,495 --> 00:07:39,320 puis revenir et jeter un oeil au résultat final de cet exercice. 88 00:07:39,320 --> 00:07:41,485 Pour revenir à votre éditeur, 89 00:07:41,485 --> 00:07:46,955 je vais ajouter quelques classes CSS supplémentaires dans ma structure de style, 90 00:07:46,955 --> 00:07:53,290 c'est un fichier, donc je vais y aller et ajouter une classe appelée Jumbotron. 91 00:07:53,290 --> 00:07:59,265 Donc, vous verrez que nous avons déjà appliqué le Jumbotron à notre en-tête là-bas. 92 00:07:59,265 --> 00:08:03,145 Maintenant, si j'ajoute plus de propriétés à cette classe Jumbotron ici, 93 00:08:03,145 --> 00:08:05,875 cela sera appliqué au Jumbotron, 94 00:08:05,875 --> 00:08:11,535 en plus du Jumbotron standard par défaut que bootstrap inclut déjà. 95 00:08:11,535 --> 00:08:13,835 Je vais ajouter quelques choses, 96 00:08:13,835 --> 00:08:17,355 je vais ajouter un rembourrage de 97 00:08:17,735 --> 00:08:28,765 70 et 30 pixels sur son environnement, 98 00:08:29,095 --> 00:08:38,515 puis une marge de zéro pixel tout autour, 99 00:08:38,515 --> 00:08:51,685 et je vais définir l'arrière-plan de ceci à 9575CD. 100 00:08:51,685 --> 00:09:01,065 C' est un peu d'une couleur pourpre plus foncée qui semble aller très bien sur le Jumbotron. 101 00:09:01,065 --> 00:09:03,430 Encore une fois, par essai et erreur, 102 00:09:03,430 --> 00:09:04,975 j'ai sélectionné cette couleur, 103 00:09:04,975 --> 00:09:11,735 ainsi que la couleur du texte comme blanc floral. 104 00:09:13,205 --> 00:09:15,305 Donc, pour le Jumbotron, 105 00:09:15,305 --> 00:09:18,615 nous allons appliquer ces classes, et aussi, 106 00:09:18,615 --> 00:09:24,765 je vais appliquer une autre classe à la classe d'adresse. 107 00:09:24,765 --> 00:09:26,520 Nous avons une adresse dans le pied de page, 108 00:09:26,520 --> 00:09:34,685 donc je vais changer la taille de police de cela à 80 pour cent, 109 00:09:34,685 --> 00:09:38,935 une police légèrement plus petite que la police normale 110 00:09:38,955 --> 00:09:43,455 , et la marge, je vais lui donner un pixel zéro 111 00:09:43,455 --> 00:09:50,285 , et la couleur, je vais utiliser zéro F, 112 00:09:50,285 --> 00:09:52,350 zéro F, zéro F, 113 00:09:52,350 --> 00:09:54,730 puis enregistrer les changements. 114 00:09:54,730 --> 00:09:58,730 Donc, couple plus de classes CSS ajoutées, 115 00:09:58,730 --> 00:10:01,530 basculant vers index.html. 116 00:10:01,530 --> 00:10:03,475 Ce que je vais faire maintenant, 117 00:10:03,475 --> 00:10:07,775 c'est d'aller aux lignes de contenu, puis 118 00:10:07,775 --> 00:10:11,990 je vais essayer de positionner ce contenu au milieu, 119 00:10:11,990 --> 00:10:14,605 verticalement dans cette rangée. 120 00:10:14,605 --> 00:10:17,930 C' est là que je vais prendre l'aide de 121 00:10:17,930 --> 00:10:23,050 l'alignement vertical pris en charge par la grille d'amorçage à travers le support Flexbox. 122 00:10:23,050 --> 00:10:31,395 Pour ce faire, je dirais align-items-center, 123 00:10:31,495 --> 00:10:38,620 donc c'est l'autre classe que j'ai besoin d'ajouter, align-items-center. 124 00:10:38,620 --> 00:10:45,475 Et je vais ajouter cela aux deux lignes restantes aussi, 125 00:10:45,475 --> 00:10:51,735 align-items-center sur la deuxième et la troisième ligne, 126 00:10:53,185 --> 00:11:01,965 et cela devrait faire une justification verticale du contenu des lignes. 127 00:11:01,965 --> 00:11:03,880 On verra le résultat dans une minute. 128 00:11:03,880 --> 00:11:06,230 Descendre au pied de page. 129 00:11:06,230 --> 00:11:09,835 Dans le pied de page, vous voyez que nous avons utilisé 130 00:11:09,835 --> 00:11:13,825 la colonne auto pour ce contenu copyright là-bas. 131 00:11:13,825 --> 00:11:18,265 Maintenant, je vais positionner cela au milieu horizontalement en 132 00:11:18,265 --> 00:11:24,160 utilisant cette classe justify-content-center, 133 00:11:24,160 --> 00:11:32,755 donc il y a un contenu justifié et quelques autres classes là-bas. 134 00:11:32,755 --> 00:11:35,890 Je vais utiliser la classe justify-content-center pour cela. 135 00:11:35,890 --> 00:11:44,605 Cela positionnera essentiellement cette colonne au centre de la ligne là. 136 00:11:44,725 --> 00:11:48,560 Cela s'applique à cela, et puis, 137 00:11:48,560 --> 00:11:51,415 un petit changement que je vais faire, 138 00:11:51,415 --> 00:11:53,370 est à cette div interne là, 139 00:11:53,370 --> 00:12:01,665 je vais appliquer une classe comme centre de texte à cela, de 140 00:12:01,665 --> 00:12:06,435 sorte que ces liens soient centrés sur l'écran. 141 00:12:06,435 --> 00:12:11,340 Avec ces changements, allons jeter un oeil à la page web, 142 00:12:11,340 --> 00:12:14,135 à la fin de cet exercice. 143 00:12:14,135 --> 00:12:16,120 Aller à notre page web, 144 00:12:16,120 --> 00:12:20,020 notre page web commence déjà à paraître encore mieux maintenant, 145 00:12:20,020 --> 00:12:25,885 donc vous pouvez maintenant voir que le Jumbotron est maintenant stylé avec une nouvelle couleur de fond, 146 00:12:25,885 --> 00:12:28,955 qui est un peu violet foncé là-bas, 147 00:12:28,955 --> 00:12:34,980 et le lettrage est maintenant en couleur blanche florale, 148 00:12:34,980 --> 00:12:37,190 un peu en retrait là, 149 00:12:37,190 --> 00:12:44,345 puis vous pouvez maintenant voir que le contenu des lignes de contenu est maintenant centré verticalement, 150 00:12:44,345 --> 00:12:47,500 pour les trois lignes de contenu. 151 00:12:47,500 --> 00:12:54,645 C' est l'utilisation du centre align-items-center que nous avons appliqué aux lignes là-bas. 152 00:12:54,645 --> 00:12:56,525 Ensuite, en allant au pied de page, 153 00:12:56,525 --> 00:13:03,380 vous pouvez maintenant voir que ce copyright est maintenant justifié au centre de l'écran. 154 00:13:03,380 --> 00:13:08,155 Regardez comment les liens ici ont été centrés. 155 00:13:08,155 --> 00:13:15,985 J' ai réalisé que je veux également positionner ce centrage vertical sur cette ligne particulière, 156 00:13:15,985 --> 00:13:19,855 alors allons-y et appliquons une classe de plus pour déplacer cela 157 00:13:19,855 --> 00:13:24,540 au centre de cette ligne particulière verticalement. 158 00:13:24,540 --> 00:13:27,100 Donc, pour ce faire, revenir à l'index. 159 00:13:27,100 --> 00:13:34,115 html, dans le pied de page de cette colonne particulière qui contient ceux-ci, 160 00:13:34,115 --> 00:13:41,795 je vais appliquer la classe comme align-self-center. 161 00:13:41,795 --> 00:13:48,485 Cela devrait être appliqué à la div qui utilise la classe de colonne. 162 00:13:48,485 --> 00:13:54,185 Avec cela, ce contenu particulier sera aligné au centre de la ligne. 163 00:13:54,185 --> 00:13:56,570 Le contenu restant restera toujours en haut. 164 00:13:56,570 --> 00:13:59,575 Jetons un dernier coup d'oeil au pied de page. En 165 00:13:59,575 --> 00:14:01,705 accédant au pied de page de notre page Web, 166 00:14:01,705 --> 00:14:06,345 vous pouvez maintenant voir comment cela a été positionné verticalement au centre. 167 00:14:06,345 --> 00:14:10,715 Ces deux morceaux de contenu sont toujours alignés sur le haut de la ligne, 168 00:14:10,715 --> 00:14:15,215 c'est bien parce que cela semble bien là-dedans, 169 00:14:15,215 --> 00:14:21,340 mais celui-ci, je l'ai fait glisser verticalement vers le centre de cette rangée particulière. 170 00:14:21,340 --> 00:14:25,545 Avec cela, nous complétons cet exercice. 171 00:14:25,545 --> 00:14:30,005 Dans cet exercice, nous avons vu l'utilisation de classes CSS personnalisées, 172 00:14:30,005 --> 00:14:35,125 et avons également utilisé certaines des classes pour 173 00:14:35,125 --> 00:14:41,660 justifier le contenu horizontalement et verticalement dans nos lignes. 174 00:14:41,660 --> 00:14:45,695 C' est un bon moment pour vous de faire un bon commentaire avec le message, 175 00:14:45,695 --> 00:14:48,735 grille Bootstrap, deuxième partie.