Primero, asegúrate de que el JavaScript de Bootstrap está incluido en tu proyecto. Si estás utilizando Bootstrap a través de un CDN, puedes incluir tanto jQuery como los archivos JavaScript de Bootstrap en el <head> de tu HTML, o justo antes de cerrar el <body>, para asegurar que la página se cargue correctamente.
<!-- Opción de CDN para Bootstrap JS con Popper.js incluido -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
Bootstrap ofrece varios componentes que utilizan JavaScript para agregar funcionalidades dinámicas. Aquí te muestro cómo implementar algunos de los más populares:
Los modales son ventanas dialogadas que aparecen en el frente de la página, útiles para registros, confirmaciones, o cualquier contenido que requiera atención inmediata.
<!-- Botón para abrir el modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Lanzar modal demo
</button>
<!-- Modal -->
<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="Cerrar"></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>
Los tooltips son pequeños mensajes que aparecen al pasar el cursor sobre un elemento, ideales para proporcionar información adicional de manera discreta.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip en la parte superior">
Pasar el cursor para mostrar el tooltip
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
El carrusel es un componente deslizante que puedes usar para mostrar imágenes, textos o contenido interactivo, ideal para galerías o diapositivas de contenido.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img decoding="async" src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img decoding="async" src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img decoding="async" src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Muchos componentes de Bootstrap funcionan automáticamente gracias al atributo data-bs-*, pero algunos, como los tooltips y popovers, requieren inicialización con JavaScript para funcionar correctamente. Aquí te mostré cómo activar los tooltips. Para otros componentes, revisa la documentación de Bootstrap para obtener instrucciones específicas sobre cómo activarlos.
