[MUSIQUE]
Dans cet exercice, nous allons examiner le support de Bootstrap pour les boutons et les formulaires.
Nous allons donc inclure quelques boutons et un groupe de boutons dans notre page Web.
Et nous examinons également la conception de formulaires et le style des formulaires à l'aide de classes Bootstrap.
Pour commencer, allez à la page d'instructions et
téléchargez le fichier contactus.html.zip que nous avons fourni.
Donc, faites un clic droit sur cela,
puis enregistrez ce lien dans votre dossier Confusion.
Comme,
contactus.html.zip fichier.
Et puis une fois que le fichier zip est téléchargé, décompressez le fichier pour obtenir la page contactus.html.
Ensuite, vous pouvez supprimer le fichier zip.
Une fois que vous avez décompressé le fichier et obtenir la page contactus.html,
vous remarquerez que lorsque vous chargez cette page dans votre
navigateur en utilisant localhost:3000/ contactus.html,
vous verrez que cette page est déjà pré-formatée avec du contenu.
Ainsi, vous pouvez remarquer que vous avez déjà la barre de navigation là-bas.
Nous avons le jumbotron déjà formaté pour nous.
Et vous remarquerez que j'ai la chapelure et
le nom de contact ici formaté.
Ensuite, vous verrez quelques informations supplémentaires, l'adresse ici.
Et aussi, vous remarquerez que le pied de page est déjà formaté.
Mais vous remarquerez deux choses ici,
vous remarquerez qu'il y a une ligne ici qui dit que les groupes de boutons vont ici et
puis une ligne de plus ici qui dit forme va ici.
Nous allons donc les remplacer par un groupe de boutons et un formulaire.
Et en cours de route, apprenez le support de Bootstrap pour les boutons et les formulaires.
Avant d'aller de l'avant, maintenant que nous avons trois pages dans notre site Web,
il est conseillé de les relier ensemble, à la
fois dans la barre de navigation et dans les liens dans le pied de page.
Modifions ces deux pages afin que nous puissions naviguer facilement entre ces trois pages.
Donc, en allant à la page contactus.html, vous remarquerez que dans la barre de navigation,
j'ai déjà les liens vers index.html configurés correctement.
Et vous remarquerez qu'en bas
ici vous avez le lien de contact ici.
Mais le lien correspondant à environ n'a pas été configuré correctement.
Alors allez à ce lien ici, puis mettez à jour vers
aboutus.html.
Le lien Contactez-nous peut être laissé seul en tant que tel.
Et puis enregistrez les modifications.
Maintenant, de même, allez au pied de page de cette page.
Et vous remarquerez que dans le pied de page nous avons ces trois liens ici.
Et cela peut être un bon point pour remplacer les liens
par les liens vers les pages correspondantes.
Donc, je vais dire, index.html, aboutus.html,
et, contactus.html.
Et enregistrez les modifications.
De même, allez à index.html, puis dans index.html aussi,
le lien de contact n'a pas été configuré.
Alors mettons à jour cela à contactus.html.
Et puis de même, mettez à jour les liens dans le pied de page.
Allez également dans aboutus.html, puis fixez les liens même là.
Donc, dans le aboutus.html aussi, dans l'en-tête, je vais réparer le lien.
Et aussi dans le pied de page de aboutus.html.
Maintenant, lorsque vous
accédez à votre site Web, vous pourrez revenir à votre page d'accueil, à votre page d'accueil.
Et à partir de la page à propos, vous pouvez même revenir à la page des contacts.
Donc, tous les liens entre les trois pages dans les en-têtes correspondants,
ainsi que les pieds de page, ici devraient être configurés.
Ainsi, si vous cliquez sur l'un de ceux-ci vous mènera à la page appropriée.
Il est maintenant temps de commencer à travailler sur les boutons que nous allons
inclure dans notre page contactus.html.
Donc, ce que je vais faire est que je remplacerai cette ligne par
le code pour le bouton et le groupe de boutons et
puis après cela, nous reviendrons pour expliquer comment tout cela fonctionne. En
ouvrant contactus.html dans notre éditeur,
nous allons localiser l'endroit où cette déclaration, groupe de boutons va ici, existe.
Et puis je vais remplacer cela par le code correspondant à
ce groupe de boutons d'abord.
Et puis je reviendrai pour expliquer comment ce code fonctionne.
Donc, sauvegardons les modifications, puis jetons un oeil à ce que
ce groupe de boutons ressemble dans notre navigateur. En
accédant à votre navigateur, vous pouvez maintenant voir que dans notre
page Web le groupe de boutons a été créé.
Vous pouvez donc voir qu'il y a trois boutons ici, les
boutons Appel, Skype et E-mail.
Maintenant, tous ces trois sont réunis en une seule barre ou barre de
boutons ou ce qui est en termes Bootstrap appelé un groupe de boutons.
Alors regardons comment nous allons construire quelque chose comme ça dans le
code Bootstrap.
Donc ici, j'ai à la fois la fenêtre du navigateur et mon code ouvert côte à côte.
Jetons donc un coup d'oeil à la façon dont nous créons ce code de bouton. En
regardant le code, vous remarquez que
les boutons sont inclus dans un div ici.
Pour la div, nous appliquons la classe, btn-group.
Donc, si vous avez un groupe de boutons que vous voulez joindre ensemble et
présenter comme un groupe de boutons, comme une barre de boutons,
alors vous utiliseriez un div avec la classe de groupe de boutons et
le rôle en tant que groupe ici à ce div.
Maintenant à l'intérieur de cela, vous remarquerez que j'utilise la
balise, a, pour définir les trois boutons.
Alors regardons comment nous définissons les trois boutons.
Regardons comment nous définissons le bouton Appel.
Donc, cette ligne particulière définit le bouton Appel.
Donc, je dis, un, rôle est égal à bouton.
Donc ceci, un, tag ici,
je l'utilise comme un bouton ici.
C' est pourquoi je spécifie le rôle comme un bouton.
Donc c'est important.
Et puis regardez les cours que j'applique à cela.
Donc, le premier est la classe btn.
La classe btn est la classe de bouton de Bootstrap.
Donc, il affichera cela comme un bouton Bootstrap classique.
La deuxième partie dit est btn-primaire.
Donc, c'est ce qui définit la couleur du bouton ici.
Donc, dans ce cas, cette couleur de bouton est bleue.
Et donc, c'est la couleur principale dans Bootstrap.
Donc btn-primaire.
Et puis après cela, regardez l'utilisation du href ici.
Donc, puisque c'est une balise A, je peux utiliser un attribut href dans cette balise A.
Ainsi, l'attribut href pointe vers le numéro de téléphone.
Et puis après que vous remarquez que j'utilise une icône de police ici pour le téléphone.
C' est pourquoi j'ai i classe fa-phone et puis après l'appel de mot.
Donc, c'est ce qui permet de construire ce
bouton bleu, qui est inclus dans cette barre de boutons ici.
De même, le suivant, vous remarquez que cela dit également bouton de rôle.
Et puis, au fur et à mesure, vous voyez cette btn-info.
BTN-info lui donne une couleur d'un bleu clair en couleur.
Donc, par défaut btn-info fait référence à un bouton de couleur bleu clair ici.
Et puis, vous pouvez voir que j'ai le Skype défini ici.
Et puis le troisième qui, est un bouton vert là avec email.
Notez que je spécifie des lettres a role = button class = btn btn-success.
Donc, quand vous dites btn-success, ce sera un bouton vert ici.
Donc, vous avez quelques couleurs qui sont déjà définies dans Bootstrap.
Primaire fait référence au bleu pour le premier, le succès bleu clair se réfère à
la couleur verte, alors vous avez un avertissement qui serait une couleur jaune pâle,
puis le danger, qui est une couleur rouge.
Donc, ce sont des couleurs par défaut qui ont été configurées dans Bootstrap.
Et puis la configuration href, avec le mailto ici,
puis après cela, vous avez le.
Police comme icône ici, puis l'e-mail là.
Donc, ces trois balises e, qui agissent actuellement comme des boutons,
sont enfermés à côté de ces div, qui agit comme le groupe btn-.
Donc, c'est ainsi que nous affichons un groupe de boutons dans Bootstrap.
Si vous voulez juste un bouton unique,
tout ce que vous devez faire est d'inclure une seule de ces lignes là-bas.
Ainsi, vous pouvez également utiliser la balise button.
Si vous utilisez la balise button, vous n'avez pas besoin de spécifier le rôle, à la
place, vous dites simplement bouton de type.
Parce qu'un bouton pourrait également agir comme un bouton de soumission là-bas.
Donc, plus tard, dans les formulaires, nous allons regarder l'utilisation de la balise bouton,
pour créer un bouton à inclure dans notre formulaire.
En poursuivant l'exercice, notre prochaine étape serait de commencer,
développer le formulaire que nous allons inclure dans la page contactus.html.
Nous allons le faire étape par étape, de sorte qu'à chaque étape, nous apprenons un peu
comment vous incluez certains éléments dans leur forme.
Donc, comme un début, quand vous allez à la page contactus.html,
juste là, vous verrez cette instruction appelée, le formulaire va ici.
Maintenant, ce que je vais faire est de changer ceci de col-sm
à col-md, de sorte que pour les
tailles d'écran extra petites à petites, ma forme sera disposée en
occupant toute la largeur de l'écran, car elle utilise col-xs-12.
Mais à partir de l'écran de taille moyenne sur les salles,
il n'occupera que 9 sur 12 colonnes.
Alors, commençons à construire le formulaire.
Donc, ce que je vais faire, c'est, je vais remplacer ceci, par mon premier morceau de code.
Nous allons inclure deux champs dans notre formulaire, pour
le prénom et le nom de famille de l'utilisateur.
Laissez-moi ajouter le code, alors nous allons regarder le résultat.
Et puis, nous reviendrons examiner le code.
Donc, en ajoutant le code à
ce stade, comme toujours, ces extraits de code sont dans les instructions.
Alors, laissez-moi enregistrer les changements.
Et puis nous allons revenir en arrière et regarder à quoi ressemble ce formulaire dans le navigateur. En
regardant le formulaire, vous verrez qu'ils ont maintenant deux thèmes dans le formulaire ici.
Le premier, a une étiquette sur le côté gauche indiquant Prénom et
puis vous avez la boîte de saisie ici.
Et puis le Nom, puis une boîte de saisie ici.
Maintenant, vous remarquez aussi que ce formulaire est disposé, de sorte
que cette partie occupe la demi-partie de l'écran, et
la partie restante étant occupée par la partie restante de l'écran.
Vous commencez à vous demander comment on fait ça ?
Est-ce que la grille Bootstrap nous aide à décider de ces tailles.
Ce serait une très bonne question à vous poser.
Voyons le code et comprenons à quoi il ressemble.
Avant de le faire, jetons un oeil à la même disposition des formulaires,
dans la taille d'écran extra petite.
Donc, passer à la taille d'écran extra petite.
Donc on va au Galaxy S5.
Vous remarquez, comment le formulaire est disposé dans la taille de l'écran extra petit.
Donc, vous verrez que l'étiquette est sur le dessus,
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.
Donc, vous remarquez que Bootstrap.
En passant, il fournit ces classes de formulaire.
Automatiquement, rend votre formulaire réactif, de sorte que lorsqu'il est
disposé sur différentes tailles d'écran, le formulaire sera correctement disposé, de
sorte qu'il ne sera pas tout écrasé sur de petites tailles d'écran.
Mais pour les plus grandes tailles d'écran, parce que vous avez des biens immobiliers plus grands,
vous êtes en mesure d'étirer la forme, de faire usage de l'espace supplémentaire que vous avez. En
regardant ce code source, et le formulaire côte à côte, évidemment
la première chose que vous remarquez, c'est que votre formulaire commence par la balise form ici.
Donc, formulaire, puis le formulaire de fermeture, tag ici.
Donc, à l'intérieur, vous décrivez les différentes parties de votre formulaire.
Donc, regardons comment le prénom est construit,
le nom de famille évidemment tel qu'il ressemble devrait utiliser une approche similaire.
Donc, par défaut, ce que vous remarquez est que, il y a un div ici.
élément Div ici, avec la div de clôture ici.
Donc, cet élément div a une classe appelée form-group.
Et puis suivi d'une classe de ligne.
Donc, la classe form-group essentiellement,
dit tout ce qui est à l'intérieur de cette div sera traité comme un groupe d'éléments.
Et puis ils seront disposés en conséquence.
Et la deuxième partie, vous voyez l'utilisation de la ligne ici.
Donc, vous verrez que la ligne du groupe Bootstrap entre en jeu ici.
Et donc ce groupe de formulaires particulier, peut être disposé
en utilisant la ligne et les classes de colonnes que vous avez à partir de la grille Bootstrap.
Donc maintenant, si vous appliquez la ligne à cette div,
quoi qu'il y ait à l'intérieur, vous pouvez utiliser les classes
de colonne, pour décider exactement combien d'espace chacun d'eux va occuper à l'écran.
Maintenant, donc cela le rend plus clair à, donc ces groupes de formulaires s'enferme.
Cette unité.
Nous allons voir cette répétition encore et
encore lorsque nous concevons les différents éléments du formulaire.
Ensuite, en dessous de cela, vous voyez cette étiquette d'étiquette ici.
Pour la balise d'étiquette, certains attributs lui ont été attribués.
Donc, vous voyez que la balise label utilise un for firstname.
Donc, cette étiquette est pour quelque chose avec l'identifiant prénom.
Donc, quelle est la boîte de saisie qui suit juste en dessous de cela.
Nous allons regarder ça dans un court moment.
Et puis regardez les classes qui sont appliquées à la classe d'étiquettes, col-md-2.
Donc, pour les écrans de taille moyenne à extra grande,
cet élément particulier va occuper 2 colonnes de l'espace.
Et puis notez l'autre.
C' est écrit, col-form-label.
Donc, le col-form-label spécifie essentiellement
que cette étiquette doit être positionnée pour être alignée avec
l'autre élément qui fait partie de ce groupe de formulaires.
Donc, dans ce cas, la boîte de saisie.
Et donc cela signifie aussi que
l'étiquette doit être alignée au milieu,
horizontalement avec la boîte de saisie.
C' est donc la raison pour laquelle nous utilisons la classe col-form-label.
Si vous ne l'appliquez pas, votre étiquette sera
alignée sur la partie supérieure de votre zone de saisie.
Quelle forme ne sera pas aussi belle sur les tailles d'écran moyennes à très grandes.
Maintenant, sur le côté gauche, bien sûr, parce que cette fenêtre du navigateur est écrasée,
donc il montre la vue dans une petite ou extra petite taille d'écran ici.
C' est pourquoi vous voyez l'étiquette s'empiler au-dessus de la boîte de saisie ici.
C' est donc l'étiquette qui spécifie.
Donc, si vous avez une étiquette que vous voulez affecter à un élément,
c'est ainsi que vous allez affecter l'étiquette.
En bas ici, vous voyez une classe div col-md-10.
Donc, cela occupe les 10 autres des 12 colonnes.
Donc, deux colonnes qui sont occupées par l'étiquette.
Et les dix colonnes restantes occupées par cela, mais est enfermé à l'intérieur de la div.
Et à l'intérieur de cette div,
vous voyez qu'il y a un élément de balise d'entrée avec le texte de type.
Donc, ce qui signifie que cette zone de saisie accepte la saisie de texte.
Et la classe, regardez la classe ici.
Ça dit le contrôle de la forme.
Ceci est important à appliquer à la boîte de saisie ici.
Donc form-control, et id prénom.
Et le nom qui est prénom.
Puis espace réservé Prénom.
Donc, l'espace réservé est ce qui apparaît à l'intérieur de la zone en tant qu'espace réservé pour
la zone de saisie.
Donc tous ces attributs sont assignés.
Plus important encore,
notez l'utilisation de la classe de contrôle de formulaire appliquée au type d'entrée.
C' est ainsi que vous structurez ces deux éléments dans votre forme.
Pour les petites tailles d'écran et en dessous, il empile les deux choses.
Mais pour les moyennes à très grandes,
vous avez vu qu'il les positionne horizontalement côte à côte.
La même chose s'applique également au code nom de famille.
Ce sera très similaire à la façon dont le prénom est structuré.
Donc, j'aimerais que vous passiez un peu de temps à jeter un oeil à ce code aussi. Pour
que vous voyez, en fonction de votre compréhension de cela,
comment cela est également formaté.
Le prochain type d'événement formel que nous ajouterons est un élément de groupe d'entrée.
Laissez-moi ajouter le code.
Nous allons voir ce que le formulaire s'avère être.
Et puis nous allons revenir en arrière et examiner le code.
Donc, juste ici, après la deuxième div, après le champ lastname,
je vais inclure le code pour l'élément suivant ici.
Et puis sauvegardons les modifications.
Et puis, immédiatement,
vous verriez quelques autres choses ajoutées dans votre formulaire.
Vous voyez un champ de numéro de téléphone ajouté ici.
Ceci, d'après le regard, vous voyez que c'est très similaire à cela.
Donc, je ne vais pas expliquer le code pour ça.
Cela devrait être très simple pour vous de le comprendre.
Et puis ce champ de courriel devrait également être très simple pour
vous de comprendre.
Parce que cela semble très similaire au nom de famille.
Sauf que pour cela, le champ d'entrée, le type sera défini sur e-mail.
De sorte que les fonctionnalités intégrées de vérification de formulaire de
votre navigateur démarrent automatiquement.
Ainsi, lorsque vous tapez quelque chose qui ne ressemble pas à un e-mail,
alors il se plaindra de manière appropriée.
Examinons cette partie particulière du formulaire ici.
Notez que dans ce cas, nous ajoutons entre parenthèses gauche et
la parenthèse droite à cette boîte de saisie particulière.
Alors, comment ajouter des choses dans votre boîte comme ça ? En
regardant le code ici dans votre éditeur,
vous voyez que vous avez toujours la ligne Form-group que vous comprenez déjà.
Et en bas ici, vous avez l'élément de formulaire de type d'entrée id telnum,
et ainsi de suite, qui devrait également être très clair pour vous.
Donc je ne pense pas avoir besoin de t'expliquer cette partie.
Notez comment j'utilise les classes de colonne de grille de Bootstrap à chacun d'entre eux.
Donc, l'étiquette est donnée col-md-2.
Et puis le numéro de téléphone 1 est donné
col-xs-7 col-sm-6 et col-md-7 ici.
Ainsi, le numéro de téléphone, cet élément est correctement positionné.
Mais, en particulier, faisons attention à cette partie.
Donc celui-ci est à l'intérieur de cette div.
Donc, à l'intérieur de cette div, remarquez la classe qui lui est donnée.
La classe dit groupe d'entrées-groupe.
Donc essentiellement, ce qui signifie que tout ce qui est à l'intérieur de cette div sera traité comme
un groupe d'éléments ici.
C' est pourquoi la classe donnée est input-group.
Maintenant, pour ajouter quelque chose comme ça, vous allez utiliser
une classe appelée input-group-addon.
Et puis remarquez que j'utilise un div pour contenir cet article.
Je peux utiliser n'importe quoi ici, mais un div est utile ici.
Donc, je dis div classe input-group-addon.
Et puis le type div de fermeture à l'intérieur, où,
remarquez que j'ai la parenthèse gauche.
Donc, c'est ce qui vous permet d'ajouter un
appendice supplémentaire à votre boîte de saisie ici.
De même, celui ci-dessous est aussi une parenthèse droite d'entrée-groupe-addon.
C' est donc ce qui ajoute l'autre parenthèse droite ici.
Maintenant, entre ces deux, bien sûr, vous avez le type d'entrée.
L' entrée avec le type tel et la classe form-control, id, nom,
espace réservé, tout en place ici.
Donc, ce n'est rien d'autre que la partie indicatif régional.
Donc, si vous utilisez ce groupe d'entrées-groupe avec des addons
input-group-comme celui-ci de chaque côté.
Ces choses seront ajoutées à votre élément d'entrée comme ceci.
Cela vous fournit une belle façon de concevoir Votre formulaire avec certains ajoutés.
Par exemple, si vous avez un champ qui accepte de
l'argent comme entrée, vous pouvez simplement ajouter un signe dollar sur le côté gauche pour
indiquer à l'utilisateur qu'il s'agit d'un champ qui prend la valeur monétaire pour le moment. En ce
moment, dans ce cas, ce champ contient un indicatif régional.
Et si vous voyez comment les codes régionaux sont écrits aux États-Unis et
au Canada, vous savez qu'ils sont enfermés entre parenthèses gauche et droite.
Donc, c'est ce qui me permet de spécifier quelque chose comme ça dans ma forme là-bas.
Mon prochain ensemble d'éléments que je vais ajouter à mon
formulaire sont une case à cocher et une sélection.
Alors, comment ajouter ça ?
Ainsi, si vous êtes familier avec les formulaires HTML, vous comprenez comment la sélection fonctionne et
vous comprenez comment les cases à cocher fonctionnent dans les formulaires HTML.
Maintenant, Bootstrap vous donne quelques
classes supplémentaires qui vous permettent de formater ces éléments de manière appropriée.
Alors, permettez-moi d'ajouter la citation.
Sauvegardons les modifications.
Jetez un oeil à ce que cela entraîne dans le formulaire ici.
Et puis jetez un oeil au code.
Donc ici, vous voyez que j'ai une case à cocher et un message ici.
Et puis c'est un sélecteur qui me permet de choisir parmi un ensemble de choix ici.
Maintenant, la forme telle qu'elle existe ici est ce que vous verrez dans les
tailles d'écran petites et extra petites.
Jetons un coup d'oeil sur un écran plus grand.
La même forme lorsqu'elle est disposée sur des
écrans de taille moyenne à extra grande ressemblera à ceci.
Ainsi, vous pouvez voir comment le numéro de téléphone de contact est positionné ici,
et l'e-mail est positionné ici.
Notez donc que ces étiquettes sont
alignées sur une ligne au milieu avec les cases ici.
C' est ce que la classe d'étiquette de forme de col atteint en premier.
Maintenant, concentrons-nous sur ce que nous venons d'ajouter.
Ici, nous voyons que nous avons une case à cocher ajoutée.
Et puis, un champ de texte ici.
Alors peut-on vous contacter ?
Ainsi, par exemple, vous vous attendez à ce que l'utilisateur le vérifie ou le désactive.
Alors, quelle est la raison d'une case à cocher ?
De même, vous pourriez avoir des boutons radio.
Bootstrap prend en charge les boutons radio qui sont disponibles dans les formulaires HTML.
Et fournir quelques classes pour les coiffer correctement.
Et puis c'est bien sûr le sélecteur qui vous permet de choisir parmi les choix.
Donc, en retournant et en regardant le code.
Voyons comment cela est mis en œuvre.
En revenant jeter un oeil au code, vous voyez que celui-ci est à nouveau un
div de ligne de groupe de formulaires ici qui entoure deux choses ici.
L' un est un form-check
col-md-6 offset-md-2.
C' est donc ce qui entoure une case à cocher à l'intérieur de cet élément div.
Et puis en bas ici j'ai une classe div, Col-MD-3 offset-md-1.
Donc remarquez qu'ici, cela dit form-check col-md-6 offset-md-2.
La raison pour laquelle je fais un offset-md-2 est que je n'ai pas d'étiquette.
Donc, j'utilisais généralement deux colonnes pour les étiquettes.
Donc, puisque cette case à cocher devrait s'aligner sur le côté droit dans le formulaire.
C' est pourquoi j'ai utilisé offset-md-2 ici.
Et puis à l'intérieur, il est dit label class="form-check-label ».
Et puis il fournit la balise d'entrée
ici avec la case à cocher de type.
C' est ainsi que vous créez une case à cocher.
Et puis la classe, la classe Bootstrap que vous allez appliquer à
votre case à cocher est form-check-input.
Et puis le nom et la valeur initiale sont vides.
Et puis, celui-ci est l'étiquette réelle que vous voyez être
appliquée à cette case à cocher particulière là.
Notez donc comment ces deux sont enfermés dans une étiquette d'étiquette ici.
C' est ainsi que vous créez une case à cocher avec son étiquette
, puis positionnez cette case dans votre formulaire ici.
Donc, ceci ici utilise form-check-label.
Et puis ici, vous devez avoir une case à cocher, input type="checkbox »,
puis étiqueter lui-même.
Donc ici vous voyez fort, peut-on vous contacter ?
C' est pourquoi il est affiché en caractères gras juste à côté de la case à cocher ici.
Maintenant ci-dessous dans le code, vous avez une classe div col-md-3 offset-md-1.
Cela occupe donc trois colonnes dans un décalage de colonne.
Donc le total de quatre colonnes ici.
Donc celui-ci est col-md-6 plus 2, donc c'est huit colonnes.
Donc 8 plus 4, 12.
Donc, cela prend soin de vos 12 colonnes pour votre grille là-bas.
Maintenant, à l'intérieur de cela, vous voyez une sélection appliquée ici.
Maintenant, c'est l'option de sélection que les formulaires de fichiers HTML prennent en charge.
Et regardez la classe appliquée à cela.
Il est dit class="form-control » à la sélection.
Et puis vous donnez les options dans la sélection ici.
Tel., Email et ainsi de suite.
C' est ainsi que vous spécifiez les options pour votre champ de sélection dans votre formulaire ici.
C' est donc l'utilisation de cases à cocher et de cases à cocher dans votre formulaire.
De même, si vous consultez la documentation de Bootstrap, vous verrez l'utilisation de
boutons radio et d'autres éléments de formulaire. En
regardant notre forme,
nous voyons maintenant que nous avons déjà beaucoup de choses dont nous avons besoin dans notre forme.
Vous avez un prénom et un nom.
Ce formulaire est donc quelque chose que nous construisons pour permettre aux utilisateurs de
soumettre leurs commentaires au restaurant.
Nous avons donc ici le prénom, le
nom et le numéro de téléphone de contact, puis un e-mail.
Et puis bien sûr,
une option pour permettre à l'utilisateur de voir s'il peut être contacté ou non.
Donc, cela est implémenté en utilisant une case à cocher et un sélecteur ici.
Maintenant, la seule chose qui reste est un bouton de soumission pour nous.
Donc, nous allons ajouter un bouton de soumission à ce formulaire et
ensuite jeter un coup d'oeil final au formulaire.
Avant d'ajouter un bouton de soumission, peut-être voulons-nous fournir une boîte pour que
les utilisateurs puissent taper leurs commentaires.
Donc, dans ce cas, je vais utiliser une zone de texte pour fournir cela.
Alors laissez-moi coller dans le code.
Et puis nous allons passer en revue le code ici.
Donc, ce code, comme vous le voyez,
div class="form-group row » que vous savez déjà ce que cela signifie.
Et puis c'est l'étiquette que vous savez déjà comment elle est construite.
Et en dessous, vous voyez une balise textarea utilisée pour le formulaire.
Donc, il est dit, classe textarea, avec class="form-control »,
que vous avez déjà vu auparavant.
Et puis id, name, puis le nombre de lignes pour
la zone de texte spécifiée ici.
Donc, sauvegardons les changements et jetons un oeil au formulaire.
Donc, en regardant le formulaire, vous voyez qu'avec cela, juste en dessous, vous
avez une grande zone de texte dans laquelle les commentaires de commentaires peuvent être tapés par l'utilisateur.
Votre formulaire a donc le prénom, le nom, le numéro de téléphone
, l'e-mail, et une autorisation pour contacter l'utilisateur, puis une boîte de commentaires.
La dernière chose serait le bouton Soumettre.
Enfin, nous allons ajouter un bouton Soumettre au formulaire.
Donc, après un div, sur la zone de texte,
je vais coller le code pour le bouton Soumettre ici.
Donc, en collant à nouveau le code pour le bouton Soumettre, en regardant le code, vous voyez
qu'il s'agit d'une classe div ="form-group lign">, que vous connaissez déjà auparavant.
Et puis cela dit, div class="offset-md-2 col-md-10">.
Vous comprenez ce que c'est et
puis, à l'intérieur de cette div, vous voyez un bouton qui est enfermé ici.
Maintenant, puisque nous avons vu la construction d'un bouton en utilisant la balise a,
faisons attention à la façon dont vous construisez un bouton en utilisant la balise HTML du bouton.
Donc, si vous utilisez la balise HTML bouton, alors vous dites bouton et
puis le type est soumettre.
Cela va agir comme un bouton Soumettre pour mon formulaire, donc
c'est pourquoi j'ai dit que le type est soumettre.
Vous définissez le type sur bouton, il agira comme un bouton normal ici.
Et puis à cela, je dis, bouton de classe, bouton primaire.
Il s'agit donc d'un bouton de couleur bleue, puis le bouton
contient ce texte à l'intérieur du bouton pour envoyer le texte de commentaire à l'intérieur du bouton.
Alors sauvegardons les modifications.
Donc, ce serait la dernière modification de mon formulaire ici.
Donc, sauvegardons les changements et puis allons jeter un oeil au bouton.
En revenant au navigateur, vous voyez maintenant que dans votre formulaire ci-dessous,
vous avez le bouton Envoyer des commentaires.
Ainsi, lorsque l'utilisateur remplit le formulaire,
il clique sur le bouton Envoyer des commentaires pour soumettre les commentaires à l'entreprise.
Donc, cela complète la conception d'un formulaire.
Donc, c'est une telle forme que vous pouvez inclure.
Il y a beaucoup plus de classes disponibles dans Bootstrap pour la prise en
charge des formulaires.
Je vous exhorte vivement à consulter la documentation du formulaire pour voir
les autres types de classes qui sont disponibles pour la construction par défaut.
Donc, si vous avez conceptuellement dans votre esprit un formulaire que vous voulez construire,
alors vous cherchez juste tous les différents éléments possibles que vous voulez inclure
dans le formulaire, puis concevez le formulaire en conséquence.
La chose plus importante que vous avez remarqué dans la construction du formulaire en utilisant Bootstrap,
est toutes les classes Bootstrap qui sont disponibles.
Le contrôle de formulaire, le groupe de formulaires, la façon dont vous utilisez les classes de lignes et de colonnes.
Et toutes ces différentes classes qui sont prises
en charge dans Bootstrap pour concevoir des formulaires, le film Bootstrap.
Dernier ensemble, faites le commit git, donc, nous allons faire apparaître la page git.
Je vais commenter les changements que j'ai faits à propos,
contactus et index.
Et puis dites les boutons Bootstrap et
les formulaires, et puis cela aurait été
engagé dans mon dépôt git.
Avec cela, nous terminons cet exercice.
Ici, nous avons appris comment nous incluons des boutons et des
éléments de forme dans notre pitch de conception Bootstrap.
[ MUSIQUE]