Blog Developer - Guía para Desarrolladores

Contenido

Introducción a Bootstrap

Bootstrap es el framework CSS más popular para desarrollar sitios web responsivos y orientados a dispositivos móviles. Creado por Twitter, Bootstrap facilita el diseño web con plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, tablas, navegación, modales y otros componentes de interfaz.

Ventajas de Bootstrap

Responsivo: Diseño adaptable a cualquier dispositivo
Mobile-first: Enfoque en dispositivos móviles primero
Componentes predefinidos: Gran variedad de componentes listos para usar
Consistencia: Mantiene un diseño coherente en todo el sitio
Comunidad activa: Gran soporte y documentación

Instalación

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Guía de Inicio Rápido

Aprende a configurar Bootstrap en tu proyecto en minutos.

Bootstrap vs. Otros Frameworks

Comparativa entre Bootstrap, Tailwind, Foundation y otros frameworks CSS.

Sistema de Grid

El sistema de grid de Bootstrap es uno de sus componentes más poderosos. Permite crear diseños responsivos complejos con facilidad mediante un sistema de 12 columnas.

Conceptos Básicos

Contenedores: .container o .container-fluid para envolver el contenido
Filas: .row para crear filas horizontales
Columnas: .col-* para definir el ancho de las columnas
Breakpoints: sm, md, lg, xl, xxl para diferentes tamaños de pantalla

Ejemplo de Grid

<div class="container">
  <div class="row">
    <div class="col-md-6">Columna de 6 unidades en pantallas medianas</div>
    <div class="col-md-6">Columna de 6 unidades en pantallas medianas</div>
  </div>
  <div class="row">
    <div class="col-sm-12 col-md-4 col-lg-3">Columna responsiva</div>
    <div class="col-sm-12 col-md-8 col-lg-9">Columna responsiva</div>
  </div>
</div>

Domina el Sistema de Grid

Guía completa para crear layouts complejos con el grid de Bootstrap.

Layouts Responsivos

Técnicas para crear diseños que se adapten a cualquier dispositivo.

Componentes

Bootstrap incluye una amplia variedad de componentes prediseñados que puedes utilizar para construir tu interfaz de usuario rápidamente.

Navegación

Las barras de navegación son uno de los componentes más utilizados en Bootstrap.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <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" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Características</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Precios</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Tarjetas

Las tarjetas son contenedores flexibles con múltiples variantes.

<div class="card" style="width: 18rem;">
  <img src="imagen.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Un texto de ejemplo rápido para colocar cerca del título de la tarjeta.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Formularios

Bootstrap facilita la creación de formularios estilizados y responsivos.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Correo electrónico</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">Nunca compartiremos tu correo 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" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Verificar</label>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Utilidades

Bootstrap proporciona numerosas clases de utilidad para estilizar elementos sin necesidad de escribir CSS personalizado.

Espaciado

Controla márgenes y padding con clases de utilidad.

<!-- Margen -->
<div class="mt-4">Margen superior 1.5rem</div>
<div class="mb-5">Margen inferior 3rem</div>
<div class="ms-3">Margen izquierdo 1rem</div>
<div class="me-2">Margen derecho 0.5rem</div>
<div class="mx-auto">Margen horizontal auto (centrado)</div>
<div class="my-4">Margen vertical 1.5rem</div>

<!-- Padding -->
<div class="p-3">Padding en todos los lados 1rem</div>
<div class="pt-4">Padding superior 1.5rem</div>
<div class="pb-5">Padding inferior 3rem</div>
<div class="ps-2">Padding izquierdo 0.5rem</div>
<div class="pe-3">Padding derecho 1rem</div>
<div class="px-4">Padding horizontal 1.5rem</div>
<div class="py-5">Padding vertical 3rem</div>

Colores

Bootstrap incluye un conjunto de colores predefinidos para texto, fondos y bordes.

