Bienvenue dans cette unité, je vais vous montrer quelques autres composants, y compris les formulaires jumbotron et bootstrap et les entrées.
Mais avant de le faire, je veux prendre un moment pour aborder quelque chose qui est vraiment très important lorsque nous apprenons de nouveaux outils comme ce bootstrap.
Et dans mon expérience d'enseigner aux gens à devenir des développeurs web, j'ai remarqué un bootstrap est l'un des premiers endroits où certains des étudiants commencent à se sentir mal à l'aise et ils se sentent comme ils ne savent pas si ils font et puis parce Nous avons soudainement inclus un tas de code quelqu'un d'autre a écrit dans notre application.
Mais si vous jetez un coup d'œil aux documents ici, ils sont vraiment longs, ils sont complets, ce qui est génial, mais il ya beaucoup ici et je veux que vous encadrer ce pas comme un manuel que vous devez lire pour comprendre tout.
Ce n'est pas comme une façon de guider que vous avez à terminer avant que nous utilisons bootstrap.
C'est une référence où si vous décidez que vous avez besoin d'un formulaire vous regardez la section de formulaire si vous avez besoin d'une table.
Vous allez frapper la section table si vous avez besoin d'une barre de navigation.
Vous regardez la section NFR, mais il est important que vous traitez les documents comme que vous les utiliserez non-stop revenir ici référençant bits de code individuel copiant leurs segments de code vérifier quelques exemples de lecture de démonstrations J'ai utilisé bootstrapped pour Années à ce stade.
Et je me sens assez bien au sujet de la plupart de celui-ci.
Mais je laisse les documents ouverts quand je travaille sur quelque chose avec bootstrap.
Je suis constamment référençant les exemples dans une des premières vidéos vraiment dans ce cours, j'ai parlé de comment devenir un développeur web.
Vous ne devenez pas un expert en mémorisation et en sachant chaque bit d'information.
Oui, vous devez savoir des choses.
Oui, vous devez comprendre et mémoriser certaines choses, mais vous n'êtes pas devenir un expert ou de mémorisation.
Vous devenez un expert en matière d'accès à l'information.
Et une partie de cette information que vous aurez mémorisée et beaucoup d'elle va être en ligne dans la documentation ou des vidéos exemples vidéos toutes sortes de ressources.
Très bien pour résumer l'ensemble de parler pep.
En gros, je veux juste que vous gardiez à l'esprit que oui, il ya beaucoup à bootstrap et vous allez voir 20 30 pour cent de celui-ci et il ya beaucoup plus là-bas.
Mais ne soyez pas intimidé par cela.
Vous devriez vous sentir à l'aise d'accéder aux documents si vous devez faire quelque chose que je ne vous montre pas comment faire.
Ouvrez les documents et cherchez-le.
Et il ya toujours de grands exemples et des explications sur get bootstrap dotcom.
OK, donc sans plus tarder passons à parler de certains de ces composants importants et je vais commencer par vous montrer Jumbotron.
Ainsi, un Jumbotron selon les documents officiels est un composant flexible léger qui peut éventuellement étendre la fenêtre entière pour mettre en valeur le contenu clé sur votre site.
Vous pouvez voir un exemple d'un ici et si nous voulons utiliser un Jumbotron c'est vraiment très facile.
Tout ce que nous devons faire est d'écrire div classe jumbotron et puis tout ce que nous mettons à l'intérieur de celui-ci fera partie du Jumbotron.
Alors essayons ça.
Il suffit de le faire ci-dessous sont des boutons auront une div avec la classe Jumbotron jumbo tron ​​et puis à l'intérieur si nous allons faire un H1 ou H-1 dira que c'est un jumbotron et puis ajouter un bouton là-bas comme ils ont ici et nous Ajouter un paragraphe ainsi dans notre paragraphe sera juste jibberish.
Assez bon pour l'instant.
Et un bouton et notre bouton vont juste dire bonjour.
D'ACCORD.
Et puis un bouton nous avons quelques choix.
Nous ferons un succès bouton et je vais faire grand et sauver.
Jetons un coup d'oeil à ce que nous obtenons.
Et il ya un Jumbotron, vous pouvez voir qu'il prend toute la largeur de notre fenêtre de navigateur et ce n'est pas habituellement ce que nous voulons.
Et ce qui se passe, c'est que le JumboTron est mis en place pour prendre jusqu'à 100 pour cent de tout le conteneur, il est à l'intérieur de.
Dans ce cas, ce n'est pas en dehors de rien.
Mais bientôt je vais vous montrer le système de grille et bootstrap où nous pouvons contrôler exactement combien vous voulez que ce prendre de l'écran si vous voulez qu'il soit centré et prendre un tiers de l'écran.
Deux tiers de l'écran d'un quart de l'écran, nous avons tous ces différents choix que nous pouvons faire en utilisant bootstraps système de grille.
Pour l'instant je vais vous montrer un autre élément que nous ne pouvons pas dans lequel est un div avec la classe égale à conteneur et ce conteneur fera.
Si nous venons de mettre des choses à l'intérieur du conteneur classe div, il lui donne un certain espacement un peu de rembourrage autour de lui et il centre les choses.
Donc, le conteneur trouver inspecter il prend tout cet espace ici, vous pouvez voir, mais il a un peu de marge sur elle.
Donc, si nous voulons juste une amélioration rapide sans avoir à utiliser le système de grille dont nous n'avons pas parlé, nous pouvons ajouter le conteneur classe div et maintenant nous obtenons ce Jumbotron jolie recherche.
Et si nous déplaçons ce code que nous avons déjà dans les récipients bien, mais nous ne le mettrons pas dans le Jumbotron.
Vous verrez qu'il reste affecté par ce conteneur.
Donc, à l'extérieur du Jumbotron mais à l'intérieur du conteneur sauver et rafraîchir, vous pouvez le voir, c'est aussi à l'intérieur de ce conteneur et il reflète que visuellement.
OK revenons aux composants et la prochaine chose que je vais vous montrer.
Nous allons au sommet.
Nous devons aller voir pour évaluer et je vais vous montrer les formulaires et comment ils fonctionnent.
Alors, cliquez sur les formulaires et il ya tout à fait quelques types différents et des exemples différents.
Et je vais les faire défiler d'abord avant de taper quoi que ce soit.
Voici donc un exemple de base d'un formulaire bootstrap.
Vous pouvez voir le marché qui le crée.
Puis nous avons ce qui est connu comme une forme en ligne et nous avons un autre type de formulaire en ligne et encore un autre avec différents types d'entrées et un autre type de formulaire.
Et maintenant, cela parle de tous les différents types de formulaire de contrôle des différents types d'intrants qui sont soutenus.
Donc, toutes ces couleurs que vous êtes.
Numéro d'e-mail semaine et ainsi de suite zones de texte cases à cocher différentes cases à cocher désactivées boutons radio désactivés cases à cocher en ligne boutons radio en ligne menus déroulants sélectionne continuer à baisser.
Nous avons d'autres États du forum.
Nous avons un état de focalisation.
Vous pouvez voir cette mise en évidence autour de ce bleu.
C'est le style par défaut de focus bootstrap.
Nous pouvons également désactiver les entrées en ajoutant les personnes handicapées et nous avons également quelques autres choses que nous pouvons faire, mais je vais revenir en arrière et vraiment se concentrer sur le début exemple de base et je vais commencer par copier tout ce formulaire Et puis nous le disséquerons peu à peu.
Revenons ici et nous allons simplement ajouter ce formulaire après tout le reste.
Mais je vais le faire à l'intérieur du conteneur.
Permettez-moi de faire ce plein écran pour un moment.
Nous avons notre forme et à l'intérieur de cette forme, nous avons un peu de contenu.
Revenons au navigateur et jetez un oeil à ce qu'il ressemble.
Et la première chose que vous remarquerez probablement est que notre formulaire va tout le long à travers ce conteneur.
Cela prend 100 p. 100 de tout cela et c'est quelque chose que nous pourrons contrôler.
Une fois que nous parlons du système de grille de bootstrap et sera facilement capable de dire que cela devrait aller 50 pour cent le chemin à travers.
C'est donc quelque chose que nous allons pouvoir changer facilement une fois que nous parlerons du système de grille d'amorçage ou que nous ne sommes pas encore là.
Donc, nous allons y aller.
Cela prend 100 pour cent pour l'instant.
C'est un gigantesque forum bizarre, mais ça va.
Nous l'aimons comment il est.
Donc, nous allons retourner au sublime et disséquer ce morceau à la fois.
Nous avons donc une balise de forum à l'intérieur de cette balise de forum.
Il existe un groupe de formulaires div class et si vous voulez en savoir plus sur ce que cela fait si vous retournez à la bootstrap docs et faire une recherche pour le groupe de formulaires et vous pouvez voir les étiquettes rap et les contrôles dans le groupe de formulaire pour l'espacement optimal.
Donc, si nous nous débarrassons de cette classe de groupe de formulaire autour de cette première et nous allons le faire autour de la première et la deuxième vous verrez ce que nous finissons avec.
Je vais enregistrer et actualiser vous voir comment l'espacement change ici entre ces entrées.
Donc, nous pouvons revenir en arrière et ajouter ce groupe de formulaires et c'est vraiment comment vous l'utilisez où vous avez une entrée et l'étiquette et vous voulez qu'ils soient regroupés est formé.
Alors faites attention ici juste un peu d'espace est ajouté là.
Il ajoute juste un peu d'espace ici qui regroupe efficacement ces deux ensemble visuellement et puis Grip ces ensemble visuellement ainsi que ceux-ci ici-bas.
Donc c'est groupe de formulaire.
Et puis les étiquettes sont juste normales.
Nous n'avons pas à ajouter quoi que ce soit de fantaisie à l'étiquette pas de classe Boucek, mais l'entrée il ya un contrôle de classe de formulaire.
Alors voyons ce qui se passe quand je m'en débarrasse.
Donc je vais juste le faire sur le premier et mettre l'e-mail d'entrée et revenir en arrière et actualiser.
Notez que cela revient complètement à une entrée de navigateur par défaut normale.
Donc vous n'obtenez pas les coins arrondis.
Nous n'obtenons pas le même rembourrage et l'espacement des choses.
Et nous n'obtenons pas le même effet de mise au point quand je clique, nous obtenons un contour bleu, mais c'est différent de celui-ci.
Le schéma bootstrap est un peu plus subtile et ce sont juste les changements visuels immédiatement évidents entre les deux, mais il ya effectivement quelques différences plus importantes que vous verrez une fois que nous travaillons avec le système de grille et la façon dont ils se comportent et interagissent avec d'autres éléments.
Retourne et ajoute le contrôle de formulaire à nouveau.
Donc, vraiment, si nous voulions distiller ce tout ici se résume à former le groupe et le contrôle de forme.
Ces deux classes sont vraiment responsables de faire les choses semblent bonnes.
Maintenant, il ya ce bloc d'aide de classe de paragraphe et nous pouvons jeter un oeil à ce que nous obtenons de cela.
C'est ce texte ici-bas qui donne juste un petit indice un pointeur sur une partie de votre formulaire et ce truc avec le bloc d'aide de classe et puis nous avons notre bouton ici qui est juste un bouton Pucelle ordinaire ou nous avons entre a et b ont tendance à Automne et nous pourrions le faire plus grand ou plus petit changement supplémentaire la couleur juste comme n'importe quel autre bouton.
Donc déjà vous pouvez voir comment c'est un peu comme Legos où nous avons un bouton Lego que nous pouvons ajouter dans un jumbotron.
Nous pouvons aussi simplement ajouter sur son propre ou nous pouvons l'ajouter au lieu d'un formulaire.
C'est juste un petit plug-and-play que nous pouvons ajouter à différentes parties de notre application.
Alors revenons en arrière et jetez un oeil à un autre type de formulaire qui est la forme en ligne.
Donc, cela semble légèrement différent.
Si nous venons de copier ce code et nous prenons un coup d'oeil avec les différences alors je vais laisser ce premier formulaire et ajoutons un commentaire ici en forme de ligne et guider les choses correctement.
Cela semble bon.
Remarquez que tout est identique.
Nous avons toujours un contrôle de formulaire sur les entrées que nous avons groupe de formulaire, mais il ya une grande différence.
Tout est à l'intérieur d'une forme avec la forme de classe en ligne de sorte qu'une ligne.
Nous allons juste vous montrer ce que cela ressemble à commencer.
Je retourne nous donne cette belle en ligne ici.
Et dès que je me débarrasse de cela et sauver maintenant remonte à une forme régulière comme nous avons ici.
Ainsi, une seule classe contient tous les styles qui contrôleront cela.
Donc nous allons le garder comme formulaire en ligne.
Et encore l'espacement n'est pas idéal en ce moment.
Cela sera réglé quand on parlera du système de grille.
Il ya beaucoup plus que nous pourrions parler au sujet des formes bootstrap.
Nous pourrions probablement faire 30 45 minutes de conférence sur la construction juste formes complexes bootstrap apprendre les tenants et aboutissants de toutes ces différentes pièces et différentes choses que nous pouvons faire des personnalisations personnalisation de toutes sortes de styles différents, nous pouvons travailler avec.
Mais je ne vais pas faire ça.
Nous avons couvert les bases importantes.
Il ya deux types de formes sont le type de pain et de beurre de Boucek formes où nous avons la forme régulière de base puis une forme en ligne et il y aura quelques autres caractéristiques dans les différents aspects de bootstrap que nous utilisons autour des formulaires.
Mais plutôt que de passer du temps en ce moment et vous affligent sur tous les tenants et aboutissants et les petits détails des formulaires PRICHEP je vais jeter dans ces petits morceaux quand nous en avons besoin quand nous utilisons réellement bootstrap.
Donc, les deux takeaways ici sur les formes seraient deux classes qui sont vraiment important de contrôle de forme et de contrôle de forme formulaire de formulaire rend les entrées bootstrap groupe de forme raffinée juste ajouter un peu d'espacement agréable.
Donc, quoi que vous mettiez dans un groupe de formulaire, il obtient un joli espacement et ensuite un seul tiret de classe en ligne.
Si vous enveloppez un formulaire que le formulaire entier va en ligne.
Et puis nous avons également parlé de Jumbotron.
Classe très simple égale Jumbotron.
Donc vous pouvez voir un pair.
Et puis nous mettons tout à l'intérieur d'un conteneur.
Et si nous nous débarrassons de ce conteneur pour vous montrer ce qui se passe.
Rafraîchissez tout cet espace que la belle marge va disparaître.
Donc, conteneurs belle façon juste pour obtenir un peu d'espacement sur votre application rendre les choses semblent relativement agréable.
OK, donc avant de terminer cette vidéo, je vais passer 10 secondes vous montrant un site que nous allons construire une application qui a une base de données complète retour arrière connecté à l'aide de nœud et express et Mongo et la mangouste et un tas de technologies et nous utilisons Bootstrap à prototype de l'interface pour le rendre relativement bon assez rapidement et vous pouvez voir, nous avons un Jumbotron ici.
Nous utilisons certains des boutons que nous utilisons le système de grille que je vais expliquer plus tard.
Et puis, si je vais me connecter, je peux voir que nous avons un formulaire.
Donc, ce sont des contrôles de formulaire que j'ai appelé en utilisant le système de grille de sorte qu'il ne prend pas toute la largeur de l'écran.
Au contraire, il ne prend que cette petite section intermédiaire.
Nous verrons donc que lorsque nous parlerons du système de grille.