1 00:00:03,750 --> 00:00:11,555 Notre prochain exercice porte sur les moyens d'afficher le contenu sur notre page Web. 2 00:00:11,555 --> 00:00:17,190 Ils examinent comment nous pouvons inclure des tableaux dans notre page Web et comment nous pouvons les 3 00:00:17,190 --> 00:00:23,845 styliser en utilisant les classes de Bootstrap pour coiffer des tables, 4 00:00:23,845 --> 00:00:27,720 y compris la conception réactive des tables. 5 00:00:27,720 --> 00:00:30,860 Nous allons également examiner un autre composant polyvalent 6 00:00:30,860 --> 00:00:34,290 qui est disponible dans Bootstrap appelé comme une carte. 7 00:00:34,290 --> 00:00:39,125 Une carte vous permet d'afficher du contenu de plusieurs millions de façons. 8 00:00:39,125 --> 00:00:44,495 Nous allons donc examiner deux façons différentes d'utiliser une carte pour afficher du contenu. 9 00:00:44,495 --> 00:00:49,275 Plus tard, nous verrons l'utilisation de cartes encore et encore 10 00:00:49,275 --> 00:00:56,635 pour les futures conceptions de certaines parties de notre site Web. 11 00:00:56,635 --> 00:01:02,520 Pour commencer, ouvrez la page aboutus.html. 12 00:01:02,520 --> 00:01:06,035 Nous allons insérer une table et deux cartes 13 00:01:06,035 --> 00:01:10,215 dans la page aboutus.html pour afficher une carte. Tout d' 14 00:01:10,215 --> 00:01:19,130 abord, faisons défiler lentement vers le bas jusqu'à ce qu'après cette carte pour des informations de leadership, 15 00:01:19,130 --> 00:01:23,170 et juste là 16 00:01:23,170 --> 00:01:28,045 je vais introduire un autre div dans lequel je vais joindre la table ici. 17 00:01:28,045 --> 00:01:31,640 Donc, je vais introduire une nouvelle ligne ici, 18 00:01:31,640 --> 00:01:38,135 avec la classe comme ligne de contenu. 19 00:01:38,135 --> 00:01:41,185 Et à l'intérieur de cette div, 20 00:01:41,185 --> 00:01:51,205 nous allons introduire une colonne qui accueillera la table ici. 21 00:01:51,205 --> 00:01:55,850 Donc, je vais introduire une colonne, colonne 12, 22 00:01:55,870 --> 00:02:05,045 colonne sm-9 et fermer la div. 23 00:02:05,045 --> 00:02:11,605 Et à l'intérieur div, laissez-moi donner un titre ici 24 00:02:11,605 --> 00:02:21,940 Faits et chiffres et fermer le h2. 25 00:02:23,490 --> 00:02:29,770 Juste après cela, permettez-moi d'introduire un autre div, 26 00:02:33,140 --> 00:02:43,320 que les classes colonne sm et colonne sm-3 et fermer ce div là. En 27 00:02:43,320 --> 00:02:46,850 ce moment, nous allons laisser la deuxième div vide. 28 00:02:46,850 --> 00:02:53,140 Je vais remplir la table dans la première div ici et 29 00:02:53,140 --> 00:03:00,435 ensuite nous allons jeter un oeil rapide à la table après avoir ajouté le code pour la table. 30 00:03:00,435 --> 00:03:04,525 Donc ici, j'ai listé dans le code de la table. 31 00:03:04,525 --> 00:03:12,190 Jetons un coup d'oeil à la table et puis nous reviendrons discuter de ce code ici. 32 00:03:12,190 --> 00:03:20,075 Aller à notre page À propos sur laquelle nous avons déjà travaillé plus tôt, 33 00:03:20,075 --> 00:03:23,080 après la section Corporate Leadership, 34 00:03:23,080 --> 00:03:27,645 vous voyez ici une nouvelle ligne présentant le tableau. 35 00:03:27,645 --> 00:03:30,270 Donc, notez comment la table est stylée, 36 00:03:30,270 --> 00:03:36,695 donc nous avons l'en-tête avec un h2 inclus là, 37 00:03:36,695 --> 00:03:40,465 mais nous allons nous concentrer spécifiquement sur cette table. 38 00:03:40,465 --> 00:03:43,735 Donc, vous voyez que ce tableau a été stylisé 39 00:03:43,735 --> 00:03:48,125 en utilisant certaines classes Bootstrap qui sont utilisées pour améliorer la table. 40 00:03:48,125 --> 00:03:54,735 L' en-tête a été rendu avec un arrière-plan sombre, 41 00:03:54,735 --> 00:04:00,770 puis les règles sont toutes conçues de telle sorte que les lignes alternatives soient de 42 00:04:00,770 --> 00:04:07,295 couleur différente afin que vous puissiez clairement distinguer les lignes de ce tableau. 43 00:04:07,295 --> 00:04:13,185 C' est ce qui, en termes Bootstrap, est appelé tableau rayé. 44 00:04:13,185 --> 00:04:17,360 Voici un exemple de la façon dont vous pouvez styliser une table. 45 00:04:17,360 --> 00:04:23,250 Fait intéressant, si vous regardez la même table dans un petit périphérique, 46 00:04:23,250 --> 00:04:25,420 vous remarquerez que la table est toujours 47 00:04:25,420 --> 00:04:29,450 visible, sauf que cette table devient maintenant défilante. 48 00:04:29,450 --> 00:04:34,280 Donc, tout ce qui peut être affiché dans le contenu sera affiché et 49 00:04:34,280 --> 00:04:39,120 le reste du tableau peut être défilé horizontalement en place. 50 00:04:39,120 --> 00:04:47,840 C' est donc le composant réactif du support de Bootstrap pour les tables en action. 51 00:04:47,840 --> 00:04:52,120 Maintenant, allons jeter un oeil au code lui-même. 52 00:04:52,120 --> 00:04:54,970 Maintenant, évidemment, cette table est assez simple, 53 00:04:54,970 --> 00:04:57,924 elle a un tas de lignes et quelques colonnes. 54 00:04:57,924 --> 00:05:02,070 Donc, vous vous attendez à ce que j'utilise les 55 00:05:02,070 --> 00:05:06,365 balises th, td et tr typiques là-bas. 56 00:05:06,365 --> 00:05:08,225 En revenant au code, 57 00:05:08,225 --> 00:05:12,490 vous remarquerez que j'enferme cette table à l'intérieur de 58 00:05:12,490 --> 00:05:16,840 div à laquelle j'ai appliqué la table de classe responsive. 59 00:05:16,840 --> 00:05:19,700 C' est donc ce qui rend cette table réactive de sorte que sur les 60 00:05:19,700 --> 00:05:24,490 écrans plus petits, vous pouvez faire défiler horizontalement la table. 61 00:05:24,490 --> 00:05:26,720 Maintenant, pour la table elle-même, 62 00:05:26,720 --> 00:05:29,800 remarquez comment j'ai appliqué deux classes. 63 00:05:29,800 --> 00:05:31,230 L' un est la classe de table, 64 00:05:31,230 --> 00:05:34,825 donc cela remplace le 65 00:05:34,825 --> 00:05:39,375 rendu de table par défaut sur les navigateurs en fournissant les propres classes de Bootstrap. 66 00:05:39,375 --> 00:05:41,760 Et le second dit tableau rayé. 67 00:05:41,760 --> 00:05:48,280 Donc, c'est ce qui conçoit une table avec des rangées alternatives dans différentes couleurs ici. 68 00:05:48,280 --> 00:05:50,610 Ensuite, la tête elle-même, de 69 00:05:50,610 --> 00:05:55,050 sorte que vous pouvez voir que les en-têtes décrits ici avec la classe thead-dark, de 70 00:05:55,050 --> 00:05:57,925 sorte que cela rend la tête sombre. 71 00:05:57,925 --> 00:06:06,630 Et puis vous verrez le tableau lui-même décrit ici avec les tags th ici. 72 00:06:06,630 --> 00:06:09,480 C' est donc une définition de table standard. 73 00:06:09,480 --> 00:06:16,410 Le corps de la table lui-même est l'utilisation HTML standard de tr 74 00:06:16,410 --> 00:06:22,760 , et td, et th éléments que vous connaissez déjà dans html5. 75 00:06:22,760 --> 00:06:27,180 Donc, c'est avec cela que la table est construite, 76 00:06:27,180 --> 00:06:31,075 puis vous fermez le corps de la table. Donc c'est à ce sujet. 77 00:06:31,075 --> 00:06:36,670 Donc, nous tout ce qui est unique à propos de Bootstrap lui-même est l'application de 78 00:06:36,670 --> 00:06:40,060 ces classes Bootstrap spécifiques à 79 00:06:40,060 --> 00:06:47,130 l'élément de table lui-même pour le style plus loin, 80 00:06:47,130 --> 00:06:51,360 pour s'intégrer dans une page Web de conception Bootstrap. 81 00:06:51,360 --> 00:06:55,360 Le composant suivant que je vais ajouter dans la 82 00:06:55,360 --> 00:06:59,595 page aboutus.html est un composant de carte dans Bootstrap. 83 00:06:59,595 --> 00:07:02,650 Le composant carte nous permet d'afficher le contenu 84 00:07:02,650 --> 00:07:06,850 en le distinguant du reste de ce contenu. 85 00:07:06,850 --> 00:07:12,925 Maintenant, en faisant défiler jusqu'à la première ligne 86 00:07:12,925 --> 00:07:16,925 ici, nous avons notre histoire dans la deuxième utilisation div, 87 00:07:16,925 --> 00:07:20,915 notez que le premier div occupe déjà col-sm-6, 88 00:07:20,915 --> 00:07:23,915 le deuxième div est actuellement vide. 89 00:07:23,915 --> 00:07:25,355 Donc, à cette div, 90 00:07:25,355 --> 00:07:31,320 je vais ajouter dans la classe en tant que col-sm. 91 00:07:31,320 --> 00:07:40,670 Par la suite, en entrant dans cette div, je vais introduire un autre div à la carte de classe ici. 92 00:07:40,670 --> 00:07:42,325 Donc, à l'intérieur de ces div, 93 00:07:42,325 --> 00:07:46,755 je vais construire ma carte pour afficher du contenu ici. 94 00:07:46,755 --> 00:07:53,870 Donc, dans cette div, nous allons introduire un h3 que 95 00:07:53,870 --> 00:08:05,235 la classe en tant que card-header bg-primary. 96 00:08:05,235 --> 00:08:08,110 Donc, vous verrez que ce h3 sera affiché comme 97 00:08:08,110 --> 00:08:12,755 un en-tête de carte avec cet arrière-plan comme primaire 98 00:08:12,755 --> 00:08:21,165 , puis texte blanc quelle classe Bootstrap définira le texte à être de couleur blanche. 99 00:08:21,165 --> 00:08:24,715 Et puis à l'intérieur de cette h3, 100 00:08:24,715 --> 00:08:31,090 je vais vous présenter le titre de cette carte ici qui 101 00:08:31,090 --> 00:08:37,580 est « Faits At a Regard ». 102 00:08:37,580 --> 00:08:41,950 Pour que je puisse montrer du contenu à l'intérieur de cette div ici. 103 00:08:41,950 --> 00:08:44,915 Maintenant, à cette carte, 104 00:08:44,915 --> 00:08:48,520 je vais ensuite ajouter un autre div interne 105 00:08:48,520 --> 00:08:55,950 ici avec la classe comme corps de carte, 106 00:08:55,950 --> 00:08:59,080 et à l'intérieur de ce corps de carte sera 107 00:08:59,080 --> 00:09:03,370 le contenu réel qui a été affiché dans cette carte. 108 00:09:03,370 --> 00:09:10,310 Sauvegardons les modifications, puis allons jeter un oeil rapidement à notre page Web. En 109 00:09:10,310 --> 00:09:12,100 allant sur notre page web, 110 00:09:12,100 --> 00:09:15,860 nous pouvons déjà voir la carte prendre forme dans notre page web, de 111 00:09:15,860 --> 00:09:19,620 sorte que vous pouvez voir que la moitié gauche est occupée par l'Histoire 112 00:09:19,620 --> 00:09:24,085 et la moitié droite vous verrez la carte mise en place. 113 00:09:24,085 --> 00:09:27,135 Ajoutons du contenu dans cette carte. En 114 00:09:27,135 --> 00:09:29,140 entrant dans ce bloc de carte, 115 00:09:29,140 --> 00:09:32,220 maintenant je vais utiliser une liste de description 116 00:09:32,220 --> 00:09:36,080 et cette liste de description dans Bootstrap me permet d' 117 00:09:36,080 --> 00:09:45,705 appliquer les classes de ligne et de colonne à elle et ainsi formater le contenu à l'intérieur. 118 00:09:45,705 --> 00:09:48,360 Donc, à l'intérieur de cette liste de description, 119 00:09:48,360 --> 00:09:52,190 je vais ajouter 120 00:09:54,890 --> 00:10:00,110 dans le dt que la classe et col-6 ici, 121 00:10:00,110 --> 00:10:03,420 ce qui signifie que cela va occuper six colonnes à 122 00:10:03,420 --> 00:10:07,085 l'intérieur de cette liste de description qui est elle-même une ligne ici. 123 00:10:07,085 --> 00:10:13,785 Donc imbriquer comme vous le voyez venir en photo ici. 124 00:10:13,785 --> 00:10:16,250 Donc, à ce dt, 125 00:10:16,250 --> 00:10:20,190 je vais ajouter ce titre de description ici, 126 00:10:20,190 --> 00:10:25,470 et ensuite ci-dessous que j'ajouterai dans le dd avec 127 00:10:25,470 --> 00:10:33,330 la classe col-6 ici et puis je peux ajouter dans un contexte ici. 128 00:10:36,960 --> 00:10:40,310 Et dd ici. 129 00:10:41,880 --> 00:10:46,755 Enregistrez les modifications et jetez un coup d'œil à notre carte. 130 00:10:46,755 --> 00:10:50,445 Aller à notre carte, vous pouvez maintenant voir comment 131 00:10:50,445 --> 00:10:55,265 la liste de description me permet d'afficher des informations. 132 00:10:55,265 --> 00:11:02,700 A l'intérieur de ma carte, vous pouvez voir le côté gauche et le côté droit clairement affiché. 133 00:11:02,700 --> 00:11:07,035 Ici, nous profitons de la liste de description et, 134 00:11:07,035 --> 00:11:09,215 en ajoutant les informations là. 135 00:11:09,215 --> 00:11:14,590 Laissez-moi finir les parties restantes ici en ajoutant le code, 136 00:11:14,590 --> 00:11:19,745 puis revenez et jetez un oeil à la version finale de cette carte. 137 00:11:19,745 --> 00:11:22,850 Ici, vous pouvez voir que j'ai terminé d'ajouter dans 138 00:11:22,850 --> 00:11:25,895 les parties restantes de ma liste de description. 139 00:11:25,895 --> 00:11:31,155 Allons jeter un coup d'œil à notre version finale de cette carte. 140 00:11:31,155 --> 00:11:33,290 Jetez un oeil à la carte, 141 00:11:33,290 --> 00:11:34,620 et comment elle prend forme. 142 00:11:34,620 --> 00:11:39,340 Ici, vous pouvez maintenant voir comment nous pouvons utiliser une carte pour afficher 143 00:11:39,340 --> 00:11:41,760 du contenu dans notre page Web et 144 00:11:41,760 --> 00:11:44,725 le distinguer du reste du contenu sur la page Web. 145 00:11:44,725 --> 00:11:50,325 Ainsi, une carte est un composant très polyvalent qui nous permet d'afficher du contenu comme celui-ci. 146 00:11:50,325 --> 00:11:52,500 Continuons avec cet exercice, 147 00:11:52,500 --> 00:11:56,785 en ajoutant une autre carte à cette page Web. 148 00:11:56,785 --> 00:12:01,410 Revenons maintenant à notre page aboutus.html. 149 00:12:01,410 --> 00:12:06,170 Et juste en dessous de la carte que nous avons déjà ajoutée précédemment, 150 00:12:06,170 --> 00:12:14,790 je vais ajouter dans un autre div avec la classe « col-12" ici. 151 00:12:14,790 --> 00:12:16,910 Et puis, à l'intérieur de cette div, 152 00:12:16,910 --> 00:12:24,670 je vais construire une autre carte ici pour afficher quelques informations supplémentaires. 153 00:12:24,670 --> 00:12:26,495 Donc, à l'intérieur de cette div, 154 00:12:26,495 --> 00:12:30,210 je vais construire une carte avec 155 00:12:30,210 --> 00:12:38,915 la classe « card-body bg-light ». 156 00:12:38,915 --> 00:12:45,580 Donc, vous verrez que j'applique à la fois la carte et le corps de la carte au même div ici. 157 00:12:45,580 --> 00:12:49,300 Donc, ce qui signifie que cette carte particulière ne va 158 00:12:49,300 --> 00:12:54,835 pas avoir d'en-tête de carte mais contient juste le corps de la carte ici. 159 00:12:54,835 --> 00:12:59,545 Et puis, aussi, le bg-light signifie que l'arrière-plan sera en couleur fanée. Un 160 00:12:59,545 --> 00:13:05,120 peu d'une couleur grisâtre ajoutée à l'arrière-plan. 161 00:13:05,120 --> 00:13:10,495 Donc, cela cherche également cette carte en dehors du reste du contenu ici. 162 00:13:10,495 --> 00:13:12,815 Maintenant, à l'intérieur de cette carte, 163 00:13:12,815 --> 00:13:16,250 je vais utiliser un code de bloc pour afficher 164 00:13:16,250 --> 00:13:20,700 une petite information intéressante. 165 00:13:20,700 --> 00:13:23,980 Donc, je vais utiliser un blockquote. 166 00:13:23,980 --> 00:13:30,965 Ceci est aussi une balise HTML ici. 167 00:13:30,965 --> 00:13:37,005 Et puis à cela, j'appliquerai la classe blockquote de Bootstrap. 168 00:13:37,005 --> 00:13:42,590 Donc, Bootstrap styles ce blockquote à sa manière. 169 00:13:42,980 --> 00:13:46,429 Alors fermons ce blockquote. 170 00:13:46,429 --> 00:13:47,870 Et à l'intérieur de ce blockquote, 171 00:13:47,870 --> 00:13:51,910 je vais inclure une citation ici. 172 00:13:51,910 --> 00:13:54,320 Donc, je vais commencer par un p, 173 00:13:54,320 --> 00:13:56,760 et appliquer une classe appelée mb-0. 174 00:13:56,760 --> 00:14:02,920 Le mb-0 est une classe d'utilitaires fournie par Bootstrap. 175 00:14:02,920 --> 00:14:05,775 Ce que cela signifie, c'est la marge de zéro. 176 00:14:05,775 --> 00:14:09,640 Pour ce particulier, quel qu'il soit inclus dans cette balise p, 177 00:14:09,640 --> 00:14:12,135 nous aurons une marge inférieure de zéro. 178 00:14:12,135 --> 00:14:15,865 Et cela m'aide à afficher le contenu correctement ici. 179 00:14:15,865 --> 00:14:24,900 Donc ici, je vais ajouter le contenu réel là, 180 00:14:49,850 --> 00:14:54,970 puis fermer cette p. Donc ce p contient la citation réelle. 181 00:14:54,970 --> 00:14:56,560 Maintenant, à cette citation, de 182 00:14:56,560 --> 00:14:59,180 sorte que vous voyez que dans votre contenu, 183 00:14:59,180 --> 00:15:05,320 vous pouvez également inclure des citations dans votre code là. 184 00:15:05,320 --> 00:15:10,730 Donc, à cela, je peux également ajouter un pied de page avec la classe. 185 00:15:10,730 --> 00:15:14,900 Laisse-moi pousser l'indentation du pied de page. 186 00:15:14,900 --> 00:15:20,080 Donc, ce pied de page est aussi une classe que blockquote prend en charge. 187 00:15:20,080 --> 00:15:26,620 Donc, tout ce que vous incluez dans le blockquote, 188 00:15:28,570 --> 00:15:31,105 ainsi que le pied de page, 189 00:15:31,105 --> 00:15:39,540 vous permettra d'afficher l'auteur de cette citation. 190 00:15:40,420 --> 00:15:45,620 Donc, ici, je suis inclus l'auteur, 191 00:15:45,620 --> 00:15:49,165 puis un de plus. 192 00:15:49,165 --> 00:15:58,860 En utilisant la citation, je peux même citer la source de cette citation. 193 00:16:01,740 --> 00:16:04,790 Donc vous pouvez voir ça. 194 00:16:24,870 --> 00:16:32,955 Encore une fois, c'est juste une citation que j'utilise juste pour le plaisir de vous montrer, 195 00:16:32,955 --> 00:16:35,355 également en même temps illustrant, 196 00:16:35,355 --> 00:16:42,405 comment le blockquote fonctionne, 197 00:16:42,405 --> 00:16:47,800 et aussi comment nous pouvons créer un autre type de carte dans Bootstrap. 198 00:16:47,800 --> 00:16:55,845 Donc, avec cela, nous avons ajouté dans le code pour afficher le blockquote ici. 199 00:16:55,845 --> 00:16:57,890 Alors laissez-moi voir si cela change, 200 00:16:57,890 --> 00:17:04,995 puis nous irons voir comment cette citation est affichée sur notre page Web. 201 00:17:04,995 --> 00:17:09,270 Aller au navigateur, dans notre page, 202 00:17:09,270 --> 00:17:14,310 vous pouvez voir que notre histoire et les faits en un coup d'œil sont affichés côte à côte. 203 00:17:14,310 --> 00:17:22,360 En dessous, j'ai ce long contenu ici. 204 00:17:22,360 --> 00:17:27,850 Jetons un coup d'oeil à la même page dans un très petit écran. 205 00:17:27,850 --> 00:17:29,250 Donc, dans un très petit écran, 206 00:17:29,250 --> 00:17:33,840 vous pouvez voir que l'histoire et les faits sont empilés sur le dessus, 207 00:17:33,840 --> 00:17:38,120 et la citation est juste en bas ici dans sa propre carte. 208 00:17:38,120 --> 00:17:40,130 Ainsi, vous pouvez voir deux cartes, 209 00:17:40,130 --> 00:17:42,225 une en dessous de l'autre ici, 210 00:17:42,225 --> 00:17:45,860 puis la table elle-même affichée en bas. 211 00:17:45,860 --> 00:17:50,685 Donc, la table elle-même est une table défilante ici. 212 00:17:50,685 --> 00:17:54,885 Donc, avec cela, nous terminons cet exercice. 213 00:17:54,885 --> 00:17:56,330 Dans cet exercice, 214 00:17:56,330 --> 00:18:05,950 nous avons appris comment nous pouvons utiliser des tableaux et des cartes pour afficher du contenu dans notre page Web. 215 00:18:05,950 --> 00:18:08,690 Maintenant que nous avons terminé cet exercice, 216 00:18:08,690 --> 00:18:12,610 c'est le bon moment pour faire un commit git.