1
00:00:00,390 --> 00:00:06,210
Bienvenido de nuevo en esta unidad. Te voy a mostrar algunos otros componentes, incluidos los formularios jumbotron y

2
00:00:06,210 --> 00:00:07,420
bootstrap, y las entradas.

3
00:00:07,530 --> 00:00:12,120
Pero antes de hacerlo quiero tomarme un momento para abordar algo que es realmente muy importante

4
00:00:12,120 --> 00:00:14,520
cuando estamos aprendiendo nuevas herramientas como esto, como bootstrap.

5
00:00:14,760 --> 00:00:19,620
Y en mi experiencia de enseñar a las personas a convertirse en desarrolladores web, noté que un bootstrap

6
00:00:19,620 --> 00:00:25,230
es uno de los primeros lugares donde algunos de los estudiantes comienzan a sentirse incómodos y sienten que no saben

7
00:00:25,230 --> 00:00:29,820
si lo están haciendo y luego porque de repente estamos incluyendo un montón de código que alguien

8
00:00:29,820 --> 00:00:31,200
más escribió en nuestra aplicación.

9
00:00:31,200 --> 00:00:36,810
Pero si echas un vistazo a los documentos aquí, son realmente largos, son completos, lo cual es

10
00:00:36,810 --> 00:00:42,810
genial, pero hay mucho aquí y quiero que enmarques esto no como un manual que tienes que leer

11
00:00:42,810 --> 00:00:43,550
para comprender todo.

12
00:00:43,560 --> 00:00:47,980
Esto no es como una guía de cómo terminar antes de que usemos bootstrap.

13
00:00:48,300 --> 00:00:53,790
Es una referencia en la que si decide que necesita un formulario, mire la sección del formulario si necesita una tabla.

14
00:00:53,850 --> 00:00:56,780
Tocará la sección de la mesa si necesita una barra de navegación.

15
00:00:56,850 --> 00:01:01,920
estuvieras usando sin parar regresando aquí haciendo referencia a bits de código individuales copiando sus

16
00:01:02,100 --> 00:01:08,310
segmentos de código verificando algunas demostraciones ejemplos de lectura que he estado usando bootstrapped para años en este punto.

17
00:01:08,310 --> 00:01:12,810
Miras la sección NFR, pero es importante que trates los documentos como si los

18
00:01:12,930 --> 00:01:14,630
Y me siento bastante bien con la mayor parte.

19
00:01:14,760 --> 00:01:18,220
Pero dejo los documentos abiertos cuando estoy trabajando en algo con bootstrap.

20
00:01:18,330 --> 00:01:24,450
Constantemente hago referencia a los ejemplos en uno de los primeros videos de este curso. Hablé

21
00:01:24,450 --> 00:01:26,900
sobre cómo convertirme en un desarrollador web.

22
00:01:27,060 --> 00:01:32,490
No te estás convirtiendo en un experto en memorización y en conocer toda la información.

23
00:01:32,730 --> 00:01:33,960
Sí, necesitas saber cosas.

24
00:01:33,960 --> 00:01:38,700
Sí, tienes que entender y memorizar algunas cosas, pero no te estás convirtiendo en un experto o en la memorización.

25
00:01:39,210 --> 00:01:41,990
Te estás convirtiendo en un experto en acceder a la información.

26
00:01:42,120 --> 00:01:48,180
Y parte de esa información la habrá memorizado y mucho de ella estará en línea en la documentación

27
00:01:48,450 --> 00:01:52,410
o ejemplos de libros de videos y todo tipo de recursos.

28
00:01:52,410 --> 00:01:54,350
Muy bien, para resumir toda la charla de ánimo.

29
00:01:54,450 --> 00:01:58,890
Básicamente solo quiero que recuerdes que sí hay mucho para arrancar y vas a ver 20

30
00:01:58,920 --> 00:02:01,430
30 por ciento y hay mucho más por ahí.

31
00:02:01,440 --> 00:02:03,210
Pero no te dejes intimidar por eso.

32
00:02:03,240 --> 00:02:07,110
accediendo a los documentos si necesita hacer algo que no le enseño a hacer.

33
00:02:07,110 --> 00:02:07,800
Debería sentirse cómodo

