Nueva clase que vamos a dedicar a ver un poco más sobre el diseño, sobre los estilos con vostra específicamente
en el formulario y vamos a correr el proyecto con clic derecho Run as Springwood App.
Vamos a ejecutar el proyecto.
Formulario con un diseño mejor de lo que teníamos antes, pero todavía puede quedar mucho mejor.
Vamos a ver la plantilla.
Y vamos a agregar un par de clases a la tabla.
Acá tenemos la tabla todavía sin estilo.
Vamos a agregar un class table del border.
Es decir, una tabla bordeada.
Vamos a guardar y vamos a actualizar el formulario.
Y acá tenemos ya un diseño mucho mejor con el nombre video y mail y los campo queda con un margen que
era bastante más ordenado.
Vamos a agregar, por ejemplo, al nombre.
Le damos un ancho de doscientos píxeles.
Actualizamos y el label queda de un largo un poco menos que el campo.
Hoy el formulario está perfecto, pero todavía se podría mejorar bastante más.
En vez de utilizar una tabla HTML, podríamos usar contenedores div.
Por ejemplo, vamos a modificar el campo nombre.
Vamos a quitar la tabla.
Vamos a quitar los terre.
Vamos a quitar todo lo relacionado a la tabla.
Acá tenemos el nombre que sería un label.
Hay que partir por la etiqueta.
A la etiqueta le vamos a dar una clase
con form label, una clase para la columna label del formulario.
Además, le damos a dar un largo.
Acá estamos usando estilos propio de vostra.
Acá estamos dando el largo de la columna que ocupe el ancho de dos columnas.
Por ejemplo, al campo le podríamos dar un largo de 10 espacios o 10 columnas, mientras que el label
sea un poco más pequeño y en vez de ocupar 10 o 6 va a ocupar 2.
Es una medida que maneja Bootstrap para los ancho en la columna cuando trabajamos, por ejemplo, con
la Yawee.
Ahora vamos a agregar un div que van ider todo este conjunto.
Este conjunto del label y el input.
Le vamos a dar una clase que es importante.
For Group, un grupo de formulario y el input al campo le vamos a dar otro div.
Por lo tanto queda anidado dentro del div div.
Le vamos a dar una clase.
Es decir, que el espacio de la columna campo va a ocupar seis columnas de ancho y el input le mantenemos
el form control.
Y así con cada uno de los componentes.
Por ejemplo.
Con el apellido.
Con el email y con el botón vamos a cerrar.
Vamos a quitar el tape completamente y vamos a agregar los label a cada nombre del campo.
Y también tenemos que cerrar las etiquetas.
Y tenemos que anidar.
Los input.
Ordenamos y hoy tenemos el formulario.
Un Form Group.
El Laver con la clase, con el ancho y que ocupa dos espacios, dos columnas.
Acá le damos un estilo para centrar el nombre.
Acá tenemos la clase, el estilo para dar un ancho, un largo de c columnas al campo.
Vamos a actualizar.
De ahí tenemos el formulario.
Te dijo que era bastante mejor.
Nombre, apellido, email.
Ahora, si queremos que el nombre esté al lado del campo, simplemente al lado de Form Group, colocamos
row
guardados.
Ahí tenemos el formulario maquetado con estilos CSS y contenedores y con VOSTRA es bastante más sencillo
y queda mucho mejor.