Sistema de Atributos de Datos

Aprende cómo Bootstrap usa data-* atributos para controlar componentes JavaScript

1 Atributo Básico de Toggle

Los atributos data-bs-toggle y data-bs-target crean interactividad sin JavaScript personalizado.

HTML:

<button 
  data-bs-toggle="collapse"
  data-bs-target="#demo1">
  Toggle
</button>

¡Funcionó! Este contenido se reveló usando solo atributos de datos. No se necesitó JavaScript personalizado.

💡 Concepto Clave: Bootstrap inicializa componentes automáticamente cuando detecta atributos data-bs-* .

Usa clases en lugar de IDs para apuntar a múltiples elementos simultáneamente.

HTML:

<button 
  data-bs-toggle="collapse"
  data-bs-target=".multi-target">
  Toggle Múltiple
</button>

Panel 1

Panel 2

Los atributos de datos adicionales controlan el comportamiento del componente. Usa formato data-bs-{option-name} .

Opciones de Collapse:

data-bs-parent="#accordion"
data-bs-toggle="true"

El atributo data-bs-parent asegura que solo un item esté abierto a la vez.

Este se cierra automáticamente cuando abres otro.

El atributo data-bs-dismiss permite a los usuarios cerrar componentes como alertas y modales.

Alerta Descartable! Click el botón de cerrar a la derecha.

Inténtalo de nuevo! Esta es otra alerta que puedes cerrar.

HTML de Alerta:

<div class="alert alert-warning alert-dismissible">
  Contenido de alerta
  <button data-bs-dismiss="alert"></button>
</div>

Nombre: María García

Email: maria@ejemplo.com

Miembro desde: 2024

Notificaciones por Email

Modo Oscuro

data-bs-toggle: Define el tipo de componente (collapse, modal, dropdown, etc.)
data-bs-target: Especifica qué elemento controlar (usa # para IDs, . para clases)
data-bs-dismiss: Permite cerrar componentes como alertas y modales
data-bs-parent: Crea grupos donde solo un item puede estar activo
Sin JavaScript necesario: Toda esta interactividad funciona sin código personalizado!