34
00:02:07,860 --> 00:02:09,480
Abre los documentos y búscalo.

35
00:02:09,600 --> 00:02:13,760
Y siempre hay buenos ejemplos y explicaciones sobre el puntocom bootsotspot.

36
00:02:14,120 --> 00:02:19,130
De acuerdo, sin más preámbulos pasemos a hablar sobre algunos de

37
00:02:19,140 --> 00:02:22,110
estos componentes importantes y comenzaré mostrándote Jumbotron.

38
00:02:22,500 --> 00:02:28,170
Por lo tanto, un Jumbotron de acuerdo con los documentos oficiales es un componente ligero y flexible que puede ampliar

39
00:02:28,170 --> 00:02:31,680
opcionalmente toda la ventana gráfica para mostrar el contenido clave de su sitio.

40
00:02:31,680 --> 00:02:37,670
Puedes ver un ejemplo de uno aquí y si queremos usar un Jumbotron es realmente muy fácil.

41
00:02:37,680 --> 00:02:43,680
Todo lo que tenemos que hacer es escribir jumbotron de la clase div y todo lo que pongamos dentro de eso

42
00:02:43,680 --> 00:02:44,750
será parte del Jumbotron.

43
00:02:44,970 --> 00:02:46,680
Entonces probemos eso.

44
00:02:47,190 --> 00:02:58,940
Solo hazlo abajo, los botones tendrán un div con la clase Jumbotron jumbo tron ​​y luego adentro, si hay que hacer,

45
00:02:59,370 --> 00:03:09,630
un H1 o H-1 dirán que es un jumbotron y luego agregarán un botón allí como lo han

46
00:03:09,630 --> 00:03:17,300
hecho aquí y lo haremos agregar un párrafo también en nuestro párrafo será jimbre.

47
00:03:17,790 --> 00:03:19,420
Lo suficientemente bueno por ahora.

48
00:03:20,310 --> 00:03:21,060
hola allí.

49
00:03:24,330 --> 00:03:28,460
Y un botón y nuestro botón simplemente dirá

50
00:03:28,800 --> 00:03:29,250
DE ACUERDO.

51
00:03:29,250 --> 00:03:31,830
Y luego un botón tenemos algunas opciones.

52
00:03:31,980 --> 00:03:39,680
Haremos un botón de éxito y lo agrandaré y guardaré.

53
00:03:39,940 --> 00:03:41,620
Echemos un vistazo a lo que obtenemos.

54
00:03:41,790 --> 00:03:47,400
Y hay un Jumbotron que puede ver que ocupa todo el ancho de la ventana de nuestro navegador y eso no

55
00:03:47,400 --> 00:03:48,740
suele ser lo que queremos.

56
00:03:49,050 --> 00:03:54,840
está sucediendo es que el JumboTron está configurado para ocupar el 100 por ciento de cualquier contenedor en el que se encuentre.

57
00:03:54,840 --> 00:03:55,510
Y lo que

58
00:03:55,640 --> 00:03:57,740
En este caso, no está fuera de nada.

59
00:03:57,900 --> 00:04:02,550
Pero en breve te mostraré el sistema de cuadrícula y el programa de arranque donde podemos controlar

60
00:04:02,550 --> 00:04:07,620
exactamente cuánto quieres que ocupe la pantalla si quieres que esté centrado y ocupar un tercio de la pantalla.

61
00:04:07,650 --> 00:04:12,180
Dos tercios de la pantalla un cuarto de la pantalla tenemos todas estas opciones diferentes que podemos

62
00:04:12,180 --> 00:04:14,150
hacer mediante el sistema de grilla bootstraps.

63
00:04:14,310 --> 00:04:21,480
Por ahora voy a mostrarte otro elemento que no podemos, en el que se encuentra un div con clase igual a

64
00:04:23,600 --> 00:04:25,140
contenedor y qué contenedor hará.

65
00:04:25,140 --> 00:04:31,800
Si simplemente ponemos cosas dentro del contenedor de la clase div, le da un poco de espacio alrededor y

66
00:04:31,800 --> 00:04:32,950
centra las cosas.

67
00:04:33,360 --> 00:04:35,130
Entonces, el contenedor

68
00:04:38,550 --> 00:04:46,750
descubre que ocupa todo este espacio que se puede ver, pero tiene bastante margen.

