En esta ocasión vengo a compartir un simple diseño de un formulario de inicio de sesión o login hecho con Bootstrap 4.
Generalmente un formulario de login solo lleva dos campos: el del correo y la contraseña.
Gracias a los estilos de Bootstrap podemos diseñar un formulario responsivo, elegante y simple con pocas líneas de código.
Nuestro formulario debe ser responsivo, así que en dispositivos como computadoras o iPads (de manera horizontal) debería ocupar un espacio pequeño en el centro; y en dispositivos de pantallas pequeñas debería abarcar todo el ancho.
Para lograr esto utilizamos las clases de offset y las clases de columnas, que básicamente empujan el formulario 4 columnas a la derecha en pantallas anchas; el formulario ocupa 4 y sobran 4 (ya que son 12 columnas en total); dándole un centrado.
En las versiones de pantallas pequeñas especificamos un col-12 para que ocupe todo el ancho.
Para definir cada input
agregamos un div
con la clase form-group
, y cada input
debe tener la clase form-control.
El botón es un simple botón con la variante de primary. También he colocado una imagen centrada y con los bordes redondados para adornar el login, la cual es totalmente opcional.
El procesamiento del login puede hacerse con cualquier lenguaje o framework, ya sea del lado del cliente o del lado del servidor. Hace algún tiempo hice un ejemplo con PHP, y uno con PHP y MySQL.
Al final el login queda como se ve a continuación:
Puedes probar el formulario en vivo aquí, el cual está basado en una plantilla de Bootstrap 4.
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…
En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…
En este artículo se presenta una guía para imprimir un PDF a partir de una…
En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…
Esta web usa cookies.