1 00:00:00,000 --> 00:00:04,797 [MÚSICA] 2 00:00:04,797 --> 00:00:11,490 En este ejercicio, vamos a ver el soporte de Bootstrap para botones y formularios. 3 00:00:11,490 --> 00:00:17,293 Así que vamos a incluir algunos botones y grupos de botones en nuestra página web. 4 00:00:17,293 --> 00:00:24,190 Y también nos fijamos en el diseño de formularios y el estilo de los formularios usando clases de Bootstrap. 5 00:00:25,780 --> 00:00:31,080 Para empezar, vaya a la página de instrucciones y 6 00:00:31,080 --> 00:00:36,900 descargue el archivo contactus.html.zip que hemos proporcionado allí. 7 00:00:36,900 --> 00:00:39,798 Así que haga clic derecho en eso, y 8 00:00:39,798 --> 00:00:44,969 luego guarde este enlace en su carpeta ConFusion. 9 00:00:48,512 --> 00:00:49,568 Como, 10 00:00:54,264 --> 00:01:01,598 contactus.html.zip archivo. 11 00:01:01,598 --> 00:01:08,580 Y luego, una vez que se haya descargado el archivo zip, descomprima el archivo para obtener la página contactus.html. 12 00:01:09,740 --> 00:01:11,580 A continuación, puede eliminar el archivo zip. 13 00:01:13,440 --> 00:01:18,764 Una vez que haya descomprimido el archivo y obtener la página contactus.html, se 14 00:01:18,764 --> 00:01:23,084 dará cuenta de que cuando cargue esta página en su 15 00:01:23,084 --> 00:01:28,107 navegador usando localhost: 3000/ contactus.html, 16 00:01:28,107 --> 00:01:34,748 entonces verá que esta página ya está preformada con algo de contenido. 17 00:01:34,748 --> 00:01:38,550 Así que puede notar que ya tiene la barra de navegación allí. 18 00:01:38,550 --> 00:01:42,846 Tenemos el jumbotron ya formateado para nosotros. 19 00:01:42,846 --> 00:01:48,061 Y notarías que tengo las migas de pan y 20 00:01:48,061 --> 00:01:52,190 el contacto con nosotros que se dirige aquí formateado. 21 00:01:52,190 --> 00:01:57,730 A continuación, verá alguna información adicional, la dirección aquí. 22 00:01:57,730 --> 00:02:04,180 Y también, notará que el pie de página ya está formateado. 23 00:02:04,180 --> 00:02:06,580 Pero notará dos cosas aquí, 24 00:02:06,580 --> 00:02:11,820 notará que hay una línea aquí que dice que los grupos de botones van aquí y 25 00:02:11,820 --> 00:02:15,678 luego una línea más aquí que dice que la forma va aquí. 26 00:02:15,678 --> 00:02:20,280 Así que vamos a reemplazar estos dos con un grupo de botones y un formulario. 27 00:02:20,280 --> 00:02:25,380 Y a lo largo del camino, aprenda el soporte de Bootstrap para botones y formularios. 28 00:02:25,380 --> 00:02:31,015 Antes de continuar, ahora que tenemos tres páginas en nuestro sitio web, 29 00:02:31,015 --> 00:02:34,585 es una buena idea que las enlazemos, 30 00:02:34,585 --> 00:02:39,525 tanto en la barra de navegación como en los enlaces del pie de página. 31 00:02:39,525 --> 00:02:45,165 Modifiquemos esas dos para que podamos navegar entre estas tres páginas fácilmente. 32 00:02:45,165 --> 00:02:52,008 Así que yendo a la página contactus.html, notará que en la barra de navegación, 33 00:02:52,008 --> 00:02:56,816 ya tengo los enlaces a index.html configurados correctamente. 34 00:02:58,908 --> 00:03:03,568 Y notarías que en la parte inferior 35 00:03:03,568 --> 00:03:08,450 aquí tienes el enlace de contacto aquí. 36 00:03:08,450 --> 00:03:15,550 Pero el enlace correspondiente a about no se ha configurado correctamente. 37 00:03:15,550 --> 00:03:19,905 Así que vaya a este enlace aquí y luego actualice eso a 38 00:03:19,905 --> 00:03:24,430 aboutus.html. 39 00:03:24,430 --> 00:03:27,788 El enlace de contacto con nosotros se puede dejar solo como tal. 40 00:03:27,788 --> 00:03:31,050 Y luego guarde los cambios. 41 00:03:31,050 --> 00:03:35,070 Ahora de manera similar, vaya al pie de página de esta página. 42 00:03:35,070 --> 00:03:40,975 Y notará que en el pie de página tenemos estos tres enlaces aquí. 43 00:03:40,975 --> 00:03:45,215 Y este puede ser un buen punto para reemplazar los enlaces 44 00:03:45,215 --> 00:03:48,015 con los enlaces a las páginas correspondientes. 45 00:03:48,015 --> 00:03:54,342 Así que diré, index.html, aboutus.html 46 00:03:54,342 --> 00:03:59,665 y, contactus.html. 47 00:03:59,665 --> 00:04:01,325 Y guarda los cambios. 48 00:04:01,325 --> 00:04:08,117 Del mismo modo, vaya a index.html, y luego en index.html también, 49 00:04:08,117 --> 00:04:12,280 el enlace de contacto no se ha configurado. 50 00:04:12,280 --> 00:04:18,640 Así que actualicemos eso a contactus.html. 51 00:04:18,640 --> 00:04:21,900 Y, de manera similar, actualice los enlaces en el pie de página. 52 00:04:23,050 --> 00:04:27,258 También vaya a aboutus.html y luego arregle los enlaces incluso allí. 53 00:04:27,258 --> 00:04:32,540 Entonces, en el aboutus.html también, en el encabezado voy a arreglar el enlace. 54 00:04:37,461 --> 00:04:41,690 Y también en el pie de página de aboutus.html. 55 00:04:41,690 --> 00:04:44,050 Así que ahora, cuando vaya a su sitio web, 56 00:04:44,050 --> 00:04:49,290 podrá navegar de nuevo a su página de inicio, a su página acerca. 57 00:04:49,290 --> 00:04:52,950 Y desde la página acerca, incluso puede volver a la página de contactos. 58 00:04:52,950 --> 00:04:57,780 Así que todos los enlaces entre las tres páginas en los encabezados correspondientes, y 59 00:04:57,780 --> 00:05:01,480 también los pies de página, aquí deben ser configurados. 60 00:05:01,480 --> 00:05:06,500 De modo que si hace clic en cualquiera de estos le llevará a la página correspondiente. 61 00:05:08,190 --> 00:05:12,660 Ahora es el momento de comenzar a trabajar en los botones que vamos a 62 00:05:12,660 --> 00:05:17,040 incluir en nuestra página contactus.html. 63 00:05:17,040 --> 00:05:23,060 Entonces, lo que haré es reemplazar esta línea con el código para 64 00:05:23,060 --> 00:05:25,580 el botón y el grupo de botones y 65 00:05:25,580 --> 00:05:30,465 luego volveremos a explicar cómo funciona todo esto. 66 00:05:30,465 --> 00:05:34,650 Al abrir contactus.html en nuestro editor, 67 00:05:34,650 --> 00:05:40,402 vamos a localizar el lugar donde esta declaración, grupo de botones va aquí, existe. 68 00:05:40,402 --> 00:05:44,230 Y luego voy a reemplazar eso con el código correspondiente a 69 00:05:44,230 --> 00:05:46,920 ese grupo de botones primero. 70 00:05:46,920 --> 00:05:51,600 Y luego volveré para explicar cómo funciona este código. 71 00:05:51,600 --> 00:05:56,570 Así que vamos a guardar los cambios, y luego echar un vistazo a cómo 72 00:05:56,570 --> 00:06:00,920 se ve este grupo de botones en nuestro navegador. 73 00:06:02,550 --> 00:06:07,224 Ir a su navegador, ahora puede ver que en nuestra 74 00:06:07,224 --> 00:06:12,310 página web se ha creado el grupo de botones. 75 00:06:12,310 --> 00:06:15,040 Así que puedes ver que hay tres botones aquí: Llamar, 76 00:06:15,040 --> 00:06:17,540 Skype y Correo electrónico. 77 00:06:17,540 --> 00:06:21,990 Ahora, todos estos tres se unen en una sola barra o barra de 78 00:06:21,990 --> 00:06:26,800 botones o lo que está en términos de Bootstrap llamado grupo de botones. 79 00:06:26,800 --> 00:06:31,350 Así que veamos cómo construimos algo como esto en el 80 00:06:31,350 --> 00:06:32,390 código de Bootstrap. 81 00:06:33,530 --> 00:06:41,530 Así que aquí tengo la ventana del navegador y mi código abierto uno al lado del otro. 82 00:06:41,530 --> 00:06:44,990 Así que echemos un vistazo a cómo creamos este código de botón. 83 00:06:44,990 --> 00:06:48,536 Echando un vistazo al código, observa que 84 00:06:48,536 --> 00:06:53,745 los botones están incluidos dentro de un div aquí. 85 00:06:53,745 --> 00:06:57,060 Para el div, aplicamos la clase, btn-group. 86 00:06:57,060 --> 00:07:02,255 Por lo tanto, si tiene un grupo de botones que desea unir y 87 00:07:02,255 --> 00:07:06,225 presentar como un grupo de botones, como una barra de botones, 88 00:07:06,225 --> 00:07:10,990 entonces usaría un div con la clase de grupo de botones y 89 00:07:10,990 --> 00:07:14,540 el rol como grupo aquí para ese div. 90 00:07:14,540 --> 00:07:18,332 Ahora dentro de eso, notarás que estoy usando la 91 00:07:18,332 --> 00:07:20,550 etiqueta, a, para definir los tres botones. 92 00:07:20,550 --> 00:07:23,590 Así que veamos cómo definimos los tres botones. 93 00:07:23,590 --> 00:07:26,430 Veamos cómo definimos el botón Llamar. 94 00:07:26,430 --> 00:07:30,030 Así que esta línea en particular define el botón Llamar. 95 00:07:30,030 --> 00:07:33,718 Así que digo, un, papel es igual a botón. 96 00:07:33,718 --> 00:07:38,375 Así que esto, una etiqueta, aquí, 97 00:07:38,375 --> 00:07:42,565 lo estoy usando como un botón aquí. 98 00:07:42,565 --> 00:07:44,955 Entonces, es por eso que especifico el rol como un botón. 99 00:07:44,955 --> 00:07:46,545 Así que esto es importante. 100 00:07:46,545 --> 00:07:49,591 Y luego mira las clases que estoy aplicando a esto. 101 00:07:49,591 --> 00:07:54,926 Así que el primero es btn class. 102 00:07:54,926 --> 00:07:59,880 La clase btn es la clase de botón de Bootstrap. 103 00:07:59,880 --> 00:08:03,720 Por lo tanto, lo mostrará como un botón clásico de Bootstrap. 104 00:08:03,720 --> 00:08:07,300 La segunda parte dice es btn-primaria. 105 00:08:07,300 --> 00:08:10,940 Entonces, esto es lo que define el color del botón aquí. 106 00:08:10,940 --> 00:08:15,910 Entonces, en este caso, este color de botón es azul. 107 00:08:15,910 --> 00:08:18,750 Y entonces, este es el color principal en Bootstrap. 108 00:08:18,750 --> 00:08:20,670 Así que btn-primario. 109 00:08:20,670 --> 00:08:25,510 Y luego, después de eso, mira el uso de la href aquí. 110 00:08:25,510 --> 00:08:30,850 Entonces, dado que esta es una etiqueta A, puedo usar un atributo href en esa etiqueta A. 111 00:08:30,850 --> 00:08:33,610 Por lo tanto, el atributo href apunta al número de teléfono. 112 00:08:35,110 --> 00:08:40,940 Y luego de eso te das cuenta de que estoy usando un icono de fuente aquí para el teléfono. 113 00:08:40,940 --> 00:08:47,560 Es por eso que tengo i clase fa fa-teléfono y luego después de la llamada palabra. 114 00:08:47,560 --> 00:08:53,170 Por lo tanto, esto es lo que permite construir este 115 00:08:53,170 --> 00:08:58,550 botón azul, que se incluye en esta barra de botones aquí. 116 00:08:58,550 --> 00:09:04,150 Del mismo modo, el siguiente, observa que esto también dice botón de rol. 117 00:09:04,150 --> 00:09:07,795 Y luego, a medida que pasa, ves que btn-info. 118 00:09:07,795 --> 00:09:12,235 BTN-info le da un color de un color azul claro en color. 119 00:09:12,235 --> 00:09:18,665 Por lo tanto, por defecto btn-info se refiere a un botón de color azul claro aquí. 120 00:09:18,665 --> 00:09:22,975 Y luego, puedes ver que tengo el Skype definido aquí. 121 00:09:22,975 --> 00:09:28,172 Y luego el tercero que, es un botón verde allí con correo electrónico. 122 00:09:28,172 --> 00:09:34,542 Tenga en cuenta que especifico letras un rol = clase de botón = btn btn-success. 123 00:09:34,542 --> 00:09:38,132 Entonces, cuando digas btn-success, eso será un botón verde aquí. 124 00:09:38,132 --> 00:09:44,102 Por lo tanto, tiene algunos colores que ya están definidos en Bootstrap. 125 00:09:44,102 --> 00:09:48,322 Primaria se refiere a azul en para el primero, 126 00:09:49,390 --> 00:09:54,250 el éxito azul claro se refiere al color verde, entonces usted tiene una advertencia que sería un color amarillo pálido, y 127 00:09:54,250 --> 00:09:56,150 luego el peligro, que es un color rojo. 128 00:09:56,150 --> 00:09:59,763 Por lo tanto, estos son colores predeterminados que se configuraron en Bootstrap. 129 00:10:01,712 --> 00:10:06,602 Y luego la configuración href, con el mailto aquí, y 130 00:10:06,602 --> 00:10:10,140 luego, después de eso, tiene el. 131 00:10:11,972 --> 00:10:16,030 Fuente como icono aquí y luego el correo electrónico allí. 132 00:10:16,030 --> 00:10:21,410 Así que estas tres etiquetas e, que actualmente están actuando como botones, 133 00:10:21,410 --> 00:10:26,780 están encerradas en el lado de esos div, que actúa como el grupo btn-. 134 00:10:26,780 --> 00:10:32,100 Entonces, así es como mostramos un grupo de botones en Bootstrap. 135 00:10:32,100 --> 00:10:34,470 Si solo desea un solo botón, 136 00:10:34,470 --> 00:10:37,220 todo lo que necesita hacer es incluir solo una de estas líneas allí. 137 00:10:38,270 --> 00:10:41,130 Por lo tanto, también podría usar la etiqueta del botón. 138 00:10:41,130 --> 00:10:44,270 Si usa la etiqueta del botón, entonces no necesita especificar el rol, 139 00:10:44,270 --> 00:10:46,730 en su lugar solo dice botón de tipo. 140 00:10:46,730 --> 00:10:49,700 Porque un botón también podría actuar como un botón de envío allí. 141 00:10:49,700 --> 00:10:54,140 Así que más adelante, en los formularios veremos el uso de la etiqueta del botón, 142 00:10:54,140 --> 00:10:57,040 para crear un botón para ser incluido en nuestro formulario. 143 00:10:58,600 --> 00:11:03,900 Continuando con el ejercicio, nuestro siguiente paso sería comenzar, 144 00:11:03,900 --> 00:11:08,790 desarrollando el formulario que vamos a incluir en la página contactus.html. 145 00:11:08,790 --> 00:11:13,350 Lo haremos paso a paso, para que en cada paso aprendamos un poco de 146 00:11:13,350 --> 00:11:17,610 cómo incluyes algunos elementos en su forma. 147 00:11:17,610 --> 00:11:24,480 Entonces, como principio, cuando vaya a la página contactus.html, 148 00:11:24,480 --> 00:11:29,430 allí mismo, verá esta declaración llamada, el formulario va aquí. 149 00:11:29,430 --> 00:11:34,771 Ahora, lo que voy a hacer es cambiar esto de col-sm 150 00:11:34,771 --> 00:11:39,480 a col-md, para que para 151 00:11:39,480 --> 00:11:44,290 tamaños de pantalla extra pequeños a pequeños, mi formulario se distribuya 152 00:11:44,290 --> 00:11:49,352 ocupando toda la anchura de la pantalla, porque usa col-xs-12. 153 00:11:49,352 --> 00:11:53,024 Pero desde la pantalla de tamaño mediano en las salas, 154 00:11:53,024 --> 00:11:57,290 ocupará sólo 9 de las 12 columnas. 155 00:11:57,290 --> 00:11:59,600 Entonces, comencemos a construir el formulario. 156 00:11:59,600 --> 00:12:05,470 Entonces, lo que voy a hacer es, voy a reemplazar esto, con mi primer fragmento de código. 157 00:12:06,580 --> 00:12:11,300 Vamos a incluir dos campos en nuestro formulario, para 158 00:12:11,300 --> 00:12:14,280 el nombre y apellido del usuario. 159 00:12:14,280 --> 00:12:17,440 Déjame agregar el código, luego veremos el resultado. 160 00:12:17,440 --> 00:12:19,750 Y luego, volveremos y examinaremos el código. 161 00:12:19,750 --> 00:12:23,190 Entonces, agregando el código en ese punto, 162 00:12:23,190 --> 00:12:27,820 como siempre este fragmento de código está en las instrucciones. 163 00:12:27,820 --> 00:12:30,510 Por lo tanto, déjame guardar los cambios. 164 00:12:30,510 --> 00:12:35,690 Y luego volveremos y veremos cómo se ve este formulario en el navegador. 165 00:12:35,690 --> 00:12:40,250 Echando un vistazo al formulario, verá que ahora tienen dos temas en el formulario aquí. 166 00:12:42,060 --> 00:12:46,790 El primero, tiene una etiqueta en el lado izquierdo que dice Nombre y 167 00:12:46,790 --> 00:12:49,780 luego tiene el cuadro de entrada aquí. 168 00:12:49,780 --> 00:12:52,800 Y luego el apellido, y luego un cuadro de entrada aquí. 169 00:12:52,800 --> 00:12:56,710 Ahora nota también que esta forma está dispuesta, de modo 170 00:12:56,710 --> 00:13:00,510 que esta parte ocupa la parte semi de la pantalla, y 171 00:13:00,510 --> 00:13:03,620 la parte restante está ocupada por la parte restante de la pantalla. 172 00:13:03,620 --> 00:13:08,400 Estás empezando a preguntarte, ¿cómo vamos a hacer esto? 173 00:13:09,720 --> 00:13:15,095 ¿ Bootstrap grid nos ayuda a decidir sobre estos tamaños? 174 00:13:15,095 --> 00:13:18,725 Esa sería una muy buena pregunta para ti mismo. 175 00:13:18,725 --> 00:13:21,695 Veamos el código y comprendamos cómo se ve. 176 00:13:21,695 --> 00:13:26,595 Antes de hacer eso, echemos un vistazo al mismo diseño de formularios, 177 00:13:26,595 --> 00:13:29,595 en el tamaño de pantalla extra pequeño. 178 00:13:29,595 --> 00:13:32,795 Por lo tanto, cambiar al tamaño de pantalla extra pequeño. 179 00:13:32,795 --> 00:13:34,425 Así que iremos al Galaxy S5. 180 00:13:35,490 --> 00:13:40,060 Usted nota, cómo el formulario se presenta en el tamaño de pantalla extra pequeño. 181 00:13:40,060 --> 00:13:44,304 Por lo tanto, verá que la etiqueta está en la parte superior, y 182 00:13:44,304 --> 00:13:50,590 luego el cuadro en sí, el cuadro de entrada en sí es la parte inferior, de manera similar para el apellido. 183 00:13:50,590 --> 00:13:53,420 Así que, te das cuenta de que Bootstrap. 184 00:13:53,420 --> 00:13:57,500 Por cierto, proporciona esas clases de formulario. 185 00:13:57,500 --> 00:14:02,460 Automáticamente, hace que su formulario responda, de modo que cuando 186 00:14:02,460 --> 00:14:07,450 se presenta en diferentes tamaños de pantalla, el formulario se distribuya adecuadamente, de 187 00:14:07,450 --> 00:14:12,550 modo que no se aplastará en tamaños de pantalla pequeños. 188 00:14:13,610 --> 00:14:17,220 Pero para tamaños de pantalla más grandes, debido a que tiene bienes raíces más grandes, 189 00:14:17,220 --> 00:14:23,480 usted es capaz de estirar la forma, para hacer uso del espacio adicional que tiene. 190 00:14:24,830 --> 00:14:31,150 Echando un vistazo a ese código fuente, y el formulario uno al lado 191 00:14:31,150 --> 00:14:36,140 del otro, obviamente lo primero que nota, es que su formulario comienza con la etiqueta del formulario aquí. 192 00:14:36,140 --> 00:14:40,160 Entonces, formulario y luego el formulario de cierre, etiqueta aquí. 193 00:14:40,160 --> 00:14:45,970 Por lo tanto, ahí dentro, usted está describiendo las diversas partes de su formulario. 194 00:14:45,970 --> 00:14:49,150 Entonces, echemos un vistazo a cómo se construye el primer nombre, 195 00:14:49,150 --> 00:14:54,390 el apellido obviamente como parece debería estar usando un enfoque similar. 196 00:14:54,390 --> 00:15:01,240 Entonces, de forma predeterminada, lo que nota es que, hay un div aquí. 197 00:15:01,240 --> 00:15:06,480 Elemento div aquí, con el div de cierre aquí. 198 00:15:06,480 --> 00:15:10,515 Entonces, este elemento div tiene una clase llamada form-group. 199 00:15:11,920 --> 00:15:15,108 Y luego seguido de una clase de fila. 200 00:15:15,108 --> 00:15:17,080 Entonces, la clase form-group esencialmente, 201 00:15:17,080 --> 00:15:22,580 dice que lo que esté dentro de este div será tratado como un grupo de elementos. 202 00:15:22,580 --> 00:15:26,120 Y luego se presentarán en consecuencia. 203 00:15:26,120 --> 00:15:30,902 Y la segunda parte, se ve el uso de fila aquí. 204 00:15:30,902 --> 00:15:35,740 Entonces, verías que la fila del grupo Bootstrap entra en juego aquí. 205 00:15:35,740 --> 00:15:40,610 Y así este grupo de formularios en particular, se puede diseñar 206 00:15:40,610 --> 00:15:45,480 usando la fila y las clases de columna que tiene de la cuadrícula de Bootstrap. 207 00:15:45,480 --> 00:15:48,506 Así que ahora, si aplica la fila a este div, 208 00:15:48,506 --> 00:15:52,956 lo que sea que haya dentro, puede usar las clases 209 00:15:52,956 --> 00:15:58,741 de columna, para decidir exactamente cuánto espacio ocupará cada uno de ellos en la pantalla. 210 00:15:58,741 --> 00:16:05,390 Ahora, por lo que eso lo hace más claro, por lo que los anexos de grupo de formularios. 211 00:16:05,390 --> 00:16:06,650 Esta unidad. 212 00:16:06,650 --> 00:16:08,570 Vamos a ver esta repetición una y 213 00:16:08,570 --> 00:16:14,460 otra vez cuando diseñemos los diversos elementos del formulario. 214 00:16:14,460 --> 00:16:20,020 Luego, debajo de eso, verá esta etiqueta de etiqueta aquí. 215 00:16:20,020 --> 00:16:25,180 Para la etiqueta de etiqueta, hay ciertos atributos que se le han asignado. 216 00:16:25,180 --> 00:16:28,740 Así que verá que la etiqueta de etiqueta usa un nombre para nombre. 217 00:16:28,740 --> 00:16:33,650 Entonces, esta etiqueta es para algo con el nombre de identificación. 218 00:16:33,650 --> 00:16:37,690 Entonces, ¿cuál es el cuadro de entrada que sigue justo debajo de eso? 219 00:16:37,690 --> 00:16:39,790 Vamos a ver eso en poco tiempo. 220 00:16:39,790 --> 00:16:46,136 Y luego mire las clases que se aplican a la clase label, col-md-2. 221 00:16:46,136 --> 00:16:50,029 Así que para pantallas medianas a extra grandes, 222 00:16:50,029 --> 00:16:56,040 este elemento en particular va a ocupar 2 columnas del espacio. 223 00:16:56,040 --> 00:16:57,884 Y luego anote el otro. 224 00:16:57,884 --> 00:17:00,764 Dice, etiqueta col-form-label. 225 00:17:00,764 --> 00:17:05,957 Así que la etiqueta col-form-label esencialmente especifica 226 00:17:05,957 --> 00:17:11,780 que esta etiqueta debe colocarse para alinearse con 227 00:17:11,780 --> 00:17:18,270 el otro elemento que forma parte de este grupo de formularios. 228 00:17:18,270 --> 00:17:20,576 Entonces, en este caso, el cuadro de entrada. 229 00:17:20,576 --> 00:17:24,508 Y esto también significa que 230 00:17:24,508 --> 00:17:29,868 la etiqueta esté alineada en el medio, 231 00:17:29,868 --> 00:17:35,550 horizontalmente con el cuadro de entrada. 232 00:17:35,550 --> 00:17:39,535 Entonces, esa es la razón por la que usamos la clase col-form-label. 233 00:17:39,535 --> 00:17:43,725 Si no aplica esto, su etiqueta se 234 00:17:43,725 --> 00:17:48,185 alineará con la parte superior de su cuadro de entrada. 235 00:17:48,185 --> 00:17:53,551 Que su formulario no se verá tan bien en tamaños de pantalla medianos a extra grandes. 236 00:17:53,551 --> 00:17:59,727 Ahora, en el lado izquierdo, por supuesto, porque esta ventana del navegador está aplastada, 237 00:17:59,727 --> 00:18:05,360 por lo que está mostrando la vista en un tamaño de pantalla pequeño o extra pequeño aquí. 238 00:18:05,360 --> 00:18:11,650 Así que es por eso que ve la etiqueta apilándose en la parte superior del cuadro de entrada aquí. 239 00:18:11,650 --> 00:18:14,560 Entonces esta es la etiqueta que especifica. 240 00:18:14,560 --> 00:18:18,380 Entonces, si tiene una etiqueta que desea asignar a un elemento, 241 00:18:18,380 --> 00:18:20,890 así es como va a asignar la etiqueta. 242 00:18:20,890 --> 00:18:25,740 Aquí abajo, ves una clase div col-md-10. 243 00:18:25,740 --> 00:18:29,120 Así que esto ocupa las 10 restantes de las 12 columnas. 244 00:18:29,120 --> 00:18:31,670 Así que dos columnas que están ocupadas por la etiqueta. 245 00:18:31,670 --> 00:18:36,070 Y las diez columnas restantes ocupadas por esto, pero están encerradas dentro del div. 246 00:18:36,070 --> 00:18:38,230 Y dentro de este div, 247 00:18:38,230 --> 00:18:43,493 ves que hay un elemento de etiqueta de entrada allí con el texto de tipo. 248 00:18:43,493 --> 00:18:49,734 Entonces, lo que significa que este cuadro de entrada acepta la entrada de texto. 249 00:18:49,734 --> 00:18:52,170 Y la clase, mira la clase aquí. 250 00:18:52,170 --> 00:18:54,800 Dice control de formularios. 251 00:18:54,800 --> 00:18:57,730 Esto es importante para aplicar al cuadro de entrada aquí. 252 00:18:57,730 --> 00:19:01,301 Así que el control de la forma, y el nombre de identificación. 253 00:19:01,301 --> 00:19:04,550 Y el nombre que es el nombre de pila. 254 00:19:04,550 --> 00:19:07,630 A continuación, nombre del marcador de posición. 255 00:19:07,630 --> 00:19:12,840 Entonces, el marcador de posición es lo que aparece dentro del cuadro como un marcador de posición para 256 00:19:12,840 --> 00:19:14,610 el cuadro de entrada. 257 00:19:14,610 --> 00:19:17,470 Así que se asignan todos estos atributos. 258 00:19:17,470 --> 00:19:18,690 Así que lo más importante, 259 00:19:18,690 --> 00:19:23,810 tenga en cuenta el uso de la clase de control de formulario que se aplica al tipo de entrada. 260 00:19:23,810 --> 00:19:29,960 Así es como estructuran estos dos elementos en su forma. 261 00:19:29,960 --> 00:19:35,425 Para tamaños de pantalla pequeños y por debajo, se apilan las dos cosas. 262 00:19:35,425 --> 00:19:37,118 Pero para medianos a extra grandes, 263 00:19:37,118 --> 00:19:41,500 viste que los está posicionando horizontalmente lado a lado. 264 00:19:41,500 --> 00:19:45,645 Lo mismo se aplica al código de apellido también. 265 00:19:45,645 --> 00:19:49,670 Será muy similar a cómo se estructura el nombre de pila. 266 00:19:49,670 --> 00:19:54,380 Así que me gustaría que pasaras un poco de tiempo echando un vistazo a este código también. 267 00:19:54,380 --> 00:19:58,150 Para que veas, basado en tu comprensión de esto, 268 00:19:58,150 --> 00:20:00,230 cómo esto también está formateado. 269 00:20:01,550 --> 00:20:08,360 El siguiente tipo de evento formal que vamos a agregar es un elemento de grupo de entrada. 270 00:20:08,360 --> 00:20:09,330 Déjame agregar el código. 271 00:20:09,330 --> 00:20:13,111 Veremos lo que resulta ser el formulario. 272 00:20:13,111 --> 00:20:15,560 Y luego volveremos y examinaremos el código. 273 00:20:15,560 --> 00:20:19,542 Así que aquí, después del segundo div, después del campo de apellido, 274 00:20:19,542 --> 00:20:24,840 voy a incluir el código para el siguiente elemento aquí. 275 00:20:25,880 --> 00:20:28,142 Y luego guardemos los cambios. 276 00:20:28,142 --> 00:20:30,466 Y luego, inmediatamente, 277 00:20:30,466 --> 00:20:36,360 verías un par de cosas más añadidas a tu formulario. 278 00:20:36,360 --> 00:20:38,975 Verá un campo de número de teléfono agregado aquí. 279 00:20:38,975 --> 00:20:42,985 Esto, por su aspecto, ves que esto es muy similar a eso. 280 00:20:42,985 --> 00:20:45,335 Así que no voy a explicar el código para esto. 281 00:20:45,335 --> 00:20:48,110 Esto debería ser muy sencillo para usted entender. 282 00:20:48,110 --> 00:20:52,073 Y entonces este campo de correo electrónico también debería ser muy sencillo 283 00:20:52,073 --> 00:20:53,747 para que usted lo entienda. 284 00:20:53,747 --> 00:20:56,537 Porque esto se ve muy similar al apellido. 285 00:20:56,537 --> 00:21:02,477 Excepto que para esto, el campo de entrada, el tipo se establecerá en correo electrónico. 286 00:21:02,477 --> 00:21:06,739 Para que las capacidades integradas de comprobación de formularios de 287 00:21:06,739 --> 00:21:10,094 su navegador se activen automáticamente. 288 00:21:10,094 --> 00:21:14,113 Así que cuando escribes algo que no parece un correo electrónico, 289 00:21:14,113 --> 00:21:16,860 entonces se quejará apropiadamente. 290 00:21:16,860 --> 00:21:21,780 Así que vamos a examinar esta parte particular del formulario aquí. 291 00:21:21,780 --> 00:21:27,500 Tenga en cuenta que en este caso, estamos agregando entre paréntesis izquierdo y 292 00:21:27,500 --> 00:21:31,430 el paréntesis derecho a este cuadro de entrada particular. 293 00:21:31,430 --> 00:21:36,570 Entonces, ¿cómo agregas cosas a tu caja así? 294 00:21:36,570 --> 00:21:41,330 Echando un vistazo al código aquí en su editor, 295 00:21:41,330 --> 00:21:45,750 verá que todavía tiene la fila de grupo de formularios que ya entiende. 296 00:21:45,750 --> 00:21:50,942 Y abajo aquí, tiene el tipo de entrada de elemento de formulario id telnum, 297 00:21:50,942 --> 00:21:54,460 y así sucesivamente, que también debería ser muy claro para usted. 298 00:21:54,460 --> 00:21:57,360 Así que no creo que necesite explicarte esa parte. 299 00:21:57,360 --> 00:22:04,366 Observe cómo estoy usando las clases de columna de cuadrícula de Bootstrap para cada uno de estos. 300 00:22:04,366 --> 00:22:08,060 Entonces la etiqueta se le da col-md-2. 301 00:22:08,060 --> 00:22:12,062 Y luego el número de teléfono uno se le da 302 00:22:12,062 --> 00:22:16,880 col-xs-7 col-sm-6 y col-md-7 aquí. 303 00:22:16,880 --> 00:22:23,100 De esa manera, el número de teléfono, este elemento está correctamente posicionado. 304 00:22:23,100 --> 00:22:27,310 Pero, en particular, prestemos atención a esta parte. 305 00:22:27,310 --> 00:22:31,470 Así que este de aquí está dentro de este div. 306 00:22:32,670 --> 00:22:36,250 Entonces, dentro de este div, observe la clase que se le ha dado. 307 00:22:36,250 --> 00:22:38,689 La clase dice «Input-group». 308 00:22:38,689 --> 00:22:43,587 Lo que significa esencialmente que lo que esté dentro de este div será tratado como 309 00:22:43,587 --> 00:22:45,350 un grupo de elementos aquí. 310 00:22:45,350 --> 00:22:49,030 Entonces, es por eso que la clase dada es input-group. 311 00:22:49,030 --> 00:22:53,600 Ahora, para agregar algo como esto, usará 312 00:22:53,600 --> 00:22:59,000 una clase llamada como input-group-addon. 313 00:22:59,000 --> 00:23:04,490 Y luego note que estoy usando un div para mantener ese elemento. 314 00:23:04,490 --> 00:23:08,200 Puedo usar cualquier cosa aquí, pero un div es útil aquí. 315 00:23:08,200 --> 00:23:12,980 Así que digo la clase div input-group-addon. 316 00:23:12,980 --> 00:23:16,250 Y luego el tipo div de cierre dentro, donde, 317 00:23:16,250 --> 00:23:18,500 observe que tengo el paréntesis izquierdo. 318 00:23:18,500 --> 00:23:25,477 Entonces esto es lo que le permite agregar un 319 00:23:25,477 --> 00:23:30,963 apéndice adicional a su cuadro de entrada aquí. 320 00:23:30,963 --> 00:23:38,390 Del mismo modo, el siguiente aquí también es un paréntesis derecho de entrada-grupo-addon. 321 00:23:38,390 --> 00:23:42,350 Entonces eso es lo que agrega el otro paréntesis derecho aquí. 322 00:23:42,350 --> 00:23:46,270 Ahora, entre estos dos, por supuesto, tienes el tipo de entrada. 323 00:23:46,270 --> 00:23:51,094 La entrada con el tipo tel y el control de formulario de clase, id, nombre, 324 00:23:51,094 --> 00:23:54,310 marcador de posición, todo en su lugar aquí. 325 00:23:54,310 --> 00:23:57,190 Así que esto no es más que la parte del código de área. 326 00:23:57,190 --> 00:24:02,049 Entonces, si usa este grupo de entrada junto con los complementos de grupo de entrada 327 00:24:02,049 --> 00:24:04,440 como este en cada lado. 328 00:24:04,440 --> 00:24:10,070 Esas cosas se agregarán a su elemento de entrada de esta manera. 329 00:24:10,070 --> 00:24:15,880 Eso le proporciona una buena manera de diseñar Su formulario con algunos añadidos en. 330 00:24:15,880 --> 00:24:20,170 Así, por ejemplo, si tiene un campo que acepta 331 00:24:22,450 --> 00:24:27,360 dinero como entrada, simplemente puede agregar un signo de dólar a la izquierda para 332 00:24:27,360 --> 00:24:33,050 indicar al usuario que ese es un campo que toma valor de moneda en este momento. 333 00:24:33,050 --> 00:24:37,558 Ahora mismo, en este caso, este campo toma un código de área. 334 00:24:37,558 --> 00:24:43,330 Y si ves cómo se escriben los códigos de área en los Estados Unidos y 335 00:24:43,330 --> 00:24:47,640 Canadá, sabes que están encerrados entre paréntesis izquierdo y derecho. 336 00:24:47,640 --> 00:24:52,680 Entonces, eso es lo que me permite especificar algo así en mi forma allí. 337 00:24:53,900 --> 00:24:56,460 Mi siguiente conjunto de elementos que voy a agregar a mi 338 00:24:56,460 --> 00:25:01,530 formulario son una casilla de verificación y una selección. 339 00:25:01,530 --> 00:25:03,460 Entonces, ¿cómo agregamos eso? 340 00:25:03,460 --> 00:25:09,014 Por lo tanto, si está familiarizado con los formularios HTML, entiende cómo funciona la selección y 341 00:25:09,014 --> 00:25:13,070 entiende cómo funcionan las casillas de verificación en los formularios HTML. 342 00:25:13,070 --> 00:25:15,880 Ahora, Bootstrap le da algunas 343 00:25:15,880 --> 00:25:20,080 clases adicionales que le permiten formatear estos elementos adecuadamente. 344 00:25:20,080 --> 00:25:21,740 Por lo tanto, permítanme añadir en la cita. 345 00:25:23,400 --> 00:25:25,120 Vamos a guardar los cambios. 346 00:25:25,120 --> 00:25:29,695 Eche un vistazo a lo que esto resulta en el formulario aquí. 347 00:25:29,695 --> 00:25:32,480 Y luego echa un vistazo al código. 348 00:25:32,480 --> 00:25:38,060 Así que aquí, ves que tengo una casilla de verificación y un mensaje aquí. 349 00:25:38,060 --> 00:25:45,372 Y luego este es un selector que me permite seleccionar entre un conjunto de opciones aquí. 350 00:25:47,324 --> 00:25:53,309 Ahora la forma tal y como existe aquí es lo que verá en 351 00:25:53,309 --> 00:25:56,080 tamaños de pantalla pequeños y extra pequeños. 352 00:25:56,080 --> 00:25:59,940 Echemos un vistazo en un tamaño de pantalla más grande. 353 00:25:59,940 --> 00:26:04,740 La misma forma cuando se presenta en 354 00:26:04,740 --> 00:26:06,760 tamaños de pantalla medianos a extra grandes se verá así. 355 00:26:06,760 --> 00:26:11,440 Así que usted puede ver cómo se posiciona el número de teléfono de contacto aquí, 356 00:26:11,440 --> 00:26:14,500 y el correo electrónico se coloca aquí. 357 00:26:14,500 --> 00:26:19,825 Así que tenga en cuenta que estas etiquetas están 358 00:26:19,825 --> 00:26:26,510 alineadas en una línea en el medio con las cajas aquí. 359 00:26:26,510 --> 00:26:32,640 Eso es lo que logra primero la clase de etiqueta de formulario col. 360 00:26:32,640 --> 00:26:36,940 Ahora, concentrémonos en esto que acabamos de agregar. 361 00:26:36,940 --> 00:26:40,060 Aquí, vemos que tenemos una casilla de verificación añadida en. 362 00:26:40,060 --> 00:26:43,312 Y luego, un campo de texto aquí. 363 00:26:43,312 --> 00:26:44,650 Entonces, ¿podemos contactarle? 364 00:26:44,650 --> 00:26:51,370 Entonces, por ejemplo, esperaría que el usuario lo activara y desactivara. 365 00:26:51,370 --> 00:26:53,500 Entonces, ¿cuál es la razón de una casilla de verificación? 366 00:26:53,500 --> 00:26:56,330 Del mismo modo, podría tener botones de opción. 367 00:26:56,330 --> 00:27:02,020 Bootstrap admite botones de opción que están disponibles en formularios HTML. 368 00:27:02,020 --> 00:27:05,650 Y proporcione algunas clases para peinarlos correctamente. 369 00:27:05,650 --> 00:27:10,850 Y luego este es, por supuesto, el selector que le permite seleccionar entre opciones. 370 00:27:10,850 --> 00:27:13,113 Así que regresando y mirando el código. 371 00:27:13,113 --> 00:27:15,250 Veamos cómo se implementa esto. 372 00:27:16,340 --> 00:27:22,030 Volviendo a echar un vistazo al código, ves que este es de nuevo una 373 00:27:22,030 --> 00:27:28,630 fila div de grupo de formularios aquí que incluye dos cosas aquí. 374 00:27:28,630 --> 00:27:32,859 Uno es un formulario de verificación 375 00:27:32,859 --> 00:27:38,731 col-md-6 offset-md-2. 376 00:27:38,731 --> 00:27:45,120 Entonces esto es lo que encierra una casilla de verificación dentro de este elemento div. 377 00:27:45,120 --> 00:27:53,902 Y luego abajo aquí tengo una clase div, Col-MD-3 offset-md-1. 378 00:27:53,902 --> 00:27:59,979 Así que observe que aquí, esto dice form-check col-md-6 offset-md-2. 379 00:27:59,979 --> 00:28:04,197 La razón por la que estoy haciendo un offset-md-2 es que no tengo una etiqueta. 380 00:28:04,197 --> 00:28:08,166 Así que normalmente estaba usando dos columnas para las etiquetas. 381 00:28:08,166 --> 00:28:13,160 Entonces, dado que esta casilla de verificación debe alinearse con el lado derecho en el formulario. 382 00:28:13,160 --> 00:28:16,591 Entonces, es por eso que utilicé offset-md-2 aquí. 383 00:28:16,591 --> 00:28:22,654 Y luego dentro de aquí dice label class="form-check-label». 384 00:28:22,654 --> 00:28:28,042 Y luego proporciona la etiqueta de entrada 385 00:28:28,042 --> 00:28:32,790 aquí con la casilla de verificación de tipo. 386 00:28:32,790 --> 00:28:35,070 Así es como se crea una casilla de verificación. 387 00:28:35,070 --> 00:28:38,300 Y luego la clase, la clase Bootstrap que va a aplicar a 388 00:28:38,300 --> 00:28:41,768 su casilla de verificación es form-check-input. 389 00:28:41,768 --> 00:28:49,390 Y luego el nombre y el valor inicial están vacíos. 390 00:28:49,390 --> 00:28:54,262 Y luego, esta es la etiqueta real que ves que se 391 00:28:54,262 --> 00:28:58,670 aplica a esa casilla de verificación en particular allí. 392 00:28:58,670 --> 00:29:04,260 Así que observe cómo estos dos están encerrados dentro de una etiqueta aquí. 393 00:29:04,260 --> 00:29:09,070 Así es como se crea una casilla de verificación junto con su etiqueta y 394 00:29:09,070 --> 00:29:12,980 luego se coloca en su formulario aquí. 395 00:29:12,980 --> 00:29:15,840 Entonces esto aquí usa la etiqueta de verificación de formulario. 396 00:29:15,840 --> 00:29:19,880 Y luego aquí, debe tener una casilla de verificación, type de entrada = «casilla de verificación», y 397 00:29:19,880 --> 00:29:21,340 luego etiquetarse. 398 00:29:21,340 --> 00:29:23,620 Así que aquí ves fuerte, ¿podemos contactarte? 399 00:29:23,620 --> 00:29:29,770 Así que es por eso que se muestra en negrita justo al lado de la casilla de verificación aquí. 400 00:29:29,770 --> 00:29:37,390 Ahora a continuación en el código, tiene una clase div col-md-3 offset-md-1. 401 00:29:37,390 --> 00:29:40,760 Así que esto ocupa tres columnas dentro de un desplazamiento de columna. 402 00:29:40,760 --> 00:29:42,980 Así que el total de cuatro columnas aquí. 403 00:29:42,980 --> 00:29:50,113 Así que este es col-md-6 más 2, por lo que son ocho columnas. 404 00:29:50,113 --> 00:29:51,480 Así que 8 más 4, 12. 405 00:29:51,480 --> 00:29:55,140 Así que eso se encarga de sus 12 columnas para su cuadrícula allí. 406 00:29:55,140 --> 00:30:01,740 Ahora dentro de esto, verá una selección aplicada aquí. 407 00:30:02,880 --> 00:30:07,320 Ahora bien, esta es la opción de selección que los formularios de archivos HTML admiten. 408 00:30:07,320 --> 00:30:09,240 Y mira la clase aplicada a esto. 409 00:30:09,240 --> 00:30:12,870 Dice class="form-control» a la selección. 410 00:30:12,870 --> 00:30:15,830 Y luego da las opciones en la selección aquí. 411 00:30:15,830 --> 00:30:18,638 Así que