1
00:00:00,390 --> 00:00:07,420
Bienvenue dans cette unité, je vais vous montrer quelques autres composants, y compris les formulaires jumbotron et bootstrap et les entrées.

2
00:00:07,530 --> 00:00:14,520
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.

3
00:00:14,760 --> 00:00:31,200
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.

4
00:00:31,200 --> 00:00:43,550
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.

5
00:00:43,560 --> 00:00:47,980
Ce n'est pas comme une façon de guider que vous avez à terminer avant que nous utilisons bootstrap.

6
00:00:48,300 --> 00:00:53,820
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.

7
00:00:53,850 --> 00:00:56,780
Vous allez frapper la section table si vous avez besoin d'une barre de navigation.

8
00:00:56,850 --> 00:01:12,810
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.

9
00:01:12,930 --> 00:01:14,630
Et je me sens assez bien au sujet de la plupart de celui-ci.

10
00:01:14,760 --> 00:01:18,220
Mais je laisse les documents ouverts quand je travaille sur quelque chose avec bootstrap.

11
00:01:18,330 --> 00:01:26,900
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.

12
00:01:27,060 --> 00:01:32,490
Vous ne devenez pas un expert en mémorisation et en sachant chaque bit d'information.

13
00:01:32,730 --> 00:01:33,960
Oui, vous devez savoir des choses.

14
00:01:33,960 --> 00:01:39,210
Oui, vous devez comprendre et mémoriser certaines choses, mais vous n'êtes pas devenir un expert ou de mémorisation.

15
00:01:39,210 --> 00:01:41,990
Vous devenez un expert en matière d'accès à l'information.

16
00:01:42,120 --> 00:01:52,410
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.

17
00:01:52,410 --> 00:01:54,350
Très bien pour résumer l'ensemble de parler pep.

18
00:01:54,450 --> 00:02:01,430
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.

19
00:02:01,440 --> 00:02:03,210
Mais ne soyez pas intimidé par cela.

20
00:02:03,240 --> 00:02:07,800
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.

21
00:02:07,860 --> 00:02:09,480
Ouvrez les documents et cherchez-le.

22
00:02:09,600 --> 00:02:13,760
Et il ya toujours de grands exemples et des explications sur get bootstrap dotcom.

23
00:02:14,120 --> 00:02:22,110
OK, donc sans plus tarder passons à parler de certains de ces composants importants et je vais commencer par vous montrer Jumbotron.

24
00:02:22,500 --> 00:02:31,680
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.

25
00:02:31,680 --> 00:02:37,670
Vous pouvez voir un exemple d'un ici et si nous voulons utiliser un Jumbotron c'est vraiment très facile.

26
00:02:37,680 --> 00:02:44,750
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.

27
00:02:44,970 --> 00:02:46,680
Alors essayons ça.

28
00:02:47,190 --> 00:03:17,300
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.

29
00:03:17,790 --> 00:03:19,420
Assez bon pour l'instant.

30
00:03:20,310 --> 00:03:28,460
Et un bouton et notre bouton vont juste dire bonjour.

31
00:03:28,800 --> 00:03:29,250
D'ACCORD.

32
00:03:29,250 --> 00:03:31,830
Et puis un bouton nous avons quelques choix.

33
00:03:31,980 --> 00:03:39,680
Nous ferons un succès bouton et je vais faire grand et sauver.

34
00:03:39,940 --> 00:03:41,620
Jetons un coup d'oeil à ce que nous obtenons.

35
00:03:41,790 --> 00:03:48,740
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.

36
00:03:49,050 --> 00:03:55,510
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.

37
00:03:55,640 --> 00:03:57,740
Dans ce cas, ce n'est pas en dehors de rien.

38
00:03:57,900 --> 00:04:07,640
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.

39
00:04:07,650 --> 00:04:14,150
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.

40
00:04:14,310 --> 00:04:25,140
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.

41
00:04:25,140 --> 00:04:32,950
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.

42
00:04:33,360 --> 00:04:46,750
Donc, le conteneur trouver inspecter il prend tout cet espace ici, vous pouvez voir, mais il a un peu de marge sur elle.

43
00:04:46,750 --> 00:04:55,990
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.

44
00:04:55,990 --> 00:05:03,230
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.

45
00:05:03,310 --> 00:05:07,890
Vous verrez qu'il reste affecté par ce conteneur.

46
00:05:08,020 --> 00:05:18,120
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.

47
00:05:18,400 --> 00:05:22,320
OK revenons aux composants et la prochaine chose que je vais vous montrer.

48
00:05:22,330 --> 00:05:23,950
Nous allons au sommet.

49
00:05:24,280 --> 00:05:28,760
Nous devons aller voir pour évaluer et je vais vous montrer les formulaires et comment ils fonctionnent.