<!-- Colores de texto -->
<p class="text-primary">Texto color primario</p>
<p class="text-secondary">Texto color secundario</p>
<p class="text-success">Texto color éxito</p>
<p class="text-danger">Texto color peligro</p>
<p class="text-warning">Texto color advertencia</p>
<p class="text-info">Texto color información</p>
<p class="text-light">Texto color claro</p>
<p class="text-dark">Texto color oscuro</p>

<!-- Colores de fondo -->
<div class="bg-primary text-white">Fondo primario</div>
<div class="bg-secondary text-white">Fondo secundario</div>
<div class="bg-success text-white">Fondo éxito</div>
<div class="bg-danger text-white">Fondo peligro</div>
<div class="bg-warning">Fondo advertencia</div>
<div class="bg-info">Fondo información</div>
<div class="bg-light">Fondo claro</div>
<div class="bg-dark text-white">Fondo oscuro</div>

Flexbox

Bootstrap proporciona clases para trabajar con Flexbox de manera sencilla.

<!-- Contenedor flex -->
<div class="d-flex">
  <div>Elemento flex 1</div>
  <div>Elemento flex 2</div>
  <div>Elemento flex 3</div>
</div>

<!-- Alineación -->
<div class="d-flex justify-content-center">Centrado horizontalmente</div>
<div class="d-flex justify-content-between">Espacio entre elementos</div>
<div class="d-flex justify-content-around">Espacio alrededor de elementos</div>
<div class="d-flex align-items-center">Centrado verticalmente</div>
<div class="d-flex flex-column">Dirección columna</div>
<div class="d-flex flex-row-reverse">Dirección fila invertida</div>

Personalización

Bootstrap permite personalizar su apariencia para adaptarse a tu marca o diseño específico.

Variables Sass

Puedes personalizar Bootstrap modificando sus variables Sass.

// Archivo custom.scss
$primary: #8a2be2;    // Violeta
$secondary: #6c757d;  // Gris
$success: #28a745;    // Verde
$info: #17a2b8;       // Azul claro
$warning: #ffc107;    // Amarillo
$danger: #dc3545;     // Rojo
$light: #f8f9fa;      // Blanco grisáceo
$dark: #343a40;       // Negro grisáceo

// Personalizar espaciado
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4.5,
  7: $spacer * 6,
);

// Personalizar tipografía
$font-family-sans-serif: 'Roboto', sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;

// Importar Bootstrap después de las variables
@import "bootstrap/scss/bootstrap";

Temas

Puedes crear temas personalizados o utilizar temas prediseñados.

// Tema claro (por defecto)
<body>
  <!-- Contenido con tema claro -->
</body>

// Tema oscuro
<body class="bg-dark text-light">
  <!-- Contenido con tema oscuro -->
</body>

// Cambiar tema con JavaScript
document.body.classList.toggle('bg-dark');
document.body.classList.toggle('text-light');

Componentes Personalizados

Puedes extender los componentes de Bootstrap con tus propios estilos.

/* Personalizar botones */
.btn-custom {
  @extend .btn-primary;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Personalizar tarjetas */
.card-custom {
  @extend .card;
  border-radius: 15px;
  border: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
  }
}

Ejemplos Prácticos

Veamos algunos ejemplos prácticos de cómo utilizar Bootstrap para crear interfaces comunes.

