Bootstrap Library
Proporciona integración del framework CSS Bootstrap para sitios Drupal registrando Bootstrap como una biblioteca que puede cargarse desde archivos locales o CDN.
bootstrap_library
Instalar
composer require 'drupal/bootstrap_library:^2.0'
Overview
Bootstrap Library es un módulo que integra el popular framework CSS Bootstrap en sitios Drupal. Permite a los constructores de sitios añadir fácilmente el sistema de cuadrícula responsiva, componentes y plugins JavaScript de Bootstrap a sus temas Drupal sin necesidad de configurar manualmente las definiciones de bibliotecas.
El módulo ofrece opciones de carga flexibles: puede elegir cargar Bootstrap desde una Red de Distribución de Contenido (CDN) con soporte para múltiples versiones de Bootstrap (desde 2.x hasta 5.x), o desde archivos instalados localmente. Para instalaciones locales, puede elegir entre archivos de desarrollo (fuente) para depuración o archivos minificados para producción, así como paquetes instalados mediante Composer.
Además, el módulo ofrece controles de visibilidad granulares que permiten habilitar o deshabilitar la carga de Bootstrap en temas específicos o rutas URL. Esto es particularmente útil cuando Bootstrap solo debe cargarse en el frontend pero no en áreas de administración, o cuando se utilizan temas que ya incluyen Bootstrap.
Features
- Cargar el framework CSS y JavaScript de Bootstrap desde archivos locales o CDN
- Soporte para múltiples versiones de Bootstrap incluyendo las series 2.x, 3.x, 4.x y 5.x
- Elegir entre variantes de biblioteca minificadas (producción), fuente (desarrollo) o instaladas mediante Composer
- Control de visibilidad basado en temas para cargar Bootstrap solo en temas específicos
- Control de visibilidad basado en rutas URL para excluir o incluir páginas específicas
- Opción para cargar selectivamente solo archivos CSS o solo archivos JavaScript
- Deshabilitar dinámicamente Bootstrap mediante parámetro URL (?bootstrap=no)
Use Cases
Añadir Bootstrap a un tema personalizado
Si tiene un tema Drupal personalizado que no incluye Bootstrap, puede usar este módulo para añadir la funcionalidad de Bootstrap. Instale el módulo, descargue Bootstrap en /libraries/bootstrap y configure el módulo para cargar solo en su tema personalizado. Esto le da acceso al sistema de cuadrícula, componentes y plugins JavaScript de Bootstrap.
Cargar Bootstrap desde CDN para rendimiento
Para sitios que quieren aprovechar los beneficios del caché CDN, configure el módulo para cargar Bootstrap desde un CDN. Seleccione su versión preferida de Bootstrap del desplegable, y el módulo cargará automáticamente el CSS y JavaScript desde el CDN apropiado (jsDelivr para Bootstrap 5.x, StackPath para Bootstrap 4.x, o MaxCDN para Bootstrap 3.x y 2.x).
Excluir Bootstrap de las páginas de administración
Cuando usa un tema de administración que tiene sus propios estilos (como Claro o Gin), puede querer excluir Bootstrap de las páginas de administración para evitar conflictos. Use los ajustes de visibilidad de URL para excluir rutas como 'admin*', 'node/add/*' y 'node/*/edit' de la carga de Bootstrap. La configuración predeterminada ya incluye estas exclusiones.
Carga de Bootstrap específica por tema
En un sitio con múltiples temas (por ejemplo, diferentes temas para diferentes secciones), configure Bootstrap para cargar solo en temas específicos. Use el ajuste de visibilidad de temas para especificar exactamente qué temas deben tener Bootstrap adjunto, previniendo conflictos con temas que incluyen su propia versión de Bootstrap.
Desarrollo y depuración
Durante el desarrollo, cambie a la versión no minificada (fuente) de los archivos Bootstrap para facilitar la depuración. Los archivos sin comprimir hacen más fácil rastrear problemas en las herramientas de desarrollo del navegador. Vuelva a los archivos minificados para producción.
Tips
- Use el parámetro URL ?bootstrap=no para deshabilitar temporalmente Bootstrap en cualquier página para depuración
- El módulo depende de jQuery (core/jquery) que se carga automáticamente con la biblioteca Bootstrap
- Para Bootstrap 5.x vía CDN, el módulo también carga la biblioteca Popper.js requerida para desplegables y tooltips
- Cuando use el método de instalación Composer, asegúrese de que el paquete twbs/bootstrap esté instalado mediante composer require twbs/bootstrap
- La configuración predeterminada excluye rutas comunes de administración y AJAX de la carga de Bootstrap para prevenir conflictos
Technical Details
Admin Pages 1
/admin/config/development/bootstrap_library
Configurar cómo se carga el framework Bootstrap en su sitio, incluyendo la fuente (CDN o local), versión y ajustes de visibilidad para temas y rutas URL.
Hooks 2
hook_page_attachments
Adjunta las bibliotecas CSS y JavaScript de Bootstrap a las páginas según los ajustes de configuración. Verifica las reglas de visibilidad de temas y URLs antes de adjuntar.
hook_library_info_build
Construye dinámicamente la definición de la biblioteca bootstrap-cdn basándose en la versión CDN seleccionada en la configuración.
Troubleshooting 5
Verifique que los archivos de Bootstrap estén correctamente instalados en el directorio /libraries/bootstrap. Compruebe que los ajustes de visibilidad de temas y URLs del módulo no estén excluyendo su tema o página actual. Limpie el caché de Drupal después de hacer cambios de configuración.
Vaya a la página de configuración de Bootstrap Library y asegúrese de que las rutas de administración estén listadas en la sección de visibilidad de URL con 'Todas las páginas excepto las listadas' seleccionado. Las exclusiones predeterminadas incluyen admin*, node/add/* y node/*/edit.
Verifique que su servidor pueda acceder a URLs de CDN externos. Compruebe las cabeceras de Política de Seguridad de Contenido (CSP) que podrían bloquear recursos externos. Considere cambiar a carga local si el CDN está bloqueado.
Use los ajustes de visibilidad de temas para excluir el tema basado en Bootstrap de la carga del módulo. Seleccione 'Todos los temas excepto los listados' y añada el tema Bootstrap a la lista.
Añada ?bootstrap=no a cualquier URL para deshabilitar temporalmente la carga de Bootstrap en esa página. Esto es útil para depurar conflictos de estilos.