50
00:05:28,990 --> 00:05:33,030
Alors, cliquez sur les formulaires et il ya tout à fait quelques types différents et des exemples différents.

51
00:05:33,070 --> 00:05:35,710
Et je vais les faire défiler d'abord avant de taper quoi que ce soit.

52
00:05:35,980 --> 00:05:39,910
Voici donc un exemple de base d'un formulaire bootstrap.

53
00:05:39,910 --> 00:05:42,540
Vous pouvez voir le marché qui le crée.

54
00:05:42,760 --> 00:05:55,320
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.

55
00:05:55,480 --> 00:06:00,420
Et maintenant, cela parle de tous les différents types de formulaire de contrôle des différents types d'intrants qui sont soutenus.

56
00:06:00,430 --> 00:06:03,280
Donc, toutes ces couleurs que vous êtes.

57
00:06:03,310 --> 00:06:24,940
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.

58
00:06:24,970 --> 00:06:26,780
Nous avons d'autres États du forum.

59
00:06:26,780 --> 00:06:28,370
Nous avons un état de focalisation.

60
00:06:28,470 --> 00:06:30,910
Vous pouvez voir cette mise en évidence autour de ce bleu.

61
00:06:31,060 --> 00:06:34,420
C'est le style par défaut de focus bootstrap.

62
00:06:34,420 --> 00:06:54,610
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.

63
00:06:54,610 --> 00:06:59,200
Revenons ici et nous allons simplement ajouter ce formulaire après tout le reste.

64
00:06:59,200 --> 00:07:01,420
Mais je vais le faire à l'intérieur du conteneur.

65
00:07:01,420 --> 00:07:03,290
Permettez-moi de faire ce plein écran pour un moment.

66
00:07:03,340 --> 00:07:08,580
Nous avons notre forme et à l'intérieur de cette forme, nous avons un peu de contenu.

67
00:07:08,590 --> 00:07:11,900
Revenons au navigateur et jetez un oeil à ce qu'il ressemble.

68
00:07:12,460 --> 00:07:17,170
Et la première chose que vous remarquerez probablement est que notre formulaire va tout le long à travers ce conteneur.

69
00:07:17,230 --> 00:07:21,060
Cela prend 100 p. 100 de tout cela et c'est quelque chose que nous pourrons contrôler.

70
00:07:21,100 --> 00:07:28,470
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.

71
00:07:28,480 --> 00:07:34,090
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à.

72
00:07:34,120 --> 00:07:35,510
Donc, nous allons y aller.

73
00:07:35,530 --> 00:07:37,080
Cela prend 100 pour cent pour l'instant.

74
00:07:37,120 --> 00:07:39,670
C'est un gigantesque forum bizarre, mais ça va.

75
00:07:39,820 --> 00:07:41,320
Nous l'aimons comment il est.

76
00:07:41,470 --> 00:07:45,290
Donc, nous allons retourner au sublime et disséquer ce morceau à la fois.

77
00:07:45,550 --> 00:07:48,730
Nous avons donc une balise de forum à l'intérieur de cette balise de forum.

78
00:07:48,910 --> 00:08:04,010
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.

79
00:08:04,300 --> 00:08:13,800
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.

80
00:08:13,870 --> 00:08:21,520
Je vais enregistrer et actualiser vous voir comment l'espacement change ici entre ces entrées.

81
00:08:22,150 --> 00:08:30,640
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é.

82
00:08:30,940 --> 00:08:35,320
Alors faites attention ici juste un peu d'espace est ajouté là.

83
00:08:35,320 --> 00:08:43,660
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.

84
00:08:43,660 --> 00:08:45,390
Donc c'est groupe de formulaire.

85
00:08:46,000 --> 00:08:47,860
Et puis les étiquettes sont juste normales.

86
00:08:47,860 --> 00:08:54,960
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.

87
00:08:55,300 --> 00:08:57,470
Alors voyons ce qui se passe quand je m'en débarrasse.

88
00:08:57,700 --> 00:09:03,670
Donc je vais juste le faire sur le premier et mettre l'e-mail d'entrée et revenir en arrière et actualiser.

89
00:09:03,670 --> 00:09:08,590
Notez que cela revient complètement à une entrée de navigateur par défaut normale.

90
00:09:08,590 --> 00:09:10,050
Donc vous n'obtenez pas les coins arrondis.

91
00:09:10,060 --> 00:09:12,800
Nous n'obtenons pas le même rembourrage et l'espacement des choses.

92
00:09:13,000 --> 00:09:19,010
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.

93
00:09:19,180 --> 00:09:33,430
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.

94
00:09:33,620 --> 00:09:36,170
Retourne et ajoute le contrôle de formulaire à nouveau.