69
00:04:46,750 --> 00:04:50,860
Entonces, si solo queremos una mejora rápida sin tener que usar el sistema de cuadrícula

70
00:04:50,860 --> 00:04:55,990
del que no hemos hablado, podemos agregar un contenedor de clase div y ahora obtenemos este bonito Jumbotron.

71
00:04:55,990 --> 00:05:01,720
Y si movemos este código que ya tenemos bien dentro de los contenedores, no lo

72
00:05:01,720 --> 00:05:03,230
pondremos dentro del Jumbotron.

73
00:05:03,310 --> 00:05:07,890
Verás que aún se ve afectado por ese contenedor.

74
00:05:08,020 --> 00:05:15,640
Así que fuera del Jumbotron pero dentro del contenedor guardar y actualizar puede ver que también está dentro de

75
00:05:15,640 --> 00:05:18,120
ese contenedor y refleja eso visualmente.

76
00:05:18,400 --> 00:05:22,320
OK volvamos a los componentes y lo siguiente que te mostraré.

77
00:05:22,330 --> 00:05:23,950
Vamos a la cima.

78
00:05:24,280 --> 00:05:28,760
Tenemos que ir a ver para evaluar y le mostraré los formularios y cómo funcionan.

79
00:05:28,990 --> 00:05:33,030
Entonces haz clic en formularios y hay bastantes tipos diferentes y diferentes ejemplos.

80
00:05:33,070 --> 00:05:35,710
Y me desplazaré por ellos primero antes de escribir algo.

81
00:05:35,980 --> 00:05:39,910
Así que aquí hay un ejemplo básico de una forma de arranque.

82
00:05:39,910 --> 00:05:42,540
Puedes ver el mercado que lo crea.

83
00:05:42,760 --> 00:05:49,930
Luego tenemos lo que se conoce como una forma en línea y tenemos otro tipo de formulario en

84
00:05:49,930 --> 00:05:55,320
línea y otro más con diferentes tipos de entradas y otro tipo de formulario.

85
00:05:55,480 --> 00:05:59,140
Y ahora esto se refiere a todos los diferentes tipos de formularios que controlan los diferentes

86
00:05:59,140 --> 00:06:00,420
tipos de entradas que son compatibles.

87
00:06:00,430 --> 00:06:03,280
Entonces, todos estos son de color.

88
00:06:03,310 --> 00:06:13,450
verificación deshabilitadas botones de radio casillas de verificación botones de radio en línea menú desplegable selecciones seguir bajando.

89
00:06:13,450 --> 00:06:24,940
Número de correo electrónico horario de la semana y así sucesivamente áreas de texto diferentes casillas de verificación deshabilitadas casillas de

90
00:06:24,970 --> 00:06:26,780
Tenemos otros estados de foro.

91
00:06:26,780 --> 00:06:28,370
Tenemos un estado de enfoque.

92
00:06:28,470 --> 00:06:30,910
Puedes ver este resaltado alrededor de ese azul.

93
00:06:31,060 --> 00:06:34,420
Ese es el estilo de enfoque bootstrap predeterminado.

94
00:06:34,420 --> 00:06:43,750
También podemos inhabilitar las entradas al agregar "deshabilitadas" y también tenemos algunas otras cosas que podemos hacer, pero voy a volver a hacer una

95
00:06:43,780 --> 00:06:49,780
copia de seguridad y concentrarme en el inicio básico de ejemplo. Comenzaré por copiar todo

96
00:06:50,200 --> 00:06:54,610
este formulario. más y luego vamos a diseccionarlo poco a poco.

97
00:06:54,610 --> 00:06:59,200
Así que volvamos aquí y simplemente agregaremos este formulario después de todo lo demás.

98
00:06:59,200 --> 00:07:01,420
Pero lo haré dentro del contenedor.

99
00:07:01,420 --> 00:07:03,290
Déjame hacer esta pantalla completa por un momento.

100
00:07:03,340 --> 00:07:08,580
Tenemos nuestra forma y dentro de esa forma tenemos bastante contenido.

101
00:07:08,590 --> 00:07:11,900
Volvamos al navegador y observemos su aspecto.

