1 00:00:00,000 --> 00:00:04,797 [MUSIQUE] 2 00:00:04,797 --> 00:00:11,490 Dans cet exercice, nous allons examiner le support de Bootstrap pour les boutons et les formulaires. 3 00:00:11,490 --> 00:00:17,293 Nous allons donc inclure quelques boutons et un groupe de boutons dans notre page Web. 4 00:00:17,293 --> 00:00:24,190 Et nous examinons également la conception de formulaires et le style des formulaires à l'aide de classes Bootstrap. 5 00:00:25,780 --> 00:00:31,080 Pour commencer, allez à la page d'instructions et 6 00:00:31,080 --> 00:00:36,900 téléchargez le fichier contactus.html.zip que nous avons fourni. 7 00:00:36,900 --> 00:00:39,798 Donc, faites un clic droit sur cela, 8 00:00:39,798 --> 00:00:44,969 puis enregistrez ce lien dans votre dossier Confusion. 9 00:00:48,512 --> 00:00:49,568 Comme, 10 00:00:54,264 --> 00:01:01,598 contactus.html.zip fichier. 11 00:01:01,598 --> 00:01:08,580 Et puis une fois que le fichier zip est téléchargé, décompressez le fichier pour obtenir la page contactus.html. 12 00:01:09,740 --> 00:01:11,580 Ensuite, vous pouvez supprimer le fichier zip. 13 00:01:13,440 --> 00:01:18,764 Une fois que vous avez décompressé le fichier et obtenir la page contactus.html, 14 00:01:18,764 --> 00:01:23,084 vous remarquerez que lorsque vous chargez cette page dans votre 15 00:01:23,084 --> 00:01:28,107 navigateur en utilisant localhost:3000/ contactus.html, 16 00:01:28,107 --> 00:01:34,748 vous verrez que cette page est déjà pré-formatée avec du contenu. 17 00:01:34,748 --> 00:01:38,550 Ainsi, vous pouvez remarquer que vous avez déjà la barre de navigation là-bas. 18 00:01:38,550 --> 00:01:42,846 Nous avons le jumbotron déjà formaté pour nous. 19 00:01:42,846 --> 00:01:48,061 Et vous remarquerez que j'ai la chapelure et 20 00:01:48,061 --> 00:01:52,190 le nom de contact ici formaté. 21 00:01:52,190 --> 00:01:57,730 Ensuite, vous verrez quelques informations supplémentaires, l'adresse ici. 22 00:01:57,730 --> 00:02:04,180 Et aussi, vous remarquerez que le pied de page est déjà formaté. 23 00:02:04,180 --> 00:02:06,580 Mais vous remarquerez deux choses ici, 24 00:02:06,580 --> 00:02:11,820 vous remarquerez qu'il y a une ligne ici qui dit que les groupes de boutons vont ici et 25 00:02:11,820 --> 00:02:15,678 puis une ligne de plus ici qui dit forme va ici. 26 00:02:15,678 --> 00:02:20,280 Nous allons donc les remplacer par un groupe de boutons et un formulaire. 27 00:02:20,280 --> 00:02:25,380 Et en cours de route, apprenez le support de Bootstrap pour les boutons et les formulaires. 28 00:02:25,380 --> 00:02:31,015 Avant d'aller de l'avant, maintenant que nous avons trois pages dans notre site Web, 29 00:02:31,015 --> 00:02:34,585 il est conseillé de les relier ensemble, à la 30 00:02:34,585 --> 00:02:39,525 fois dans la barre de navigation et dans les liens dans le pied de page. 31 00:02:39,525 --> 00:02:45,165 Modifions ces deux pages afin que nous puissions naviguer facilement entre ces trois pages. 32 00:02:45,165 --> 00:02:52,008 Donc, en allant à la page contactus.html, vous remarquerez que dans la barre de navigation, 33 00:02:52,008 --> 00:02:56,816 j'ai déjà les liens vers index.html configurés correctement. 34 00:02:58,908 --> 00:03:03,568 Et vous remarquerez qu'en bas 35 00:03:03,568 --> 00:03:08,450 ici vous avez le lien de contact ici. 36 00:03:08,450 --> 00:03:15,550 Mais le lien correspondant à environ n'a pas été configuré correctement. 37 00:03:15,550 --> 00:03:19,905 Alors allez à ce lien ici, puis mettez à jour vers 38 00:03:19,905 --> 00:03:24,430 aboutus.html. 39 00:03:24,430 --> 00:03:27,788 Le lien Contactez-nous peut être laissé seul en tant que tel. 40 00:03:27,788 --> 00:03:31,050 Et puis enregistrez les modifications. 41 00:03:31,050 --> 00:03:35,070 Maintenant, de même, allez au pied de page de cette page. 42 00:03:35,070 --> 00:03:40,975 Et vous remarquerez que dans le pied de page nous avons ces trois liens ici. 43 00:03:40,975 --> 00:03:45,215 Et cela peut être un bon point pour remplacer les liens 44 00:03:45,215 --> 00:03:48,015 par les liens vers les pages correspondantes. 45 00:03:48,015 --> 00:03:54,342 Donc, je vais dire, index.html, aboutus.html, 46 00:03:54,342 --> 00:03:59,665 et, contactus.html. 47 00:03:59,665 --> 00:04:01,325 Et enregistrez les modifications. 48 00:04:01,325 --> 00:04:08,117 De même, allez à index.html, puis dans index.html aussi, 49 00:04:08,117 --> 00:04:12,280 le lien de contact n'a pas été configuré. 50 00:04:12,280 --> 00:04:18,640 Alors mettons à jour cela à contactus.html. 51 00:04:18,640 --> 00:04:21,900 Et puis de même, mettez à jour les liens dans le pied de page. 52 00:04:23,050 --> 00:04:27,258 Allez également dans aboutus.html, puis fixez les liens même là. 53 00:04:27,258 --> 00:04:32,540 Donc, dans le aboutus.html aussi, dans l'en-tête, je vais réparer le lien. 54 00:04:37,461 --> 00:04:41,690 Et aussi dans le pied de page de aboutus.html. 55 00:04:41,690 --> 00:04:44,050 Maintenant, lorsque vous 56 00:04:44,050 --> 00:04:49,290 accédez à votre site Web, vous pourrez revenir à votre page d'accueil, à votre page d'accueil. 57 00:04:49,290 --> 00:04:52,950 Et à partir de la page à propos, vous pouvez même revenir à la page des contacts. 58 00:04:52,950 --> 00:04:57,780 Donc, tous les liens entre les trois pages dans les en-têtes correspondants, 59 00:04:57,780 --> 00:05:01,480 ainsi que les pieds de page, ici devraient être configurés. 60 00:05:01,480 --> 00:05:06,500 Ainsi, si vous cliquez sur l'un de ceux-ci vous mènera à la page appropriée. 61 00:05:08,190 --> 00:05:12,660 Il est maintenant temps de commencer à travailler sur les boutons que nous allons 62 00:05:12,660 --> 00:05:17,040 inclure dans notre page contactus.html. 63 00:05:17,040 --> 00:05:23,060 Donc, ce que je vais faire est que je remplacerai cette ligne par 64 00:05:23,060 --> 00:05:25,580 le code pour le bouton et le groupe de boutons et 65 00:05:25,580 --> 00:05:30,465 puis après cela, nous reviendrons pour expliquer comment tout cela fonctionne. En 66 00:05:30,465 --> 00:05:34,650 ouvrant contactus.html dans notre éditeur, 67 00:05:34,650 --> 00:05:40,402 nous allons localiser l'endroit où cette déclaration, groupe de boutons va ici, existe. 68 00:05:40,402 --> 00:05:44,230 Et puis je vais remplacer cela par le code correspondant à 69 00:05:44,230 --> 00:05:46,920 ce groupe de boutons d'abord. 70 00:05:46,920 --> 00:05:51,600 Et puis je reviendrai pour expliquer comment ce code fonctionne. 71 00:05:51,600 --> 00:05:56,570 Donc, sauvegardons les modifications, puis jetons un oeil à ce que 72 00:05:56,570 --> 00:06:00,920 ce groupe de boutons ressemble dans notre navigateur. En 73 00:06:02,550 --> 00:06:07,224 accédant à votre navigateur, vous pouvez maintenant voir que dans notre 74 00:06:07,224 --> 00:06:12,310 page Web le groupe de boutons a été créé. 75 00:06:12,310 --> 00:06:15,040 Vous pouvez donc voir qu'il y a trois boutons ici, les 76 00:06:15,040 --> 00:06:17,540 boutons Appel, Skype et E-mail. 77 00:06:17,540 --> 00:06:21,990 Maintenant, tous ces trois sont réunis en une seule barre ou barre de 78 00:06:21,990 --> 00:06:26,800 boutons ou ce qui est en termes Bootstrap appelé un groupe de boutons. 79 00:06:26,800 --> 00:06:31,350 Alors regardons comment nous allons construire quelque chose comme ça dans le 80 00:06:31,350 --> 00:06:32,390 code Bootstrap. 81 00:06:33,530 --> 00:06:41,530 Donc ici, j'ai à la fois la fenêtre du navigateur et mon code ouvert côte à côte. 82 00:06:41,530 --> 00:06:44,990 Jetons donc un coup d'oeil à la façon dont nous créons ce code de bouton. En 83 00:06:44,990 --> 00:06:48,536 regardant le code, vous remarquez que 84 00:06:48,536 --> 00:06:53,745 les boutons sont inclus dans un div ici. 85 00:06:53,745 --> 00:06:57,060 Pour la div, nous appliquons la classe, btn-group. 86 00:06:57,060 --> 00:07:02,255 Donc, si vous avez un groupe de boutons que vous voulez joindre ensemble et 87 00:07:02,255 --> 00:07:06,225 présenter comme un groupe de boutons, comme une barre de boutons, 88 00:07:06,225 --> 00:07:10,990 alors vous utiliseriez un div avec la classe de groupe de boutons et 89 00:07:10,990 --> 00:07:14,540 le rôle en tant que groupe ici à ce div. 90 00:07:14,540 --> 00:07:18,332 Maintenant à l'intérieur de cela, vous remarquerez que j'utilise la 91 00:07:18,332 --> 00:07:20,550 balise, a, pour définir les trois boutons. 92 00:07:20,550 --> 00:07:23,590 Alors regardons comment nous définissons les trois boutons. 93 00:07:23,590 --> 00:07:26,430 Regardons comment nous définissons le bouton Appel. 94 00:07:26,430 --> 00:07:30,030 Donc, cette ligne particulière définit le bouton Appel. 95 00:07:30,030 --> 00:07:33,718 Donc, je dis, un, rôle est égal à bouton. 96 00:07:33,718 --> 00:07:38,375 Donc ceci, un, tag ici, 97 00:07:38,375 --> 00:07:42,565 je l'utilise comme un bouton ici. 98 00:07:42,565 --> 00:07:44,955 C' est pourquoi je spécifie le rôle comme un bouton. 99 00:07:44,955 --> 00:07:46,545 Donc c'est important. 100 00:07:46,545 --> 00:07:49,591 Et puis regardez les cours que j'applique à cela. 101 00:07:49,591 --> 00:07:54,926 Donc, le premier est la classe btn. 102 00:07:54,926 --> 00:07:59,880 La classe btn est la classe de bouton de Bootstrap. 103 00:07:59,880 --> 00:08:03,720 Donc, il affichera cela comme un bouton Bootstrap classique. 104 00:08:03,720 --> 00:08:07,300 La deuxième partie dit est btn-primaire. 105 00:08:07,300 --> 00:08:10,940 Donc, c'est ce qui définit la couleur du bouton ici. 106 00:08:10,940 --> 00:08:15,910 Donc, dans ce cas, cette couleur de bouton est bleue. 107 00:08:15,910 --> 00:08:18,750 Et donc, c'est la couleur principale dans Bootstrap. 108 00:08:18,750 --> 00:08:20,670 Donc btn-primaire. 109 00:08:20,670 --> 00:08:25,510 Et puis après cela, regardez l'utilisation du href ici. 110 00:08:25,510 --> 00:08:30,850 Donc, puisque c'est une balise A, je peux utiliser un attribut href dans cette balise A. 111 00:08:30,850 --> 00:08:33,610 Ainsi, l'attribut href pointe vers le numéro de téléphone. 112 00:08:35,110 --> 00:08:40,940 Et puis après que vous remarquez que j'utilise une icône de police ici pour le téléphone. 113 00:08:40,940 --> 00:08:47,560 C' est pourquoi j'ai i classe fa-phone et puis après l'appel de mot. 114 00:08:47,560 --> 00:08:53,170 Donc, c'est ce qui permet de construire ce 115 00:08:53,170 --> 00:08:58,550 bouton bleu, qui est inclus dans cette barre de boutons ici. 116 00:08:58,550 --> 00:09:04,150 De même, le suivant, vous remarquez que cela dit également bouton de rôle. 117 00:09:04,150 --> 00:09:07,795 Et puis, au fur et à mesure, vous voyez cette btn-info. 118 00:09:07,795 --> 00:09:12,235 BTN-info lui donne une couleur d'un bleu clair en couleur. 119 00:09:12,235 --> 00:09:18,665 Donc, par défaut btn-info fait référence à un bouton de couleur bleu clair ici. 120 00:09:18,665 --> 00:09:22,975 Et puis, vous pouvez voir que j'ai le Skype défini ici. 121 00:09:22,975 --> 00:09:28,172 Et puis le troisième qui, est un bouton vert là avec email. 122 00:09:28,172 --> 00:09:34,542 Notez que je spécifie des lettres a role = button class = btn btn-success. 123 00:09:34,542 --> 00:09:38,132 Donc, quand vous dites btn-success, ce sera un bouton vert ici. 124 00:09:38,132 --> 00:09:44,102 Donc, vous avez quelques couleurs qui sont déjà définies dans Bootstrap. 125 00:09:44,102 --> 00:09:48,322 Primaire fait référence au bleu pour le premier, le succès bleu clair se réfère à 126 00:09:49,390 --> 00:09:54,250 la couleur verte, alors vous avez un avertissement qui serait une couleur jaune pâle, 127 00:09:54,250 --> 00:09:56,150 puis le danger, qui est une couleur rouge. 128 00:09:56,150 --> 00:09:59,763 Donc, ce sont des couleurs par défaut qui ont été configurées dans Bootstrap. 129 00:10:01,712 --> 00:10:06,602 Et puis la configuration href, avec le mailto ici, 130 00:10:06,602 --> 00:10:10,140 puis après cela, vous avez le. 131 00:10:11,972 --> 00:10:16,030 Police comme icône ici, puis l'e-mail là. 132 00:10:16,030 --> 00:10:21,410 Donc, ces trois balises e, qui agissent actuellement comme des boutons, 133 00:10:21,410 --> 00:10:26,780 sont enfermés à côté de ces div, qui agit comme le groupe btn-. 134 00:10:26,780 --> 00:10:32,100 Donc, c'est ainsi que nous affichons un groupe de boutons dans Bootstrap. 135 00:10:32,100 --> 00:10:34,470 Si vous voulez juste un bouton unique, 136 00:10:34,470 --> 00:10:37,220 tout ce que vous devez faire est d'inclure une seule de ces lignes là-bas. 137 00:10:38,270 --> 00:10:41,130 Ainsi, vous pouvez également utiliser la balise button. 138 00:10:41,130 --> 00:10:44,270 Si vous utilisez la balise button, vous n'avez pas besoin de spécifier le rôle, à la 139 00:10:44,270 --> 00:10:46,730 place, vous dites simplement bouton de type. 140 00:10:46,730 --> 00:10:49,700 Parce qu'un bouton pourrait également agir comme un bouton de soumission là-bas. 141 00:10:49,700 --> 00:10:54,140 Donc, plus tard, dans les formulaires, nous allons regarder l'utilisation de la balise bouton, 142 00:10:54,140 --> 00:10:57,040 pour créer un bouton à inclure dans notre formulaire. 143 00:10:58,600 --> 00:11:03,900 En poursuivant l'exercice, notre prochaine étape serait de commencer, 144 00:11:03,900 --> 00:11:08,790 développer le formulaire que nous allons inclure dans la page contactus.html. 145 00:11:08,790 --> 00:11:13,350 Nous allons le faire étape par étape, de sorte qu'à chaque étape, nous apprenons un peu 146 00:11:13,350 --> 00:11:17,610 comment vous incluez certains éléments dans leur forme. 147 00:11:17,610 --> 00:11:24,480 Donc, comme un début, quand vous allez à la page contactus.html, 148 00:11:24,480 --> 00:11:29,430 juste là, vous verrez cette instruction appelée, le formulaire va ici. 149 00:11:29,430 --> 00:11:34,771 Maintenant, ce que je vais faire est de changer ceci de col-sm 150 00:11:34,771 --> 00:11:39,480 à col-md, de sorte que pour les 151 00:11:39,480 --> 00:11:44,290 tailles d'écran extra petites à petites, ma forme sera disposée en 152 00:11:44,290 --> 00:11:49,352 occupant toute la largeur de l'écran, car elle utilise col-xs-12. 153 00:11:49,352 --> 00:11:53,024 Mais à partir de l'écran de taille moyenne sur les salles, 154 00:11:53,024 --> 00:11:57,290 il n'occupera que 9 sur 12 colonnes. 155 00:11:57,290 --> 00:11:59,600 Alors, commençons à construire le formulaire. 156 00:11:59,600 --> 00:12:05,470 Donc, ce que je vais faire, c'est, je vais remplacer ceci, par mon premier morceau de code. 157 00:12:06,580 --> 00:12:11,300 Nous allons inclure deux champs dans notre formulaire, pour 158 00:12:11,300 --> 00:12:14,280 le prénom et le nom de famille de l'utilisateur. 159 00:12:14,280 --> 00:12:17,440 Laissez-moi ajouter le code, alors nous allons regarder le résultat. 160 00:12:17,440 --> 00:12:19,750 Et puis, nous reviendrons examiner le code. 161 00:12:19,750 --> 00:12:23,190 Donc, en ajoutant le code à 162 00:12:23,190 --> 00:12:27,820 ce stade, comme toujours, ces extraits de code sont dans les instructions. 163 00:12:27,820 --> 00:12:30,510 Alors, laissez-moi enregistrer les changements. 164 00:12:30,510 --> 00:12:35,690 Et puis nous allons revenir en arrière et regarder à quoi ressemble ce formulaire dans le navigateur. En 165 00:12:35,690 --> 00:12:40,250 regardant le formulaire, vous verrez qu'ils ont maintenant deux thèmes dans le formulaire ici. 166 00:12:42,060 --> 00:12:46,790 Le premier, a une étiquette sur le côté gauche indiquant Prénom et 167 00:12:46,790 --> 00:12:49,780 puis vous avez la boîte de saisie ici. 168 00:12:49,780 --> 00:12:52,800 Et puis le Nom, puis une boîte de saisie ici. 169 00:12:52,800 --> 00:12:56,710 Maintenant, vous remarquez aussi que ce formulaire est disposé, de sorte 170 00:12:56,710 --> 00:13:00,510 que cette partie occupe la demi-partie de l'écran, et 171 00:13:00,510 --> 00:13:03,620 la partie restante étant occupée par la partie restante de l'écran. 172 00:13:03,620 --> 00:13:08,400 Vous commencez à vous demander comment on fait ça ? 173 00:13:09,720 --> 00:13:15,095 Est-ce que la grille Bootstrap nous aide à décider de ces tailles. 174 00:13:15,095 --> 00:13:18,725 Ce serait une très bonne question à vous poser. 175 00:13:18,725 --> 00:13:21,695 Voyons le code et comprenons à quoi il ressemble. 176 00:13:21,695 --> 00:13:26,595 Avant de le faire, jetons un oeil à la même disposition des formulaires, 177 00:13:26,595 --> 00:13:29,595 dans la taille d'écran extra petite. 178 00:13:29,595 --> 00:13:32,795 Donc, passer à la taille d'écran extra petite. 179 00:13:32,795 --> 00:13:34,425 Donc on va au Galaxy S5. 180 00:13:35,490 --> 00:13:40,060 Vous remarquez, comment le formulaire est disposé dans la taille de l'écran extra petit. 181 00:13:40,060 --> 00:13:44,304 Donc, vous verrez que l'étiquette est sur le dessus, 182 00:13:44,304 --> 00:13:50,590 puis la boîte elle-même, la boîte de saisie elle-même est le bas, de la même manière pour le nom de famille. 183 00:13:50,590 --> 00:13:53,420 Donc, vous remarquez que Bootstrap. 184 00:13:53,420 --> 00:13:57,500 En passant, il fournit ces classes de formulaire. 185 00:13:57,500 --> 00:14:02,460 Automatiquement, rend votre formulaire réactif, de sorte que lorsqu'il est 186 00:14:02,460 --> 00:14:07,450 disposé sur différentes tailles d'écran, le formulaire sera correctement disposé, de 187 00:14:07,450 --> 00:14:12,550 sorte qu'il ne sera pas tout écrasé sur de petites tailles d'écran. 188 00:14:13,610 --> 00:14:17,220 Mais pour les plus grandes tailles d'écran, parce que vous avez des biens immobiliers plus grands, 189 00:14:17,220 --> 00:14:23,480 vous êtes en mesure d'étirer la forme, de faire usage de l'espace supplémentaire que vous avez. En 190 00:14:24,830 --> 00:14:31,150 regardant ce code source, et le formulaire côte à côte, évidemment 191 00:14:31,150 --> 00:14:36,140 la première chose que vous remarquez, c'est que votre formulaire commence par la balise form ici. 192 00:14:36,140 --> 00:14:40,160 Donc, formulaire, puis le formulaire de fermeture, tag ici. 193 00:14:40,160 --> 00:14:45,970 Donc, à l'intérieur, vous décrivez les différentes parties de votre formulaire. 194 00:14:45,970 --> 00:14:49,150 Donc, regardons comment le prénom est construit, 195 00:14:49,150 --> 00:14:54,390 le nom de famille évidemment tel qu'il ressemble devrait utiliser une approche similaire. 196 00:14:54,390 --> 00:15:01,240 Donc, par défaut, ce que vous remarquez est que, il y a un div ici. 197 00:15:01,240 --> 00:15:06,480 élément Div ici, avec la div de clôture ici. 198 00:15:06,480 --> 00:15:10,515 Donc, cet élément div a une classe appelée form-group. 199 00:15:11,920 --> 00:15:15,108 Et puis suivi d'une classe de ligne. 200 00:15:15,108 --> 00:15:17,080 Donc, la classe form-group essentiellement, 201 00:15:17,080 --> 00:15:22,580 dit tout ce qui est à l'intérieur de cette div sera traité comme un groupe d'éléments. 202 00:15:22,580 --> 00:15:26,120 Et puis ils seront disposés en conséquence. 203 00:15:26,120 --> 00:15:30,902 Et la deuxième partie, vous voyez l'utilisation de la ligne ici. 204 00:15:30,902 --> 00:15:35,740 Donc, vous verrez que la ligne du groupe Bootstrap entre en jeu ici. 205 00:15:35,740 --> 00:15:40,610 Et donc ce groupe de formulaires particulier, peut être disposé 206 00:15:40,610 --> 00:15:45,480 en utilisant la ligne et les classes de colonnes que vous avez à partir de la grille Bootstrap. 207 00:15:45,480 --> 00:15:48,506 Donc maintenant, si vous appliquez la ligne à cette div, 208 00:15:48,506 --> 00:15:52,956 quoi qu'il y ait à l'intérieur, vous pouvez utiliser les classes 209 00:15:52,956 --> 00:15:58,741 de colonne, pour décider exactement combien d'espace chacun d'eux va occuper à l'écran. 210 00:15:58,741 --> 00:16:05,390 Maintenant, donc cela le rend plus clair à, donc ces groupes de formulaires s'enferme. 211 00:16:05,390 --> 00:16:06,650 Cette unité. 212 00:16:06,650 --> 00:16:08,570 Nous allons voir cette répétition encore et 213 00:16:08,570 --> 00:16:14,460 encore lorsque nous concevons les différents éléments du formulaire. 214 00:16:14,460 --> 00:16:20,020 Ensuite, en dessous de cela, vous voyez cette étiquette d'étiquette ici. 215 00:16:20,020 --> 00:16:25,180 Pour la balise d'étiquette, certains attributs lui ont été attribués. 216 00:16:25,180 --> 00:16:28,740 Donc, vous voyez que la balise label utilise un for firstname. 217 00:16:28,740 --> 00:16:33,650 Donc, cette étiquette est pour quelque chose avec l'identifiant prénom. 218 00:16:33,650 --> 00:16:37,690 Donc, quelle est la boîte de saisie qui suit juste en dessous de cela. 219 00:16:37,690 --> 00:16:39,790 Nous allons regarder ça dans un court moment. 220 00:16:39,790 --> 00:16:46,136 Et puis regardez les classes qui sont appliquées à la classe d'étiquettes, col-md-2. 221 00:16:46,136 --> 00:16:50,029 Donc, pour les écrans de taille moyenne à extra grande, 222 00:16:50,029 --> 00:16:56,040 cet élément particulier va occuper 2 colonnes de l'espace. 223 00:16:56,040 --> 00:16:57,884 Et puis notez l'autre. 224 00:16:57,884 --> 00:17:00,764 C' est écrit, col-form-label. 225 00:17:00,764 --> 00:17:05,957 Donc, le col-form-label spécifie essentiellement 226 00:17:05,957 --> 00:17:11,780 que cette étiquette doit être positionnée pour être alignée avec 227 00:17:11,780 --> 00:17:18,270 l'autre élément qui fait partie de ce groupe de formulaires. 228 00:17:18,270 --> 00:17:20,576 Donc, dans ce cas, la boîte de saisie. 229 00:17:20,576 --> 00:17:24,508 Et donc cela signifie aussi que 230 00:17:24,508 --> 00:17:29,868 l'étiquette doit être alignée au milieu, 231 00:17:29,868 --> 00:17:35,550 horizontalement avec la boîte de saisie. 232 00:17:35,550 --> 00:17:39,535 C' est donc la raison pour laquelle nous utilisons la classe col-form-label. 233 00:17:39,535 --> 00:17:43,725 Si vous ne l'appliquez pas, votre étiquette sera 234 00:17:43,725 --> 00:17:48,185 alignée sur la partie supérieure de votre zone de saisie. 235 00:17:48,185 --> 00:17:53,551 Quelle forme ne sera pas aussi belle sur les tailles d'écran moyennes à très grandes. 236 00:17:53,551 --> 00:17:59,727 Maintenant, sur le côté gauche, bien sûr, parce que cette fenêtre du navigateur est écrasée, 237 00:17:59,727 --> 00:18:05,360 donc il montre la vue dans une petite ou extra petite taille d'écran ici. 238 00:18:05,360 --> 00:18:11,650 C' est pourquoi vous voyez l'étiquette s'empiler au-dessus de la boîte de saisie ici. 239 00:18:11,650 --> 00:18:14,560 C' est donc l'étiquette qui spécifie. 240 00:18:14,560 --> 00:18:18,380 Donc, si vous avez une étiquette que vous voulez affecter à un élément, 241 00:18:18,380 --> 00:18:20,890 c'est ainsi que vous allez affecter l'étiquette. 242 00:18:20,890 --> 00:18:25,740 En bas ici, vous voyez une classe div col-md-10. 243 00:18:25,740 --> 00:18:29,120 Donc, cela occupe les 10 autres des 12 colonnes. 244 00:18:29,120 --> 00:18:31,670 Donc, deux colonnes qui sont occupées par l'étiquette. 245 00:18:31,670 --> 00:18:36,070 Et les dix colonnes restantes occupées par cela, mais est enfermé à l'intérieur de la div. 246 00:18:36,070 --> 00:18:38,230 Et à l'intérieur de cette div, 247 00:18:38,230 --> 00:18:43,493 vous voyez qu'il y a un élément de balise d'entrée avec le texte de type. 248 00:18:43,493 --> 00:18:49,734 Donc, ce qui signifie que cette zone de saisie accepte la saisie de texte. 249 00:18:49,734 --> 00:18:52,170 Et la classe, regardez la classe ici. 250 00:18:52,170 --> 00:18:54,800 Ça dit le contrôle de la forme. 251 00:18:54,800 --> 00:18:57,730 Ceci est important à appliquer à la boîte de saisie ici. 252 00:18:57,730 --> 00:19:01,301 Donc form-control, et id prénom. 253 00:19:01,301 --> 00:19:04,550 Et le nom qui est prénom. 254 00:19:04,550 --> 00:19:07,630 Puis espace réservé Prénom. 255 00:19:07,630 --> 00:19:12,840 Donc, l'espace réservé est ce qui apparaît à l'intérieur de la zone en tant qu'espace réservé pour 256 00:19:12,840 --> 00:19:14,610 la zone de saisie. 257 00:19:14,610 --> 00:19:17,470 Donc tous ces attributs sont assignés. 258 00:19:17,470 --> 00:19:18,690 Plus important encore, 259 00:19:18,690 --> 00:19:23,810 notez l'utilisation de la classe de contrôle de formulaire appliquée au type d'entrée. 260 00:19:23,810 --> 00:19:29,960 C' est ainsi que vous structurez ces deux éléments dans votre forme. 261 00:19:29,960 --> 00:19:35,425 Pour les petites tailles d'écran et en dessous, il empile les deux choses. 262 00:19:35,425 --> 00:19:37,118 Mais pour les moyennes à très grandes, 263 00:19:37,118 --> 00:19:41,500 vous avez vu qu'il les positionne horizontalement côte à côte. 264 00:19:41,500 --> 00:19:45,645 La même chose s'applique également au code nom de famille. 265 00:19:45,645 --> 00:19:49,670 Ce sera très similaire à la façon dont le prénom est structuré. 266 00:19:49,670 --> 00:19:54,380 Donc, j'aimerais que vous passiez un peu de temps à jeter un oeil à ce code aussi. Pour 267 00:19:54,380 --> 00:19:58,150 que vous voyez, en fonction de votre compréhension de cela, 268 00:19:58,150 --> 00:20:00,230 comment cela est également formaté. 269 00:20:01,550 --> 00:20:08,360 Le prochain type d'événement formel que nous ajouterons est un élément de groupe d'entrée. 270 00:20:08,360 --> 00:20:09,330 Laissez-moi ajouter le code. 271 00:20:09,330 --> 00:20:13,111 Nous allons voir ce que le formulaire s'avère être. 272 00:20:13,111 --> 00:20:15,560 Et puis nous allons revenir en arrière et examiner le code. 273 00:20:15,560 --> 00:20:19,542 Donc, juste ici, après la deuxième div, après le champ lastname, 274 00:20:19,542 --> 00:20:24,840 je vais inclure le code pour l'élément suivant ici. 275 00:20:25,880 --> 00:20:28,142 Et puis sauvegardons les modifications. 276 00:20:28,142 --> 00:20:30,466 Et puis, immédiatement, 277 00:20:30,466 --> 00:20:36,360 vous verriez quelques autres choses ajoutées dans votre formulaire. 278 00:20:36,360 --> 00:20:38,975 Vous voyez un champ de numéro de téléphone ajouté ici. 279 00:20:38,975 --> 00:20:42,985 Ceci, d'après le regard, vous voyez que c'est très similaire à cela. 280 00:20:42,985 --> 00:20:45,335 Donc, je ne vais pas expliquer le code pour ça. 281 00:20:45,335 --> 00:20:48,110 Cela devrait être très simple pour vous de le comprendre. 282 00:20:48,110 --> 00:20:52,073 Et puis ce champ de courriel devrait également être très simple pour 283 00:20:52,073 --> 00:20:53,747 vous de comprendre. 284 00:20:53,747 --> 00:20:56,537 Parce que cela semble très similaire au nom de famille. 285 00:20:56,537 --> 00:21:02,477 Sauf que pour cela, le champ d'entrée, le type sera défini sur e-mail. 286 00:21:02,477 --> 00:21:06,739 De sorte que les fonctionnalités intégrées de vérification de formulaire de 287 00:21:06,739 --> 00:21:10,094 votre navigateur démarrent automatiquement. 288 00:21:10,094 --> 00:21:14,113 Ainsi, lorsque vous tapez quelque chose qui ne ressemble pas à un e-mail, 289 00:21:14,113 --> 00:21:16,860 alors il se plaindra de manière appropriée. 290 00:21:16,860 --> 00:21:21,780 Examinons cette partie particulière du formulaire ici. 291 00:21:21,780 --> 00:21:27,500 Notez que dans ce cas, nous ajoutons entre parenthèses gauche et 292 00:21:27,500 --> 00:21:31,430 la parenthèse droite à cette boîte de saisie particulière. 293 00:21:31,430 --> 00:21:36,570 Alors, comment ajouter des choses dans votre boîte comme ça ? En 294 00:21:36,570 --> 00:21:41,330 regardant le code ici dans votre éditeur, 295 00:21:41,330 --> 00:21:45,750 vous voyez que vous avez toujours la ligne Form-group que vous comprenez déjà. 296 00:21:45,750 --> 00:21:50,942 Et en bas ici, vous avez l'élément de formulaire de type d'entrée id telnum, 297 00:21:50,942 --> 00:21:54,460 et ainsi de suite, qui devrait également être très clair pour vous. 298 00:21:54,460 --> 00:21:57,360 Donc je ne pense pas avoir besoin de t'expliquer cette partie. 299 00:21:57,360 --> 00:22:04,366 Notez comment j'utilise les classes de colonne de grille de Bootstrap à chacun d'entre eux. 300 00:22:04,366 --> 00:22:08,060 Donc, l'étiquette est donnée col-md-2. 301 00:22:08,060 --> 00:22:12,062 Et puis le numéro de téléphone 1 est donné 302 00:22:12,062 --> 00:22:16,880 col-xs-7 col-sm-6 et col-md-7 ici. 303 00:22:16,880 --> 00:22:23,100 Ainsi, le numéro de téléphone, cet élément est correctement positionné. 304 00:22:23,100 --> 00:22:27,310 Mais, en particulier, faisons attention à cette partie. 305 00:22:27,310 --> 00:22:31,470 Donc celui-ci est à l'intérieur de cette div. 306 00:22:32,670 --> 00:22:36,250 Donc, à l'intérieur de cette div, remarquez la classe qui lui est donnée. 307 00:22:36,250 --> 00:22:38,689 La classe dit groupe d'entrées-groupe. 308 00:22:38,689 --> 00:22:43,587 Donc essentiellement, ce qui signifie que tout ce qui est à l'intérieur de cette div sera traité comme 309 00:22:43,587 --> 00:22:45,350 un groupe d'éléments ici. 310 00:22:45,350 --> 00:22:49,030 C' est pourquoi la classe donnée est input-group. 311 00:22:49,030 --> 00:22:53,600 Maintenant, pour ajouter quelque chose comme ça, vous allez utiliser 312 00:22:53,600 --> 00:22:59,000 une classe appelée input-group-addon. 313 00:22:59,000 --> 00:23:04,490 Et puis remarquez que j'utilise un div pour contenir cet article. 314 00:23:04,490 --> 00:23:08,200 Je peux utiliser n'importe quoi ici, mais un div est utile ici. 315 00:23:08,200 --> 00:23:12,980 Donc, je dis div classe input-group-addon. 316 00:23:12,980 --> 00:23:16,250 Et puis le type div de fermeture à l'intérieur, où, 317 00:23:16,250 --> 00:23:18,500 remarquez que j'ai la parenthèse gauche. 318 00:23:18,500 --> 00:23:25,477 Donc, c'est ce qui vous permet d'ajouter un 319 00:23:25,477 --> 00:23:30,963 appendice supplémentaire à votre boîte de saisie ici. 320 00:23:30,963 --> 00:23:38,390 De même, celui ci-dessous est aussi une parenthèse droite d'entrée-groupe-addon. 321 00:23:38,390 --> 00:23:42,350 C' est donc ce qui ajoute l'autre parenthèse droite ici. 322 00:23:42,350 --> 00:23:46,270 Maintenant, entre ces deux, bien sûr, vous avez le type d'entrée. 323 00:23:46,270 --> 00:23:51,094 L' entrée avec le type tel et la classe form-control, id, nom, 324 00:23:51,094 --> 00:23:54,310 espace réservé, tout en place ici. 325 00:23:54,310 --> 00:23:57,190 Donc, ce n'est rien d'autre que la partie indicatif régional. 326 00:23:57,190 --> 00:24:02,049 Donc, si vous utilisez ce groupe d'entrées-groupe avec des addons 327 00:24:02,049 --> 00:24:04,440 input-group-comme celui-ci de chaque côté. 328 00:24:04,440 --> 00:24:10,070 Ces choses seront ajoutées à votre élément d'entrée comme ceci. 329 00:24:10,070 --> 00:24:15,880 Cela vous fournit une belle façon de concevoir Votre formulaire avec certains ajoutés. 330 00:24:15,880 --> 00:24:20,170 Par exemple, si vous avez un champ qui accepte de 331 00:24:22,450 --> 00:24:27,360 l'argent comme entrée, vous pouvez simplement ajouter un signe dollar sur le côté gauche pour 332 00:24:27,360 --> 00:24:33,050 indiquer à l'utilisateur qu'il s'agit d'un champ qui prend la valeur monétaire pour le moment. En ce 333 00:24:33,050 --> 00:24:37,558 moment, dans ce cas, ce champ contient un indicatif régional. 334 00:24:37,558 --> 00:24:43,330 Et si vous voyez comment les codes régionaux sont écrits aux États-Unis et 335 00:24:43,330 --> 00:24:47,640 au Canada, vous savez qu'ils sont enfermés entre parenthèses gauche et droite. 336 00:24:47,640 --> 00:24:52,680 Donc, c'est ce qui me permet de spécifier quelque chose comme ça dans ma forme là-bas. 337 00:24:53,900 --> 00:24:56,460 Mon prochain ensemble d'éléments que je vais ajouter à mon 338 00:24:56,460 --> 00:25:01,530 formulaire sont une case à cocher et une sélection. 339 00:25:01,530 --> 00:25:03,460 Alors, comment ajouter ça ? 340 00:25:03,460 --> 00:25:09,014 Ainsi, si vous êtes familier avec les formulaires HTML, vous comprenez comment la sélection fonctionne et 341 00:25:09,014 --> 00:25:13,070 vous comprenez comment les cases à cocher fonctionnent dans les formulaires HTML. 342 00:25:13,070 --> 00:25:15,880 Maintenant, Bootstrap vous donne quelques 343 00:25:15,880 --> 00:25:20,080 classes supplémentaires qui vous permettent de formater ces éléments de manière appropriée. 344 00:25:20,080 --> 00:25:21,740 Alors, permettez-moi d'ajouter la citation. 345 00:25:23,400 --> 00:25:25,120 Sauvegardons les modifications. 346 00:25:25,120 --> 00:25:29,695 Jetez un oeil à ce que cela entraîne dans le formulaire ici. 347 00:25:29,695 --> 00:25:32,480 Et puis jetez un oeil au code. 348 00:25:32,480 --> 00:25:38,060 Donc ici, vous voyez que j'ai une case à cocher et un message ici. 349 00:25:38,060 --> 00:25:45,372 Et puis c'est un sélecteur qui me permet de choisir parmi un ensemble de choix ici. 350 00:25:47,324 --> 00:25:53,309 Maintenant, la forme telle qu'elle existe ici est ce que vous verrez dans les 351 00:25:53,309 --> 00:25:56,080 tailles d'écran petites et extra petites. 352 00:25:56,080 --> 00:25:59,940 Jetons un coup d'oeil sur un écran plus grand. 353 00:25:59,940 --> 00:26:04,740 La même forme lorsqu'elle est disposée sur des 354 00:26:04,740 --> 00:26:06,760 écrans de taille moyenne à extra grande ressemblera à ceci. 355 00:26:06,760 --> 00:26:11,440 Ainsi, vous pouvez voir comment le numéro de téléphone de contact est positionné ici, 356 00:26:11,440 --> 00:26:14,500 et l'e-mail est positionné ici. 357 00:26:14,500 --> 00:26:19,825 Notez donc que ces étiquettes sont 358 00:26:19,825 --> 00:26:26,510 alignées sur une ligne au milieu avec les cases ici. 359 00:26:26,510 --> 00:26:32,640 C' est ce que la classe d'étiquette de forme de col atteint en premier. 360 00:26:32,640 --> 00:26:36,940 Maintenant, concentrons-nous sur ce que nous venons d'ajouter. 361 00:26:36,940 --> 00:26:40,060 Ici, nous voyons que nous avons une case à cocher ajoutée. 362 00:26:40,060 --> 00:26:43,312 Et puis, un champ de texte ici. 363 00:26:43,312 --> 00:26:44,650 Alors peut-on vous contacter ? 364 00:26:44,650 --> 00:26:51,370 Ainsi, par exemple, vous vous attendez à ce que l'utilisateur le vérifie ou le désactive. 365 00:26:51,370 --> 00:26:53,500 Alors, quelle est la raison d'une case à cocher ? 366 00:26:53,500 --> 00:26:56,330 De même, vous pourriez avoir des boutons radio. 367 00:26:56,330 --> 00:27:02,020 Bootstrap prend en charge les boutons radio qui sont disponibles dans les formulaires HTML. 368 00:27:02,020 --> 00:27:05,650 Et fournir quelques classes pour les coiffer correctement. 369 00:27:05,650 --> 00:27:10,850 Et puis c'est bien sûr le sélecteur qui vous permet de choisir parmi les choix. 370 00:27:10,850 --> 00:27:13,113 Donc, en retournant et en regardant le code. 371 00:27:13,113 --> 00:27:15,250 Voyons comment cela est mis en œuvre. 372 00:27:16,340 --> 00:27:22,030 En revenant jeter un oeil au code, vous voyez que celui-ci est à nouveau un 373 00:27:22,030 --> 00:27:28,630 div de ligne de groupe de formulaires ici qui entoure deux choses ici. 374 00:27:28,630 --> 00:27:32,859 L' un est un form-check 375 00:27:32,859 --> 00:27:38,731 col-md-6 offset-md-2. 376 00:27:38,731 --> 00:27:45,120 C' est donc ce qui entoure une case à cocher à l'intérieur de cet élément div. 377 00:27:45,120 --> 00:27:53,902 Et puis en bas ici j'ai une classe div, Col-MD-3 offset-md-1. 378 00:27:53,902 --> 00:27:59,979 Donc remarquez qu'ici, cela dit form-check col-md-6 offset-md-2. 379 00:27:59,979 --> 00:28:04,197 La raison pour laquelle je fais un offset-md-2 est que je n'ai pas d'étiquette. 380 00:28:04,197 --> 00:28:08,166 Donc, j'utilisais généralement deux colonnes pour les étiquettes. 381 00:28:08,166 --> 00:28:13,160 Donc, puisque cette case à cocher devrait s'aligner sur le côté droit dans le formulaire. 382 00:28:13,160 --> 00:28:16,591 C' est pourquoi j'ai utilisé offset-md-2 ici. 383 00:28:16,591 --> 00:28:22,654 Et puis à l'intérieur, il est dit label class="form-check-label ». 384 00:28:22,654 --> 00:28:28,042 Et puis il fournit la balise d'entrée 385 00:28:28,042 --> 00:28:32,790 ici avec la case à cocher de type. 386 00:28:32,790 --> 00:28:35,070 C' est ainsi que vous créez une case à cocher. 387 00:28:35,070 --> 00:28:38,300 Et puis la classe, la classe Bootstrap que vous allez appliquer à 388 00:28:38,300 --> 00:28:41,768 votre case à cocher est form-check-input. 389 00:28:41,768 --> 00:28:49,390 Et puis le nom et la valeur initiale sont vides. 390 00:28:49,390 --> 00:28:54,262 Et puis, celui-ci est l'étiquette réelle que vous voyez être 391 00:28:54,262 --> 00:28:58,670 appliquée à cette case à cocher particulière là. 392 00:28:58,670 --> 00:29:04,260 Notez donc comment ces deux sont enfermés dans une étiquette d'étiquette ici. 393 00:29:04,260 --> 00:29:09,070 C' est ainsi que vous créez une case à cocher avec son étiquette 394 00:29:09,070 --> 00:29:12,980 , puis positionnez cette case dans votre formulaire ici. 395 00:29:12,980 --> 00:29:15,840 Donc, ceci ici utilise form-check-label. 396 00:29:15,840 --> 00:29:19,880 Et puis ici, vous devez avoir une case à cocher, input type="checkbox », 397 00:29:19,880 --> 00:29:21,340 puis étiqueter lui-même. 398 00:29:21,340 --> 00:29:23,620 Donc ici vous voyez fort, peut-on vous contacter ? 399 00:29:23,620 --> 00:29:29,770 C' est pourquoi il est affiché en caractères gras juste à côté de la case à cocher ici. 400 00:29:29,770 --> 00:29:37,390 Maintenant ci-dessous dans le code, vous avez une classe div col-md-3 offset-md-1. 401 00:29:37,390 --> 00:29:40,760 Cela occupe donc trois colonnes dans un décalage de colonne. 402 00:29:40,760 --> 00:29:42,980 Donc le total de quatre colonnes ici. 403 00:29:42,980 --> 00:29:50,113 Donc celui-ci est col-md-6 plus 2, donc c'est huit colonnes. 404 00:29:50,113 --> 00:29:51,480 Donc 8 plus 4, 12. 405 00:29:51,480 --> 00:29:55,140 Donc, cela prend soin de vos 12 colonnes pour votre grille là-bas. 406 00:29:55,140 --> 00:30:01,740 Maintenant, à l'intérieur de cela, vous voyez une sélection appliquée ici. 407 00:30:02,880 --> 00:30:07,320 Maintenant, c'est l'option de sélection que les formulaires de fichiers HTML prennent en charge. 408 00:30:07,320 --> 00:30:09,240 Et regardez la classe appliquée à cela. 409 00:30:09,240 --> 00:30:12,870 Il est dit class="form-control » à la sélection. 410 00:30:12,870 --> 00:30:15,830 Et puis vous donnez les options dans la sélection ici. 411 00:30:15,830 --> 00:30:18,638