95
00:09:36,400 --> 00:09:45,880
Donc, vraiment, si nous voulions distiller ce tout ici se résume à former le groupe et le contrôle de forme.

96
00:09:46,150 --> 00:09:49,840
Ces deux classes sont vraiment responsables de faire les choses semblent bonnes.

97
00:09:49,840 --> 00:09:55,680
Maintenant, il ya ce bloc d'aide de classe de paragraphe et nous pouvons jeter un oeil à ce que nous obtenons de cela.

98
00:09:55,690 --> 00:10:16,080
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.

99
00:10:16,090 --> 00:10:23,270
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.

100
00:10:23,320 --> 00:10:27,360
Nous pouvons aussi simplement ajouter sur son propre ou nous pouvons l'ajouter au lieu d'un formulaire.

101
00:10:27,430 --> 00:10:32,470
C'est juste un petit plug-and-play que nous pouvons ajouter à différentes parties de notre application.

102
00:10:32,500 --> 00:10:36,990
Alors revenons en arrière et jetez un oeil à un autre type de formulaire qui est la forme en ligne.

103
00:10:37,450 --> 00:10:39,120
Donc, cela semble légèrement différent.

104
00:10:39,340 --> 00:10:53,860
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.

105
00:10:54,880 --> 00:10:56,200
Cela semble bon.

106
00:10:56,200 --> 00:10:58,360
Remarquez que tout est identique.

107
00:10:58,360 --> 00:11:04,290
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.

108
00:11:04,360 --> 00:11:09,070
Tout est à l'intérieur d'une forme avec la forme de classe en ligne de sorte qu'une ligne.

109
00:11:09,490 --> 00:11:11,550
Nous allons juste vous montrer ce que cela ressemble à commencer.

110
00:11:11,640 --> 00:11:15,450
Je retourne nous donne cette belle en ligne ici.

111
00:11:15,850 --> 00:11:24,870
Et dès que je me débarrasse de cela et sauver maintenant remonte à une forme régulière comme nous avons ici.

112
00:11:25,210 --> 00:11:29,330
Ainsi, une seule classe contient tous les styles qui contrôleront cela.

113
00:11:29,470 --> 00:11:31,340
Donc nous allons le garder comme formulaire en ligne.

114
00:11:31,540 --> 00:11:34,270
Et encore l'espacement n'est pas idéal en ce moment.

115
00:11:34,270 --> 00:11:37,130
Cela sera réglé quand on parlera du système de grille.

116
00:11:37,150 --> 00:11:40,090
Il ya beaucoup plus que nous pourrions parler au sujet des formes bootstrap.

117
00:11:40,090 --> 00:11:53,750
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.

118
00:11:53,830 --> 00:11:55,120
Mais je ne vais pas faire ça.

119
00:11:55,210 --> 00:11:56,880
Nous avons couvert les bases importantes.

120
00:11:56,940 --> 00:12:09,730
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.

121
00:12:09,910 --> 00:12:20,310
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.

122
00:12:20,530 --> 00:12:33,480
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.

123
00:12:33,550 --> 00:12:40,910
Donc, quoi que vous mettiez dans un groupe de formulaire, il obtient un joli espacement et ensuite un seul tiret de classe en ligne.

124
00:12:40,960 --> 00:12:44,160
Si vous enveloppez un formulaire que le formulaire entier va en ligne.

125
00:12:44,520 --> 00:12:46,570
Et puis nous avons également parlé de Jumbotron.

126
00:12:46,900 --> 00:12:50,020
Classe très simple égale Jumbotron.

127
00:12:50,110 --> 00:12:51,650
Donc vous pouvez voir un pair.

128
00:12:51,970 --> 00:12:54,230
Et puis nous mettons tout à l'intérieur d'un conteneur.

129
00:12:54,460 --> 00:12:59,140
Et si nous nous débarrassons de ce conteneur pour vous montrer ce qui se passe.

130
00:12:59,880 --> 00:13:04,950
Rafraîchissez tout cet espace que la belle marge va disparaître.

131
00:13:05,200 --> 00:13:11,820
Donc, conteneurs belle façon juste pour obtenir un peu d'espacement sur votre application rendre les choses semblent relativement agréable.

132
00:13:12,140 --> 00:13:33,160
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.

133
00:13:33,160 --> 00:13:37,820
Nous utilisons certains des boutons que nous utilisons le système de grille que je vais expliquer plus tard.

134
00:13:37,960 --> 00:13:40,950
Et puis, si je vais me connecter, je peux voir que nous avons un formulaire.

135
00:13:41,260 --> 00:13:47,610
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.

136
00:13:47,680 --> 00:13:50,070
Au contraire, il ne prend que cette petite section intermédiaire.

137
00:13:50,170 --> 00:13:52,700
Nous verrons donc que lorsque nous parlerons du système de grille.