Introducción:
En este tutorial, aprenderás a crear un elegante formulario de inicio de sesión centrado utilizando Bootstrap, una de las bibliotecas de diseño web más populares. Este formulario incluirá una imagen redonda de perfil, campos de usuario y contraseña, un botón de inicio de sesión, así como enlaces para recuperar la contraseña y registrar un nuevo usuario.
Requisitos Previos:
- Conocimientos básicos de HTML y CSS.
- Un editor de código o IDE para escribir y probar el código.
- Una conexión a Internet para acceder a las bibliotecas de Bootstrap.
Pasos del Tutorial:
Preparación del Proyecto:
- Configura una estructura de proyecto básica con un archivo HTML en blanco.
- Asegúrate de tener acceso a la biblioteca Bootstrap.
Crear el Contenedor Principal:
Utiliza las clases de Bootstrap para crear un contenedor principal centrado en la pantalla.
Añadir la Imagen de Perfil:
Inserta una imagen redonda de perfil en la parte superior del formulario utilizando clases de Bootstrap para centrarla y darle estilo.
Crear el Formulario de Inicio de Sesión:
Utiliza las clases de Bootstrap para crear campos de usuario y contraseña, así como un botón de inicio de sesión dentro del formulario.
Agregar Enlaces Adicionales:
Incluye enlaces debajo del formulario para recuperar la contraseña y registrar un nuevo usuario.
Personalización Opcional:
Personaliza el formulario según tus preferencias, como cambiar la imagen de perfil, ajustar los colores o los tamaños de los elementos.
Prueba y Resultado Final:
Prueba tu formulario de inicio de sesión en diferentes tamaños de pantalla para asegurarte de que se vea bien y funcione correctamente.
...
Conclusión:
Después de seguir este tutorial, habrás creado un formulario de inicio de sesión centrado y elegante utilizando Bootstrap. Este formulario puede ser una excelente adición a tu sitio web o aplicación web para la autenticación de usuarios.
Codigo del formulario login
Si con los pasos anteriores no lo has logrado no te preocupes, aqui te dejo el codigo completo
NOTA: la cabecera y los scripts son los proporcionados por bootstrap
<?php $titulo = "login" ?>
<!doctype html>
<html lang="en">
<?php include_once('./sistema/includes/header.php') ?>
<body>
<header>
<!-- Aquí va el navbar -->
</header>
<main class="d-flex justify-content-center align-items-center vh-100 ">
<div class="login-form border border-2 p-3 bg-secondary text-white">
<!-- Imagen redonda centrada -->
<div class="profile-image mb-4 text-center">
<img src="img/user.png" alt="Usuario" class="rounded-circle mx-auto " style="width: 150px; height: 150px;">
</div>
<h2 class="text-center">Inicio de Sesión</h2>
<form>
<div class="form-group">
<label for="usuario">Usuario:</label>
<input type="text" class="form-control" id="usuario" placeholder="Ingrese su usuario">
</div>
<div class="form-group">
<label for="contraseña">Contraseña:</label>
<input type="password" class="form-control" id="contraseña" placeholder="Ingrese su contraseña">
</div><br>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-block mb-3">Iniciar Sesión</button>
<button type="submit" class="btn btn-warning btn-block mb-3 ms-3">Cancelar</button>
</div>
</form>
<div class="bg-white form-control">
<!-- Enlaces para registrar usuario y recuperar contraseña -->
<a href="#" class="mt-2 d-block">¿Olvidó su contraseña?</a>
<a href="#" class="mt-2 d-block">¿No tiene una cuenta? Regístrese aquí</a>
</div>
</div>
</main>
<footer>
<!-- Aquí va el footer -->
</footer>
<?php include_once('./sistema/includes/scripts.php'); ?>
</body>
</html>
Cabecera del proyecto
<head>
<title><?php echo $titulo ?></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- Agrega esta línea en el head de tu HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.20.0/font/bootstrap-icons.css">
<!-- Agrega esta línea en el head de tu HTML -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
Scripts del proyecto
<!-- Bootstrap JavaScript Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias