1
00:00:00,420 --> 00:00:08,100
Nueva clase que vamos a dedicar a ver un poco más sobre el diseño, sobre los estilos con vostra específicamente

2
00:00:08,190 --> 00:00:14,250
en el formulario y vamos a correr el proyecto con clic derecho Run as Springwood App.

3
00:00:19,810 --> 00:00:22,210
Vamos a ejecutar el proyecto.

4
00:00:26,120 --> 00:00:31,370
Formulario con un diseño mejor de lo que teníamos antes, pero todavía puede quedar mucho mejor.

5
00:00:31,460 --> 00:00:33,260
Vamos a ver la plantilla.

6
00:00:36,280 --> 00:00:39,220
Y vamos a agregar un par de clases a la tabla.

7
00:00:39,310 --> 00:00:41,530
Acá tenemos la tabla todavía sin estilo.

8
00:00:41,650 --> 00:00:47,480
Vamos a agregar un class table del border.

9
00:00:48,700 --> 00:00:50,710
Es decir, una tabla bordeada.

10
00:00:50,800 --> 00:00:55,000
Vamos a guardar y vamos a actualizar el formulario.

11
00:00:55,120 --> 00:01:00,800
Y acá tenemos ya un diseño mucho mejor con el nombre video y mail y los campo queda con un margen que

12
00:01:00,800 --> 00:01:02,620
era bastante más ordenado.

13
00:01:03,550 --> 00:01:06,010
Vamos a agregar, por ejemplo, al nombre.

14
00:01:11,810 --> 00:01:14,680
Le damos un ancho de doscientos píxeles.

15
00:01:17,730 --> 00:01:21,640
Actualizamos y el label queda de un largo un poco menos que el campo.

16
00:01:21,820 --> 00:01:26,370
Hoy el formulario está perfecto, pero todavía se podría mejorar bastante más.

17
00:01:26,490 --> 00:01:30,720
En vez de utilizar una tabla HTML, podríamos usar contenedores div.

18
00:01:30,780 --> 00:01:34,140
Por ejemplo, vamos a modificar el campo nombre.

19
00:01:34,200 --> 00:01:36,450
Vamos a quitar la tabla.

20
00:01:37,320 --> 00:01:39,600
Vamos a quitar los terre.

21
00:01:39,750 --> 00:01:43,890
Vamos a quitar todo lo relacionado a la tabla.

22
00:01:45,690 --> 00:01:49,420
Acá tenemos el nombre que sería un label.

23
00:01:51,990 --> 00:01:53,490
Hay que partir por la etiqueta.

24
00:01:53,700 --> 00:01:56,700
A la etiqueta le vamos a dar una clase

25
00:01:59,490 --> 00:02:03,660
con form label, una clase para la columna label del formulario.

26
00:02:03,690 --> 00:02:05,970
Además, le damos a dar un largo.

27
00:02:08,250 --> 00:02:11,550
Acá estamos usando estilos propio de vostra.

28
00:02:11,670 --> 00:02:17,100
Acá estamos dando el largo de la columna que ocupe el ancho de dos columnas.

29
00:02:17,370 --> 00:02:25,170
Por ejemplo, al campo le podríamos dar un largo de 10 espacios o 10 columnas, mientras que el label

30
00:02:25,200 --> 00:02:29,600
sea un poco más pequeño y en vez de ocupar 10 o 6 va a ocupar 2.

31
00:02:29,700 --> 00:02:34,650
Es una medida que maneja Bootstrap para los ancho en la columna cuando trabajamos, por ejemplo, con

32
00:02:34,650 --> 00:02:35,070
la Yawee.

33
00:02:35,160 --> 00:02:39,570
Ahora vamos a agregar un div que van ider todo este conjunto.

34
00:02:39,990 --> 00:02:42,570
Este conjunto del label y el input.

35
00:02:45,810 --> 00:02:48,300
Le vamos a dar una clase que es importante.

36
00:02:48,780 --> 00:02:56,270
For Group, un grupo de formulario y el input al campo le vamos a dar otro div.

37
00:02:57,150 --> 00:03:01,140
Por lo tanto queda anidado dentro del div div.

38
00:03:01,260 --> 00:03:02,670
Le vamos a dar una clase.

39
00:03:07,560 --> 00:03:15,420
Es decir, que el espacio de la columna campo va a ocupar seis columnas de ancho y el input le mantenemos

40
00:03:15,450 --> 00:03:16,260
el form control.

41
00:03:16,380 --> 00:03:18,780
Y así con cada uno de los componentes.

42
00:03:19,230 --> 00:03:20,070
Por ejemplo.

43
00:03:22,200 --> 00:03:23,250
Con el apellido.

44
00:03:24,350 --> 00:03:29,960
Con el email y con el botón vamos a cerrar.

45
00:03:37,020 --> 00:03:45,450
Vamos a quitar el tape completamente y vamos a agregar los label a cada nombre del campo.

46
00:03:48,050 --> 00:03:51,860
Y también tenemos que cerrar las etiquetas.

47
00:03:53,510 --> 00:03:54,590
Y tenemos que anidar.

48
00:03:57,310 --> 00:03:57,970
Los input.

49
00:04:19,540 --> 00:04:21,940
Ordenamos y hoy tenemos el formulario.

50
00:04:22,090 --> 00:04:22,690
Un Form Group.

51
00:04:22,750 --> 00:04:27,760
El Laver con la clase, con el ancho y que ocupa dos espacios, dos columnas.

52
00:04:28,360 --> 00:04:31,450
Acá le damos un estilo para centrar el nombre.

53
00:04:31,570 --> 00:04:38,080
Acá tenemos la clase, el estilo para dar un ancho, un largo de c columnas al campo.

54
00:04:39,910 --> 00:04:40,750
Vamos a actualizar.

55
00:04:42,970 --> 00:04:44,840
De ahí tenemos el formulario.

56
00:04:44,920 --> 00:04:46,420
Te dijo que era bastante mejor.

57
00:04:46,480 --> 00:04:48,250
Nombre, apellido, email.

58
00:04:49,960 --> 00:04:56,680
Ahora, si queremos que el nombre esté al lado del campo, simplemente al lado de Form Group, colocamos

59
00:04:56,830 --> 00:04:57,250
row

60
00:05:02,830 --> 00:05:03,330
guardados.

61
00:05:04,480 --> 00:05:12,160
Ahí tenemos el formulario maquetado con estilos CSS y contenedores y con VOSTRA es bastante más sencillo

62
00:05:12,910 --> 00:05:13,820
y queda mucho mejor.