Clase 3: Bootstrap

Framework CSS para construir interfaces modernas de forma rápida y responsiva

"Bootstrap acelera el diseño web al ofrecer componentes, utilidades y una estructura lista para usar"

Introducción ¿Qué es? Instalación Grid Componentes Ejemplos Práctica

1) Introducción a Bootstrap

Bootstrap es un framework front-end que ayuda a crear páginas web con una apariencia limpia, moderna y adaptable a diferentes tamaños de pantalla.

En lugar de escribir todo el CSS desde cero, Bootstrap ofrece clases ya preparadas para trabajar con botones, tarjetas, formularios, menús, rejillas, márgenes, espaciados y muchos otros elementos visuales.

Idea central

Bootstrap permite avanzar más rápido porque ya incluye estilos y componentes listos para usar.

Versión actual

La rama principal actual de Bootstrap es la 5.x y la última actualización publicada en la documentación oficial es la 5.3.8 (hasta el momento de la escritura de este material).

Enfoque responsivo

Bootstrap fue diseñado con enfoque mobile-first, por lo que facilita crear sitios que funcionen bien en celular, tablet y computadora.

Idea para recordar: Bootstrap no reemplaza HTML, CSS o JavaScript. Más bien, se apoya en ellos para hacer más rápido y ordenado el desarrollo de interfaces.

2) ¿Qué es Bootstrap y para qué sirve?

Bootstrap es una colección de clases CSS, componentes visuales y utilidades que se agregan directamente al HTML. Esto permite diseñar páginas más rápidamente sin tener que crear cada estilo desde cero.

Elemento ¿Qué ofrece Bootstrap? Ejemplo
Grid Distribución de columnas responsivas. container, row, col
Botones Botones con estilos listos para diferentes acciones. btn btn-primary
Tarjetas Bloques visuales para agrupar contenido. card
Formularios Campos con una apariencia uniforme y moderna. form-control
Utilidades Clases rápidas para márgenes, colores, alineación y espaciado. mt-3, p-4, text-center

¿Por qué muchos desarrolladores lo usan?

Porque ayuda a construir interfaces funcionales en menos tiempo, mantiene una apariencia consistente y reduce la cantidad de CSS personalizado que se debe escribir.

Bootstrap 5 ya no depende de jQuery, lo que simplifica su uso con JavaScript moderno.

3) ¿Cómo se instala Bootstrap?

Una forma rápida de comenzar es enlazar Bootstrap desde un CDN. Así se puede usar en una página sin descargar archivos manualmente.

Ejemplo básico de instalación con CDN

<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Mi página con Bootstrap</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1 class="text-center text-primary mt-4">Hola Bootstrap</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

En este ejemplo, el archivo CSS de Bootstrap da estilo a la página y el archivo JavaScript activa componentes interactivos como menús desplegables, modales o carruseles.

Paso a paso:
  1. Crear el archivo HTML.
  2. Agregar el enlace del CSS de Bootstrap dentro de <head>.
  3. Agregar el script de Bootstrap al final del <body>.
  4. Usar las clases de Bootstrap directamente en las etiquetas HTML.

4) Sistema de grid de Bootstrap

El sistema de grid de Bootstrap permite dividir la página en columnas. Está construido sobre Flexbox y facilita el diseño responsivo.

La estructura básica del grid utiliza tres elementos: container, row y col.

Clase Función Ejemplo
container Envuelve y centra el contenido. Área principal del diseño.
row Crea una fila para colocar columnas. Fila que agrupa varias secciones.
col Define una columna flexible. Bloque dentro de la fila.

Ejemplo básico de grid

<div class="container"> <div class="row"> <div class="col">Columna 1</div> <div class="col">Columna 2</div> <div class="col">Columna 3</div> </div> </div>

En este caso, las tres columnas comparten el espacio disponible en partes iguales.

Columnas según el tamaño de pantalla

<div class="container"> <div class="row"> <div class="col-md-6">Bloque 1</div> <div class="col-md-6">Bloque 2</div> </div> </div>
Interpretación: col-md-6 significa que, en pantallas medianas o mayores, el bloque ocupará 6 de las 12 columnas del sistema. Es decir, la mitad del ancho.

5) Componentes comunes de Bootstrap

Bootstrap incluye componentes listos para usar que resuelven necesidades comunes del diseño web.

Botones

Botones

Se crean con clases como btn y btn-primary.

<button class="btn btn-primary">Guardar</button>
Tarjetas

Cards

Sirven para agrupar contenido en un bloque visual claro y ordenado.

<div class="card"> <div class="card-body"> Contenido </div> </div>
Formularios

Formularios

Se estilizan con clases como form-label y form-control.

<label class="form-label">Correo</label> <input type="email" class="form-control">
Utilidades

Utilidades

Son clases pequeñas para espaciado, color, alineación y más.

<div class="p-3 mt-4 text-center">Contenido</div>

6) Ejemplos prácticos

Ejemplo 1: Botón principal

<a href="#" class="btn btn-primary">Ver más</a>

Aquí, btn activa el estilo base del botón y btn-primary aplica el estilo principal.

Ejemplo 2: Tarjeta simple

<div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Curso de Bootstrap</h5> <p class="card-text">Aprende a crear interfaces rápidas y limpias.</p> <a href="#" class="btn btn-primary">Entrar</a> </div> </div>

Este componente es útil para mostrar cursos, productos, noticias o recursos.

Ejemplo 3: Formulario básico

<form> <div class="mb-3"> <label class="form-label">Nombre</label> <input type="text" class="form-control"> </div> <div class="mb-3"> <label class="form-label">Correo</label> <input type="email" class="form-control"> </div> <button class="btn btn-success">Enviar</button> </form>

Ejemplo 4: Estructura de una página

<div class="container"> <div class="row"> <div class="col-md-8">Contenido principal</div> <div class="col-md-4">Barra lateral</div> </div> </div>
Bootstrap es muy útil cuando se desea una interfaz ordenada rápidamente, especialmente en proyectos académicos, prototipos o sitios informativos.

7) Ventajas y consideraciones

Aspecto Ventaja Consideración
Rapidez Permite diseñar más rápido. Si no se personaliza, varias páginas pueden verse parecidas.
Consistencia Los componentes mantienen uniformidad visual. Conviene adaptar colores y detalles al proyecto.
Responsive Facilita trabajar con distintos tamaños de pantalla. Es necesario comprender bien el grid y los breakpoints.
Aprendizaje Permite construir interfaces funcionales desde etapas tempranas. No sustituye el aprendizaje de HTML y CSS puro.
Conclusión práctica: Bootstrap ahorra tiempo, pero sigue siendo importante comprender la base de HTML, CSS y diseño responsivo.

8) Práctica de repaso

Responde las preguntas y luego verifica tus respuestas.

1. ¿Qué es Bootstrap?
2. ¿Qué clases forman la estructura básica del grid?
3. ¿Sobre qué tecnología se apoya el grid de Bootstrap 5?
4. ¿Qué clase suele usarse para un botón principal?
5. ¿Qué ocurrió con jQuery en Bootstrap 5?

9) Cierre

Bootstrap es una herramienta muy útil para construir interfaces web de manera rápida y ordenada. Su grid, sus componentes y sus utilidades permiten avanzar con más facilidad en el diseño.

Sin embargo, para usar Bootstrap correctamente, es importante seguir comprendiendo HTML, CSS y la lógica del diseño responsivo. El framework ayuda mucho, pero no sustituye la base técnica del desarrollo web.

Para recordar: Bootstrap acelera el diseño, pero entender su estructura y sus clases permite usarlo con criterio y no solo copiar código.