IA Cheatsheets

¡Por supuesto! Bootstrap 5 es un marco de trabajo front-end muy popular y potente para desarrollar sitios web y aplicaciones responsivas y móviles primero. Aquí tienes un “cheatsheet” completo y bien estructurado, optimizado para ser claro y conciso para una IA conversacional.

🔰 Bootstrap 5 Cheatsheet Completo 🔰

Bootstrap 5 es el último lanzamiento mayor del framework CSS más popular del mundo. Es un conjunto de herramientas de código abierto para desarrollar con HTML, CSS y JavaScript. Proporciona componentes pre-construidos y una potente cuadrícula responsiva para crear interfaces de usuario modernas de forma rápida.

Características Clave de Bootstrap 5:

1. 🛠️ Configuración Inicial

1.1. CDN (Recomendado para inicio rápido)

Simplemente añade estos enlaces en tu archivo HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Proyecto Bootstrap</title>
  &lt;!-- Enlace CSS de Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>

  <h1>Hola, Bootstrap 5!</h1>

  &lt;!-- Enlace JS de Bootstrap (Bundle con Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

1.2. NPM (Para proyectos de React, Vue, etc.)

npm install bootstrap@5.3.3 # O la versión más reciente
# o
yarn add bootstrap@5.3.3

Luego, importa en tu archivo JavaScript/CSS principal:

// src/index.js o src/App.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min'; // O importa solo los componentes JS que necesites

2. 📐 Layout y Cuadrícula (Grid)

2.1. Contenedores

Elementos esenciales para centrar y añadir padding al contenido.

2.2. Sistema de Cuadrícula (Grid System)

Basado en Flexbox, un sistema de 12 columnas.

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Columna 1</div>
    <div class="col-12 col-md-6 col-lg-8">Columna 2</div>
  </div>
  <div class="row row-cols-1 row-cols-md-2 g-4"> {/* `row-cols` define cols por defecto, `g-4` define `gap` */}
    <div class="col">Item de grilla</div>
    <div class="col">Item de grilla</div>
    <div class="col">Item de grilla</div>
    <div class="col">Item de grilla</div>
  </div>
</div>

3. 📝 Contenido y Tipografía

Imágenes

Tablas

4. 🎛️ Formularios

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Dirección de Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">Nunca compartiremos tu email con nadie más.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Contraseña</label>
    <input type="password" class="form-control is-invalid" id="exampleInputPassword1">
    <div class="invalid-feedback">
      Por favor, introduce una contraseña válida.
    </div>
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Recordarme</label>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

5. 🧩 Componentes

Botones

<button type="button" class="btn btn-primary">Primario</button>
<a href="#" class="btn btn-outline-success btn-lg">Grande y Exitoso</a>

Alertas

<div class="alert alert-success" role="alert">
  ¡Esto es una alerta de éxito!
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>¡Oh no!</strong> Hubo un problema.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
</div>

Badges (Insignias)

<h3>Ejemplo <span class="badge text-bg-secondary">Nuevo</span></h3>
<button class="btn btn-primary">
  Notificaciones <span class="badge text-bg-light rounded-pill">4</span>
</button>

Cards (Tarjetas)

Contenedores flexibles para contenido.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título de Tarjeta</h5>
    <p class="card-text">Algún texto de ejemplo para construir sobre el título de la tarjeta y hacer la mayor parte del contenido de la tarjeta.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Modals (Ventanas Modales)

Ventanas emergentes interactivas.

&lt;!-- Botón para activar el modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Abrir Modal
</button>

&lt;!-- El Modal en sí -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Título del Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Contenido del modal...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

Barra responsiva para la navegación superior.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Marca</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Características</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Acción</a></li>
    <li><a class="dropdown-item" href="#">Otra acción</a></li>
  </ul>
</div>

Paginación

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Anterior</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">Siguiente</a></li>
  </ul>
</nav>

Progress Bars (Barras de Progreso)

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>

Spinners (Indicadores de Carga)

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>

Toasts (Notificaciones Temporales)

Mensajes transitorios que aparecen en la esquina.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <small>Ahora</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    ¡Hola, mundo! Esto es un mensaje toast.
  </div>
</div>

Tooltips y Popovers (Puntas de Herramienta y Ventanas Emergentes)

Requieren inicialización con JavaScript.

&lt;!-- Tooltip -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Este es un Tooltip">
  Tooltip en la parte superior
</button>

&lt;!-- Popover -->
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-title="Título del Popover" data-bs-content="Contenido del popover.">
  Click para ver Popover
</button>

<script>
  // Inicialización de Tooltips/Popovers (se debe hacer una vez que el DOM esté listo)
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl =&gt; new bootstrap.Tooltip(tooltipTriggerEl))

  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
  const popoverList = [...popoverTriggerList].map(popoverTriggerEl =&gt; new bootstrap.Popover(popoverTriggerEl))
</script>

6. 🎨 Clases de Utilidad

Pequeñas clases para aplicar estilos de forma rápida.

7. 🎨 Personalización

8. 💡 Buenas Prácticas y Consejos

Este cheatsheet te proporciona una referencia completa de los aspectos más importantes de Bootstrap 5, lo que te permitirá construir interfaces de usuario responsivas y estéticamente agradables de manera eficiente.