Bien, ahora toca dar un poco más de estilo y diseño al formulario.
Ya tenemos nuestro HTML.
Un esqueleto.
Entonces ahora podremos implementar VOSTRA para que nos sea un diseño tan plano.
Y también poder integrar con este tipo herramienta por el lado del cliente.
Todo lo que es html, css con estilos.
Bueno, Bootstrap es un franko justamente para dar estilos.
Más que nada algo simple.
Dar estilo al formulario tampoco tiene entrar mucho en detalles, porque Bootstrap es un tremendo framework
que da para un curso completo desde cero.
Acá vamos a ver justamente lo necesario para dar estilo a nuestro formulario y plantillas.
Bien, lo primero no vamos a comenzar que el started.
Llega tenemos.
Podemos agregar la hoja de estilo de forma remota.
Eso sería una alternativa muy recomendada, ya que el estilo se guarda y se carga desde un servidor
con balanceo carga.
Por lo tanto bastante rápido desde la nube.
O bien podemos descargar el archivo CSS y copiarlo en nuestro proyecto de forma local.
Por ahora lo vamos a hacer de forma remota desde el repositorio o la nube de Vostra CDN.
Entonces vamos a copiar este link completo.
Esta etiqueta link con el href que apunta hacia la hoja estilo lo copiamos tal cual completa y nos vamos
al código bien a la plantilla donde a formulario dentro del get debajo del título.
Entonces por acá lo pegamos bien.
Esto de acá lo dejamos tal cual.
Guardamos y también en resultada.
Guárdanos.
Bien, eso es lo primero.
Con este cambio debería cambiar por lo menos el fuente o el código de nuestra plantilla.
Con el fuente me refiero a las letras, como por ejemplo si levantamos vamos a levantar.
Nos vamos a lo que el Oxford se fijan, se distinto como se siente, ya tiene un diseño o un Lucasfilm.
Por lo menos las fuentes distinta.
De hecho volvemos al código con trocea para omitir guardamos.
Actualizamos, cambia completamente, se fijan cambia 100 por ciento ahora control y griega guardamos.
Actualizamos, cambia.
Ya estamos usando vuestra entonces ahora tenemos que decorar y dar estilo a nuestro formulario.
Bien, lo primero en cada div.
Acá, en cada div que contiene el label y el input, recordemos que los input están dentro de otro div,
entonces en cada div una clase css, una clase o estilo HTML.
Bien, acá vamos a colocar un estilo de vostra o una clase de vostra for grupo for guión group de grupo
grupo for grupo.
Vamos a copiar y lo pegamos en cada div principal.
Lo pegamos acá en país en roles también identificador.
Nombre en apellido.
Huyyy, username, password.
Correo, cuenta.
Fecha, nacimiento y por último, el botón Guardamos.
Vamos viendo, actualizamos.
Bueno, hubo un pequeño cambio que no se notó mucho, pero hasta ahí volvemos.
Lo siguiente dar estilo a cada input.
Vamos a subir.
Entonces en cada input.
Por ejemplo en checkbox.
Por acá.
Form control.
Entonces form control es para dar estilos a los campos del formulario.
También acá en radio, por cada radio del for o de Lizz lo pegamos en país en el select.
En este caso va en el campo select.
Roles en el input como por acá.
Pero dentro del input puede ir acá.
Acá hay un espacio de más o puede ir al medio entre medio.
Da lo mismo, pero siempre dentro del input identificador en el input.
El nombre dentro del input en apellido form control.
Acá espacio, además.
En el Yussef Naim, en el password, en el e-mail.
En la cuenta.
Fecha nacimiento por acá en el botón no, el botón va a tener otro estilo, lo a pegar, pero lo modificamos
con botón es btn de botón repetimos y el color por ejemplo primary, btn, espacio, btn primary.
Entonces primero un estilo botón común y corriente clásico y el segundo un botón con el color primary
que como color celeste o azul claro guardamos, actualizamos, se fijan ya toma alguna forma.
Con los input?
Bueno, tener un poco grande, pero también.
Vamos a centrar el formulario usando un div entonces en form.
Acá arriba undir que se abre y se cierra, pero lo cerramos al final.
Entonces el div se abre antes del form.
Y se cierra después de cerrar el formulario acá form.
Se cierra, se cierra el libro y acá arriba.
Una clase de vostra container.
Container o container de contenedor.
Click derecho para formatear source format.
Guardamos estos Warne Da lo mismo.
Hay que hacer caso omiso de lo mismo.
Perfectas.
Dije que ya tomando forma el formulario.
Ahí está el botón con un estilo podríamos arreglar, por ejemplo, el habilitar el género hombre corresponde
acá, mujer corresponde acá, administrador acá usuario acá se fijan y moderador acá.
Entonces la idea es ordenar un poco los lafe junto con los campos que queden uno al lado de otro, como
un sistema de grid o columnas.
Entonces, por ejemplo, el label va a estar en una columna, el campo en otra columna, pero van a
estar al mismo nivel y no separados.
Entonces esa es la idea.
Estos input están perfecto, también identificador el campo abajo.
Ningún problema.
Faltaría organizar esto acá.
Cómo volvemos?
Por ejemplo, partamos primero con habilitar.
Nos vamos acá a este div al div que tenemos para el input y colocamos acá una clase row row de fila
en inglés.
Una fila iba a tener una sola columna la columna en este caso este input del checkbox y en clase form
control.
Además, le vamos a dar una medida a esta columna.
Esta medida no tiene un valor o una medida en específico como centimetro píxeles, no?
Esto se adapta a la pantalla.
Básicamente trabaja en base a porcentaje o en unidades.
Por ejemplo, skol de columna, SM de small, una columna pequeña y la unidad va a ocupar un solo espacio,
pero como tenemos una sola lo dejamos en uno, es decir, tenemos un solo checkbox, lo dejamos en uno,
es decir, ocupar el total.
Actualizamos perfecto que acá abajo el género también por cada div.
Vamos a tener un row, una fila, pero dentro de esta fila va a tener dos columnas para el input y para
el label.
El label lo voy a bajar.
Perfecto, entonces va a tener una clase.
Bueno, el input ya le tiene font control agregamos col SM 2 va a ocupar de espacio y acá en el label
también.
También va a tener.
La columna col sm 2 entonces ocupa espacio 2 espacio del total, es decir, cada uno va a tener como
la mitad y también roles muy parecidos en roles.
Vamos a hacer lo mismo entonces por cada div.
Vamos a tener una clase, una clase row primero.
Después una columna para el input.
Por acá tenemos la clase Fond Control.
Leamos columna pequeña de 2 col SM 2 y abajo el label.
También.
Guardamos.
Hacemos un reflejo perfecto, fijan género hombre mujer y aquí efecto administrador, usuario, moderador,
ahora podríamos arreglar los Lauper y todos, no solamente acá, sino todos los leven.
Esto de acá también, todos con un formato de vostra para que quede un poco más centrado.
Se fijan acá el input, el campo del radio button y el label no está alineado.
De hecho, el label está un poquito más arriba y pasa lo mismo con los podczas.
Entonces también lo podríamos arreglar para eso.
En cada label, por ejemplo acá aspartamo, principios Parthenon con el label del género, acá le damos
una clase vostra cool for label.
Entonces Cool for label, columna, form de formulario, label de etiqueta y vamos a copiar.
Lo vamos a pegar también en roles por acá, solamente en los label de los checkbox.
Yaca en el label de los Rádio Puto.
Nada más, porque habilitar no tiene label solamente acá, pero después agregamos los label de cada
label acá, de país, de género.
Habilitar.
En fin, guardamos.
Se fija que se centró, que mucho mejor que centrado, alineado con los checkbox y lo rádio puto era
formulario, ya tiene estilo, está perfecto, está mucho mejor.
Solamente faltaría ahora dar estilo a los label, pero en realidad es idéntico.
Cool for label.
Entonces en cada label vamos a dar una clase, pero antes de eso, en habilitar acá me faltó el form
group.
Se fijan?
El habilitar no tiene form.
Glup.
Vamos a agregar a tiro.
Form Group.
Acá me había faltado entonces en cada div principal un grupo en el formulario que junta los label con
los input.
Ahora sí, ahora en cada label una clase con el cool for laver.
También en género, en habilitar, también en país.
En roles identificador.
En nombre?
Apellido Youssef Naim en Password también correo.
Cuenta.
Acá.
Fecha, nacimiento y nada más.
Porque el botón no tiene Lauper guardados.
Actualizamos, quedó mejor, se fijan, cambié un poco, premio mejor.
Ahora, qué pasa si envío, por ejemplo, enviamos, aparece el campo.
El error se fijan en mensaje error abajo.
También le podríamos dar algún estilo.
Por ejemplo, que se marque en rojo.
Bueno, en cada mensaje error, en cada div de errors, vamos a partir acá arriba también.
El primero no se valida, pero género sí.
Entonces acá una clase también te gusta.
Como siempre.
Alert alert de alerta con un color danger.
Entonces alerta, alerta de nuevo guión danger para dar un color rojo de mensaje de error.
Guardamos.
Bueno, y lo replicamos en cada uno.
Voy a copiar acá, entonces en cada div de errores no pegamos.
Hay que tener cuidado con copiar y pegar para no equivocarse.
Acá tengo espacio, además.
Me también en nombre.
En apellido.
En Yussef Léame siempre dentro del div de errores.
Hilitos guardamos a probar.
Perfecto campo requerido.
El formato expresión regular, inválido, con anotaciones de perfecto, mucho mejor actor, reformulo
está perfecto, pero está en forma vertical, es decir, es LaFleur y abajo el campo género y abajo
los campos país, abajo la lista desplegable y así por cada uno.
Entonces lo que podríamos hacer es dejarlo en forma horizontal.
Es una alternativa, lo me deja tal como está, que queda bien o mejor si queremos también un tema a
gusto es dejarlo de forma horizontal.
El label y al lado el campo impreso también tiene que modificar.
Acá en cada Forum Group va a hacer una fila.
Entonces dentro del Class Form Group, por acá un espacio row, una fila.
Entonces lo vamos a replicar en cada div con el fanclub.
Entonces, después del Fond Group, un espacio row.
Por cada uno.
Bien.
Y tenemos que dar.
Al label, una columna, un ancho y también al row del input a cada div, entonces cada div le damos
una unidad de columna y también al Loire, justamente col sm.
Por ejemplo, en label después del confor label le damos un ancho o medida de la columna porque es una
fila y también en el div un espacio y pegamos.
Y recuerden que el total este div es una fila, pero el label es una columna y el div es otra columna.
A pesar de que el div también es una fila este de acá paralímpica.
Pero bien.
Pero también es una columna.
Ahora faltaría dar la medida.
Por ejemplo, vamos a decir que el label va a ocupar dos medida.
Pero el campo va a ocupar 4, puedes ser 4 o 6.
El doble, por ejemplo, o 6 sería 3 veces más que el labe va ocupando unidades, haga 2 y haga 4 y
cada unidad es del mismo tamaño.
Entonces esa forma hace que el formulario y el diseño sea responsivo, responsivo, que se adapte a
la resolución y también a la pantalla de cada dispositivo.
Bien.
Y esto por cada uno.
Entonces tenemos que replicar.
Por ejemplo, vamos a partir con los labels por cada label.
Como es un row, una fila dentro, acá sería una columna con su medida.
Debes tener mucho cuidado con no equivocarse.
Dentro de clase, siempre dentro de clase y no fuera.
Perfecto.
Ahora faltaría los div que contiene el campo.
Le dimos cuatro con el espacio, entonces en cada div.
Hay algunos D.E.P que no tienen clase.
Por ejemplo, el país no tiene, pero rolees si tiene el DIF.
Entonces acaso lo agregamos?
Después del robo identificado?
No tiene.
Entonces vamos a copiar Klas la cada poco nombre no tiene.
API Yo tampoco, Yussef Name tampoco.
Ashworth tampoco correo.
Cuenta y la fecha?
Guardamos.
Actualizamos.
Estamos valiÃndose, empezamos y queda mucho mejor habilitÃ perfecto género, país, roles, bueno,
en roles.
Hay que revisarlo identificado, perfecto efecto.
Los nombres con cada uno, los campos y cada campo perfecto.
Bien, en roles hay que ajustar, por ejemplo, en vez de cuatro.
Acá pusimos cuatro.
Cada div va a tener dos, una media de dos.
Entonces hay que ir ajustando.
Hay que ir viendo.
Actualizamos perfecto.
Queda mucho mejor Vigen.
Están los tres que han ordenado y lo mismo acá.
Acá también se podría ir ajustando.
Qué más junto nos vamos a género.
El label tiene dos y cada div también dos en vez de cuatro.
Perfecto.
Mucho mejor se dejan ya este formulario bien enviar.
Y valía con mensaje de error.
Bien, por ahora quedamos hasta acá y continuamos la siguiente clase con estilos, con el diseño para
la vista.
Resultado nos vemos.