Página de Inicio

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Sitio Web</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Navegación -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
      <a class="navbar-brand" href="#">Mi Sitio</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Inicio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Características</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Precios</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contacto</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <div class="bg-light py-5">
    <div class="container py-5">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <h1 class="display-4 fw-bold">Bienvenido a Mi Sitio</h1>
          <p class="lead">Una plataforma moderna para tus necesidades digitales.</p>
          <div class="d-grid gap-2 d-md-flex justify-content-md-start">
            <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Comenzar</button>
            <button type="button" class="btn btn-outline-secondary btn-lg px-4">Saber más</button>
          </div>
        </div>
        <div class="col-lg-6">
          <img src="https://via.placeholder.com/600x400" class="img-fluid rounded" alt="Hero image">
        </div>
      </div>
    </div>
  </div>

  <!-- Características -->
  <div class="container py-5">
    <h2 class="text-center mb-5">Nuestras Características</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Fácil de Usar</h5>
            <p class="card-text">Interfaz intuitiva diseñada para una experiencia de usuario óptima.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Responsivo</h5>
            <p class="card-text">Diseño adaptable a cualquier dispositivo, desde móviles hasta escritorio.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Personalizable</h5>
            <p class="card-text">Adapta la plataforma a tus necesidades específicas con facilidad.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="bg-dark text-white py-4">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <p>&copy; 2023 Mi Sitio. Todos los derechos reservados.</p>
        </div>
        <div class="col-md-6 text-md-end">
          <a href="#" class="text-white me-3">Términos</a>
          <a href="#" class="text-white me-3">Privacidad</a>
          <a href="#" class="text-white">Contacto</a>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Panel de Administración

Un ejemplo de panel de administración con Bootstrap.

<div class="container-fluid">
  <div class="row">
    <!-- Sidebar -->
    <div class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
      <div class="position-sticky pt-3">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#">
              Dashboard
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Pedidos
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Productos
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Clientes
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Informes
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              Configuración
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- Contenido principal -->
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">Compartir</button>
            <button type="button" class="btn btn-sm btn-outline-secondary">Exportar</button>
          </div>
          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
            Esta semana
          </button>
        </div>
      </div>

      <!-- Tarjetas de estadísticas -->
      <div class="row">
        <div class="col-md-4 mb-4">
          <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
              <div class="row no-gutters align-items-center">
                <div class="col mr-2">
                  <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                    Ganancias (Mensuales)</div>
                  <div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
                </div>
                <div class="col-auto">
                  <i class="fas fa-calendar fa-2x text-gray-300"></i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-4 mb-4">
          <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
              <div class="row no-gutters align-items-center">
                <div class="col mr-2">
                  <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                    Ganancias (Anuales)</div>
                  <div class="h5 mb-0 font-weight-bold text-gray-800">$215,000</div>
                </div>
                <div class="col-auto">
                  <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-4 mb-4">
          <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
              <div class="row no-gutters align-items-center">
                <div class="col mr-2">
                  <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Tareas
                  </div>
                  <div class="row no-gutters align-items-center">
                    <div class="col-auto">
                      <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">50%</div>
                    </div>
                    <div class="col">
                      <div class="progress progress-sm mr-2">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 50%"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-auto">
                  <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Tabla de datos -->
      <h2>Últimos pedidos</h2>
      <div class="table-responsive">
        <table class="table table-striped table-sm">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Cliente</th>
              <th scope="col">Producto</th>
              <th scope="col">Cantidad</th>
              <th scope="col">Precio</th>
              <th scope="col">Estado</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1001</td>
              <td>Juan Pérez</td>
              <td>Laptop Pro</td>
              <td>1</td>
              <td>$1,200</td>
              <td><span class="badge bg-success">Completado</span></td>
            </tr>
            <tr>
              <td>1002</td>
              <td>María López</td>
              <td>Smartphone X</td>
              <td>2</td>
              <td>$800</td>
              <td><span class="badge bg-warning">Pendiente</span></td>
            </tr>
            <tr>
              <td>1003</td>
              <td>Carlos Gómez</td>
              <td>Monitor 4K</td>
              <td>1</td>
              <td>$350</td>
              <td><span class="badge bg-info">En proceso</span></td>
            </tr>
            <tr>
              <td>1004</td>
              <td>Ana Martínez</td>
              <td>Teclado Mecánico</td>
              <td>1</td>
              <td>$120</td>
              <td><span class="badge bg-danger">Cancelado</span></td>
            </tr>
            <tr>
              <td>1005</td>
              <td>Roberto Sánchez</td>
              <td>Auriculares Bluetooth</td>
              <td>3</td>
              <td>$180</td>
              <td><span class="badge bg-success">Completado</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</div>