102
00:07:12,460 --> 00:07:17,170
Y lo primero que probablemente notará es que nuestro formulario abarca todo este contenedor.

103
00:07:17,230 --> 00:07:21,060
Toma el 100 por ciento de eso y eso es algo que podremos controlar.

104
00:07:21,100 --> 00:07:27,360
hablemos del sistema de grilla bootstrap, podremos decir fácilmente que esto debería ir un 50% más allá.

105
00:07:27,380 --> 00:07:28,470
Una vez que

106
00:07:28,480 --> 00:07:32,920
Así que eso es algo que podremos cambiar fácilmente una vez que hablemos sobre el sistema de grilla bootstrap

107
00:07:32,920 --> 00:07:34,090
o aún no estamos allí.

108
00:07:34,120 --> 00:07:35,510
Así que solo vamos a ir con eso.

109
00:07:35,530 --> 00:07:37,080
Toma un 100 por ciento por ahora.

110
00:07:37,120 --> 00:07:39,670
Es un gigantesco foro de aspecto extraño, pero está bien.

111
00:07:39,820 --> 00:07:41,320
Nos encanta cómo es.

112
00:07:41,470 --> 00:07:45,290
Así que volveremos a lo sublime y diseccionaremos esta pieza a la vez.

113
00:07:45,550 --> 00:07:48,730
Entonces, tenemos una etiqueta de foro dentro de esa etiqueta de foro.

114
00:07:48,910 --> 00:07:54,880
Hay un grupo de formulario de clase div y si desea saber más sobre lo que hace si vuelve a

115
00:07:54,880 --> 00:08:01,840
los documentos de arranque y realiza una búsqueda de grupo de formularios y puede ver las etiquetas de rap y los controles en el

116
00:08:01,840 --> 00:08:04,010
grupo de formularios para un espaciado óptimo.

117
00:08:04,300 --> 00:08:11,140
Entonces, si nos deshacemos de esa clase grupal de forma alrededor de esta primera y lo haremos alrededor de la

118
00:08:11,140 --> 00:08:13,800
primera y segunda vez, verás con qué terminamos.

119
00:08:13,870 --> 00:08:21,520
Voy a guardar y actualizar verá cómo el espaciado cambia aquí entre esas entradas.

120
00:08:22,150 --> 00:08:27,040
es como lo usamos cuando tenemos una entrada y se forma la etiqueta y queremos que se agrupen.

121
00:08:27,250 --> 00:08:30,640
Entonces, podemos volver atrás y agregar ese grupo de formularios, y así

122
00:08:30,940 --> 00:08:35,320
Así que preste atención aquí solo se agrega un poco de espacio allí.

123
00:08:35,320 --> 00:08:40,330
Simplemente agrega un poco de espacio justo aquí, que efectivamente agrupa estos dos visualmente

124
00:08:40,330 --> 00:08:43,660
y luego Grip los combina visualmente y estos aquí.

125
00:08:43,660 --> 00:08:45,390
Entonces ese es el grupo de formas.

126
00:08:46,000 --> 00:08:47,860
Y luego las etiquetas son simplemente normales.

127
00:08:47,860 --> 00:08:54,610
No tenemos que agregar nada elegante para etiquetar ninguna clase de Boucek, pero la entrada es un control de formulario de clase.

128
00:08:55,300 --> 00:08:57,470
Entonces veamos qué sucede cuando me deshago de él.

129
00:08:57,700 --> 00:09:03,670
Así que solo lo haré en la primera y pondré la entrada de correo electrónico, retrocederé y actualizaré.

130
00:09:03,670 --> 00:09:08,590
Tenga en cuenta que esto cambia completamente a una entrada de navegador predeterminada normal.

131
00:09:08,590 --> 00:09:10,050
Entonces no tienes las esquinas redondeadas.

132
00:09:10,060 --> 00:09:12,800
No obtenemos el mismo espaciado y espacio de las cosas.

133
00:09:13,000 --> 00:09:18,010
Y tampoco obtenemos el mismo efecto de enfoque cuando hago clic en obtener un contorno azul, pero es

134
00:09:18,010 --> 00:09:19,010
diferente a este.

135
00:09:19,180 --> 00:09:23,860
entre los dos, pero en realidad hay algunas diferencias más importantes que verán una vez que trabajemos

