Tema 15 · Pestañas y Navs

Navegación por Pestañas (Navs & Tabs)

Aprende a maquetar sistemas de navegación por pestañas con .nav-tabs, pastillas con .nav-pills y a conmutar paneles de contenido sin recargar la página mediante data-bs-toggle="tab".

Grupos de Listas (List Groups) y Paginación Barras de Navegación Profesionales (Navbar)

Estilos de Navegación: .nav-tabs vs .nav-pills

La familia de clases .nav sirve para organizar menús de navegación horizontales o verticales. Puedes elegir entre el clásico estilo de fichas de archivador (.nav-tabs) o botones con forma de cápsula (.nav-pills). 

<!-- Menú de pastillas -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <button class="nav-link active">Perfil</button>
  </li>
  <li class="nav-item">
    <button class="nav-link">Configuración</button>
  </li>
</ul>

Paneles Dinámicos con Atributos de Datos (Tabs Dinámicos)

Para alternar entre diferentes secciones de contenido al hacer clic sin recargar la página ni escribir JavaScript manual, enlazamos los botones con contenedores .tab-pane mediante data-bs-toggle="tab" y data-bs-target: 

<!-- Botón de la pestaña -->
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#panel-1">Pestaña 1</button>

<!-- Contenedor de paneles -->
<div class="tab-content pt-3">
  <div class="tab-pane fade show active" id="panel-1">Contenido 1</div>
  <div class="tab-pane fade" id="panel-2">Contenido 2</div>
</div>

⚡ Pestañas Dinámicas Interactivas con Bootstrap 5

Haz clic en las pestañas "HTML", "CSS" y "JavaScript" para alternar el contenido de los paneles al instante:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navs y Tabs en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 680px;">
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white">
      <h4 class="fw-bold text-dark mb-3">Plan de Estudio Dinámico</h4>

      <!-- Navegación por pestañas .nav-tabs -->
      <ul class="nav nav-tabs" id="miTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active fw-semibold" id="html-tab" data-bs-toggle="tab" data-bs-target="#html-panel" type="button" role="tab">
            HTML5
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link fw-semibold" id="css-tab" data-bs-toggle="tab" data-bs-target="#css-panel" type="button" role="tab">
            CSS3 &amp; Grid
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link fw-semibold" id="js-tab" data-bs-toggle="tab" data-bs-target="#js-panel" type="button" role="tab">
            JavaScript ES6+
          </button>
        </li>
      </ul>

      <!-- Paneles de contenido .tab-content -->
      <div class="tab-content pt-4" id="miTabContent">
        <!-- Panel HTML -->
        <div class="tab-pane fade show active" id="html-panel" role="tabpanel">
          <h5 class="fw-bold text-primary">Arquitectura y Estructura Semántica</h5>
          <p class="text-secondary">
            HTML5 define el significado y esqueleto de cada documento web con etiquetas como <code>&lt;header&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;article&gt;</code> y formularios nativos.
          </p>
        </div>

        <!-- Panel CSS -->
        <div class="tab-pane fade" id="css-panel" role="tabpanel">
          <h5 class="fw-bold text-info">Diseño Visual y Layout Bidimensional</h5>
          <p class="text-secondary">
            CSS3 controla la presentación, colores, tipografía, Flexbox, cuadrículas con CSS Grid y animaciones aceleradas por GPU a 60 FPS.
          </p>
        </div>

        <!-- Panel JavaScript -->
        <div class="tab-pane fade" id="js-panel" role="tabpanel">
          <h5 class="fw-bold text-warning">Lógica, Eventos y Asincronía</h5>
          <p class="text-secondary">
            JavaScript ES6+ permite manipular el árbol del DOM en tiempo real, capturar eventos de usuario y consumir servicios REST con <code>async/await</code> y <code>fetch()</code>.
          </p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.