#botonesbootstrap

[fernando-arciniega]

Personalizacion del proyecto Carrito de Compras - BackEnd

Las siguientes interfaces son para actualizar el diseño, botones y funciones del BackEnd, para ello añadiremos íconos directo desde las clases de Bootstrap (https://icons.getbootstrap.com/ ) Agregando clases, por ejemplo, para el diseño del formulario de logueo, podemos agregar un icono al centro debajo del título, ajustar el tamaño del formulario para que se muestre mas pequeño, asi como ub borde y sombra, agrega validaciones para los campos del formulario. Recuerda no se agregan CSS personalizados, todo es mediante Bootstrap.

En el Panel de control, añadimos iconos a cada una de las fichas, el botón de cerrar sesión siempre debe estar presente. En los botones también se pueden poner iconos al lado dentro de los botones, bordes y combras a las fichas del panel:

Personalizar: Gestionar Productos

En esta sección vamos a agregar iconografías y botones adicionales, como Volver al panel. En los botones también se pueden poner iconos al lado, dentro de los botones:

Personalizar: Gestionar Usuarios

Al igual que el CRUD anterior, personalizaremos este módulo, agregando los botones mencionados en el modulo de productos como se muestra a continuación:

Aviso Importante: Revisión de Diseño del Proyecto

Como parte de la evaluación del proyecto, se revisará que todo el diseño esté implementado utilizando exclusivamente Bootstrap, sin incluir CSS adicional ni modificaciones fuera del framework. Esto incluye colores, tamaños, bordes y cualquier personalización visual. Además, se permite el uso de iconos de Bootstrap o de Font Awesome para complementar el diseño. Cualquier incumplimiento de estas indicaciones resultará en una deducción de puntos en la calificación final. Por favor, asegúrense de respetar estos lineamientos para garantizar uniformidad y cumplir con los objetivos del proyecto. ¡Éxito en su desarrollo! Read the full article

[fernando-arciniega]

Las 100 clases más usadas para personalizar el diseño en Bootstrap

Bootstrap es una herramienta esencial para el diseño web moderno. Su amplia variedad de clases permite a los desarrolladores personalizar rápidamente el diseño y la funcionalidad de sus proyectos. En esta entrada, exploraremos las 100 clases más usadas en Bootstrap, organizadas por categorías para facilitar su comprensión y aplicación. 1. Clases de Espaciado (Margin y Padding) - .m-0 - Margen en todos los lados igual a 0. - .mt-3 - Margen superior de tamaño 3. - .mb-4 - Margen inferior de tamaño 4. - .ms-auto - Margen izquierdo automático. - .me-2 - Margen derecho de tamaño 2. - .p-0 - Sin padding en todos los lados. - .pt-5 - Padding superior de tamaño 5. - .pb-3 - Padding inferior de tamaño 3. - .ps-1 - Padding izquierdo de tamaño 1. - .pe-auto - Padding derecho automático. 2. Clases de Tipografía - .text-center - Texto centrado. - .text-start - Texto alineado a la izquierda. - .text-end - Texto alineado a la derecha. - .text-muted - Texto con estilo deshabilitado. - .fw-bold - Texto en negrita. - .fw-light - Texto con fuente más ligera. - .fst-italic - Texto en cursiva. - .text-uppercase - Texto en mayúsculas. - .text-decoration-underline - Subrayado en texto. - .text-truncate - Recorte de texto largo con puntos suspensivos. 3. Clases de Color - .bg-primary - Fondo azul (color principal). - .bg-secondary - Fondo gris oscuro (color secundario). - .bg-success - Fondo verde. - .bg-danger - Fondo rojo. - .bg-warning - Fondo amarillo. - .bg-info - Fondo azul claro. - .bg-light - Fondo blanco con sombra. - .bg-dark - Fondo negro. - .text-primary - Texto azul. - .text-danger - Texto rojo. 4. Clases de Tamaño de Componentes - .w-50 - Ancho del 50%. - .w-auto - Ancho automático. - .h-100 - Altura del 100%. - .h-auto - Altura automática. - .img-fluid - Imágenes responsivas. - .col-6 - Ocupa la mitad de la fila en un grid. - .col-md-4 - Ocupa un tercio de la fila en pantallas medianas. - .display-1 - Tamaño de fuente más grande. - .display-4 - Tamaño de fuente más pequeño. - .fs-6 - Tamaño de fuente pequeño. 5. Clases de Flexbox y Alineación - .d-flex - Elemento como flexbox. - .justify-content-center - Centrar elementos horizontalmente. - .justify-content-between - Espaciado entre elementos. - .align-items-center - Alinear elementos verticalmente al centro. - .flex-column - Alinear elementos en columna. - .flex-row-reverse - Ordenar elementos de derecha a izquierda. - .order-1 - Orden de elementos (1). - .order-last - Último en el orden. - .gap-3 - Espaciado entre elementos flexibles. - .d-grid - Convertir en contenedor grid. 6. Clases de Botones - .btn-primary - Botón con color principal. - .btn-secondary - Botón con color secundario. - .btn-outline-primary - Botón con borde azul y sin relleno. - .btn-sm - Botón pequeño. - .btn-lg - Botón grande. - .btn-block - Botón de ancho completo (deprecated, pero aún usado). 7. Clases de Tablas - .table - Estilo básico para tablas. - .table-striped - Filas alternadas con colores. - .table-hover - Filas resaltadas al pasar el cursor. - .table-bordered - Bordes alrededor de la tabla y celdas. - .table-responsive - Tabla que se adapta a pantallas pequeñas. 8. Clases de Posicionamiento - .position-relative - Posicionamiento relativo. - .position-absolute - Posicionamiento absoluto. - .position-fixed - Elemento fijo en la pantalla. - .top-0 - Posiciona el elemento en la parte superior. - .start-50 - Centra horizontalmente desde el lado izquierdo. - .translate-middle - Centra completamente un elemento. 9. Clases de Iconos y Contenedores - .rounded - Bordes redondeados. - .rounded-circle - Forma circular. - .shadow-sm - Sombra ligera. - .shadow-lg - Sombra más pronunciada. - .container-fluid - Contenedor que ocupa el ancho completo. 10. Clases de Interacción - .disabled - Deshabilita elementos. - .active - Marca un elemento como activo. - .collapse - Clase para elementos que se colapsan (acordeón). - .show - Mostrar contenido colapsado. 11. Clases de Listas - .list-group - Lista con estilos de Bootstrap. - .list-group-item - Elemento de la lista. - .list-group-item-action - Elemento interactivo en listas. - .list-unstyled - Lista sin viñetas. 12. Clases de Utilidades para Pantallas - .d-none - Ocultar un elemento. - .d-md-block - Mostrar un elemento en pantallas medianas o mayores. - .d-lg-none - Ocultar un elemento en pantallas grandes. - .d-xl-inline - Mostrar como elemento en línea en pantallas grandes. 13. Clases de Navegación - .navbar - Barra de navegación. - .navbar-expand-lg - Expandir barra en pantallas grandes. - .navbar-light - Barra con colores claros. - .navbar-dark - Barra con colores oscuros. - .nav-link - Enlace de navegación. 14. Clases para Formularios - .form-control - Entrada de texto estilizada. - .form-select - Selector estilizado. - .form-check - Agrupación de casillas de verificación. - .input-group - Grupo de entradas con adornos. - .input-group-text - Texto dentro del grupo de entrada. 15. Clases de Animaciones - .fade - Efecto de desvanecimiento. - .modal - Para modales o ventanas emergentes. - .offcanvas - Panel lateral deslizante. - .carousel - Crear carruseles de imágenes. - .spinner-border - Animación de carga circular. - .spinner-grow - Animación de carga en expansión. Con esta lista, tendrás un panorama completo de las clases más usadas en Bootstrap para personalizar tus proyectos. Explora, experimenta y crea diseños únicos con estas herramientas, puedes ver más en el sitio oficial: https://getbootstrap.com/ Read the full article