136
00:09:23,860 --> 00:09:28,750
con el sistema de grillas y la forma en que se comportan e interactúan con otros elementos.

137
00:09:28,750 --> 00:09:33,430
El esquema de arranque es un poco más sutil y esos son solo los cambios visuales obvios

138
00:09:33,620 --> 00:09:36,170
Volveré y agregaré el control de formulario nuevamente.

139
00:09:36,400 --> 00:09:45,880
Entonces, realmente si quisiéramos destilar esto, todo aquí se reduce para formar un grupo y controlar las formas.

140
00:09:46,150 --> 00:09:49,840
Esas dos clases son realmente responsables de que las cosas se vean bien.

141
00:09:49,840 --> 00:09:55,680
Ahora existe este bloque de ayuda de clase de párrafo y podemos ver lo que obtenemos de eso.

142
00:09:55,690 --> 00:10:01,910
pequeña pista de un puntero sobre parte de tu formulario y esas cosas con el bloque de ayuda de

143
00:10:01,910 --> 00:10:07,680
clase y luego tenemos nuestro botón aquí que es solo un botón Pucelle regular o tenemos entre a

144
00:10:08,120 --> 00:10:13,570
y b tienden a caiga y podríamos agrandarlo o agrandarlo. Cambie el color como cualquier otro botón.

145
00:10:13,570 --> 00:10:16,080
Es este texto aquí el que da una

146
00:10:16,090 --> 00:10:21,910
Entonces ya puedes ver cómo se parece un poco a Legos donde tenemos un botón Lego que podemos

147
00:10:21,910 --> 00:10:23,270
agregar a un jumbotron.

148
00:10:23,320 --> 00:10:27,360
También podemos agregarlo solo o podemos agregarlo en lugar de un formulario.

149
00:10:27,430 --> 00:10:31,840
Es solo un pequeño componente plug and play que podemos agregar a diferentes partes de nuestra aplicación.

150
00:10:32,500 --> 00:10:36,990
Así que volvamos y echemos un vistazo a otro tipo de formulario que es la forma en línea.

151
00:10:37,450 --> 00:10:39,120
Así que esto se ve un poco diferente.

152
00:10:39,340 --> 00:10:44,800
un comentario aquí en línea y vamos a sangrar las cosas correctamente.

153
00:10:46,020 --> 00:10:53,860
Si simplemente copiamos este código y echamos un vistazo con las diferencias, dejo ese primer formulario y agreguemos

154
00:10:54,880 --> 00:10:56,200
Se ve bien.

155
00:10:56,200 --> 00:10:58,360
Tenga en cuenta que todo es idéntico.

156
00:10:58,360 --> 00:11:04,290
Todavía tenemos un control de formulario en las entradas que tenemos el grupo de formulario, pero hay una gran diferencia.

157
00:11:04,360 --> 00:11:09,070
Todo está dentro de un formulario con forma de clase en línea para que una línea.

158
00:11:09,490 --> 00:11:11,550
Vamos a mostrarte cómo se ve comenzar.

159
00:11:11,640 --> 00:11:15,450
Vuelvo nos da esta bonita forma en línea aquí.

160
00:11:15,850 --> 00:11:24,870
Y tan pronto como me deshago de eso y lo guardo ahora vuelve a una forma regular como la que tenemos aquí.

161
00:11:25,210 --> 00:11:29,330
Entonces, solo una clase contiene todos los estilos que controlarán eso.

162
00:11:29,470 --> 00:11:31,340
Entonces lo mantendremos como Formulario en línea.

163
00:11:31,540 --> 00:11:34,270
Y de nuevo, el espaciado no es ideal en este momento.

164
00:11:34,270 --> 00:11:37,130
Eso se solucionará cuando hablemos del sistema de grillas.

165
00:11:37,150 --> 00:11:40,090
Hay mucho más de lo que podríamos hablar sobre formas de arranque.

166
00:11:40,090 --> 00:11:46,060
Probablemente podríamos hacer 30 charlas de 45 minutos sobre la construcción de formas complejas de arranque, aprendiendo los pormenores

167
00:11:46,060 --> 00:11:51,640
de todas estas diferentes piezas y diferentes cosas que podemos hacer, validaciones personalizadas de todo tipo de estilos

168
00:11:51,970 --> 00:11:53,750
con los que podemos trabajar.

169
00:11:53,830 --> 00:11:55,120
Pero no voy a hacer eso.

170
00:11:55,210 --> 00:11:56,880
Cubrimos los conceptos básicos importantes.

171
00:11:56,940 --> 00:12:01,540
Hay dos tipos de formularios que son como el pan y la mantequilla de las formas de

172
00:12:01,600 --> 00:12:07,150
Boucek donde tenemos la forma regular básica y luego una forma en línea y habrá algunas otras características en los

173
00:12:07,150 --> 00:12:09,730
diferentes aspectos del bootstrap que usamos en los formularios.

174
00:12:09,910 --> 00:12:14,680
Pero en lugar de perder el tiempo en este momento y empantanarte en todos los pormenores y los

175
00:12:14,680 --> 00:12:19,540
pequeños detalles de las formas de PRICHEP, voy a tirar esos pequeños pedazos cuando los necesitemos cuando en realidad

176
00:12:19,540 --> 00:12:20,310
estamos usando bootstrap.

177
00:12:20,530 --> 00:12:27,280
Por lo tanto, las dos enseñanzas acerca de los formularios serían dos clases que son realmente importantes para el control y las

178
00:12:27,280 --> 00:12:33,480
formas de grupo. El control de las formas hace que las entradas bootstrap refined group solo agreguen un buen espacio.

179
00:12:33,550 --> 00:12:40,660
Entonces, sea lo que sea que pongas, un grupo de formularios obtiene un buen espacio y luego una sola clase se alinea.

180
00:12:40,960 --> 00:12:44,160
Si envuelve un formulario, el formulario completo se alinea.

181
00:12:44,520 --> 00:12:46,570
Y luego también hablamos sobre Jumbotron.

182
00:12:46,900 --> 00:12:50,020
La clase muy simple es igual a Jumbotron.

183
00:12:50,110 --> 00:12:51,650
Entonces puedes ver un compañero.

184
00:12:51,970 --> 00:12:54,230
Y luego ponemos todo dentro de un contenedor.

185
00:12:54,460 --> 00:12:59,140
Y si nos deshacemos de ese contenedor para mostrarte lo que sucede.

186
00:12:59,880 --> 00:13:04,950
Actualiza todo ese espacio que ese buen margen desaparece.

187
00:13:05,200 --> 00:13:11,500
Por lo tanto, los contenedores de forma agradable solo para obtener un espacio corto en su aplicación hacen que las cosas se vean relativamente bien.

188
00:13:12,140 --> 00:13:17,620
De acuerdo, entonces, antes de terminar este video, pasaré 10 segundos mostrándote un sitio en el que vamos

189
00:13:17,620 --> 00:13:23,680
a construir una aplicación que tenga una base de datos completa conectada utilizando node y express y Mongo and mongoose

190
00:13:23,680 --> 00:13:28,780
y un montón de tecnologías que usamos Arranque el prototipo de la interfaz para que se vea

191
00:13:28,780 --> 00:13:33,160
relativamente bien con bastante rapidez y se puede ver que tenemos un Jumbotron aquí.

192
00:13:33,160 --> 00:13:37,820
Estamos usando algunos de los botones que estamos usando, el sistema de cuadrícula que explicaré más adelante.

193
00:13:37,960 --> 00:13:40,950
Y luego, si voy a iniciar sesión, puedo ver que tenemos un formulario.

194
00:13:41,260 --> 00:13:46,360
Así que estos son controles de formulario que he diseñado usando el sistema de cuadrícula para que no abarque todo

195
00:13:46,360 --> 00:13:47,610
el ancho de la pantalla.

196
00:13:47,680 --> 00:13:50,070
Más bien solo toma esta pequeña sección del medio.

197
00:13:50,170 --> 00:13:52,700
Veremos eso una vez que hablemos del sistema de grillas.

198
00:13:52,950 --> 00:13:57,490
Pero solo quiero mostrarte que esta es una aplicación real y es algo que usaremos como bootstrap para ayudarnos

199
00:13:57,610 --> 00:14:00,460
a prototipar y hacer que las cosas se vean decentes bastante rápido