Views Bootstrap
Proporciona estilos de componentes Bootstrap 5 para Drupal Views, permitiendo mostrar los resultados de las vistas como acordeones, tarjetas, carruseles, cuadrículas, pestañas, tablas y otros componentes de interfaz Bootstrap.
views_bootstrap
Install
composer require 'drupal/views_bootstrap:^5.3'
Overview
El módulo Views Bootstrap integra los componentes de Bootstrap 5 con Drupal Views, permitiendo a los constructores de sitios mostrar los resultados de las vistas usando patrones de interfaz Bootstrap comunes sin escribir código personalizado. Este módulo extiende Views con plugins de estilo adicionales que renderizan contenido usando los componentes del framework CSS de Bootstrap.
En lugar de mostrar los resultados de las vistas como simples listas o tablas, este módulo te permite presentar contenido como acordeones interactivos, diseños de tarjetas responsivos, carruseles/presentaciones de imágenes, menús desplegables, cuadrículas responsivas, grupos de listas, objetos multimedia con imágenes y texto, interfaces con pestañas, y tablas estilizadas con las clases de tabla de Bootstrap.
Cada plugin de estilo proporciona un formulario de configuración dentro de la interfaz de Views donde puedes mapear campos de la vista a partes del componente (como títulos de tarjetas, imágenes del carrusel, encabezados del acordeón) y personalizar el comportamiento del componente (efectos de animación, puntos de interrupción responsivos, opciones de estilo). El módulo genera el marcado apropiado de Bootstrap 5 con las clases CSS y atributos de datos adecuados para la funcionalidad JavaScript.
El módulo soporta el sistema de puntos de interrupción responsivos de Bootstrap 5 (xs, sm, md, lg, xl, xxl) para diseños de cuadrícula, proporciona características de accesibilidad a través de atributos ARIA apropiados, e incluye protección XSS para contenido generado por usuarios.
Features
- Plugin de estilo Bootstrap Accordion - Muestra los resultados de la vista como paneles de acordeón colapsables con estados abierto/cerrado configurables, opción de bordes sin márgenes, y soporte para agrupar contenido por valores de campo
- Plugin de estilo Bootstrap Cards - Renderiza contenido en componentes de tarjeta Bootstrap con imágenes opcionales, títulos y contenido del cuerpo, soportando tanto diseños card-group como basados en cuadrícula con columnas configurables por fila
- Plugin de estilo Bootstrap Carousel - Crea presentaciones de imágenes con controles de navegación, indicadores, opciones de reproducción automática, efectos de desvanecimiento/deslizamiento, pausa al pasar el cursor, soporte multicolumna y subtítulos responsivos
- Plugin de estilo Bootstrap Dropdown - Muestra los resultados de la vista en un menú desplegable con texto de botón personalizable, estilo de botón (primary, secondary, success, warning, danger, etc.), y roles de menú ARIA apropiados
- Plugin de estilo Bootstrap Grid - Muestra contenido en el sistema de cuadrícula responsivo de Bootstrap con configuración de ancho de columna por punto de interrupción (xs a xxl), soportando anchos iguales, ajuste automático o conteos de columnas específicos
- Plugin de estilo Bootstrap List Group - Renderiza contenido como un grupo de lista Bootstrap con títulos de elementos opcionales y clases CSS personalizadas
- Plugin de estilo Bootstrap Media Object - Muestra contenido con una imagen junto al encabezado y texto del cuerpo, con ubicación de imagen configurable (izquierda/derecha) y alineación vertical (arriba/medio/abajo)
- Plugin de estilo Bootstrap Tabs - Crea interfaces con pestañas con navegación de pestañas o píldoras, múltiples opciones de posición (arriba, izquierda, derecha, abajo, justificado, apilado), efectos de desvanecimiento, y soporte para agrupar contenido en pestañas
- Plugin de estilo Bootstrap Table - Extiende la tabla principal de Views con clases de tabla Bootstrap incluyendo envoltorio responsivo, con bordes/sin bordes, condensada, con hover y estilos de filas rayadas
- Sistema de sugerencias de tema para anulaciones de plantillas por vista y por display (ej., views_bootstrap_accordion__my_view__block_1.html.twig)
- Migración automática desde versiones anteriores del módulo incluyendo conversiones de thumbnail-a-cards y panel-a-cards
Use Cases
Galería de imágenes con carrusel
Crea una vista de galería de imágenes mostrando imágenes de contenido como un carrusel Bootstrap. Configura la vista para usar el estilo Bootstrap Carousel, mapea el campo de imagen a la imagen del carrusel, opcionalmente añade subtítulos de título y descripción. Habilita los controles de navegación e indicadores para la interacción del usuario. Establece el intervalo de reproducción automática o desactívalo para navegación manual.
Miembros del equipo en diseño de tarjetas
Muestra perfiles de miembros del equipo como tarjetas Bootstrap en una cuadrícula responsiva. Crea una vista de usuarios o contenido de equipo, selecciona el estilo Bootstrap Cards, mapea la foto de perfil a la imagen de la tarjeta, el nombre al título de la tarjeta, y la biografía al contenido de la tarjeta. Establece las columnas en 3 o 4 para un diseño de cuadrícula que se apila en móvil.
Sección de preguntas frecuentes con acordeón
Construye una página de preguntas frecuentes usando el estilo acordeón. Crea una vista del tipo de contenido FAQ, selecciona el estilo Bootstrap Accordion, mapea el campo de pregunta al título del panel. Establece el comportamiento a 'Todos los elementos cerrados' para que los usuarios expandan solo lo que necesitan. Habilita los bordes sin márgenes para una integración perfecta con el diseño de la página.
Navegación por categorías con pestañas
Crea navegación con pestañas para contenido categorizado. Usa el estilo Bootstrap Tabs con el campo de categoría/taxonomía como campo de pestaña. Establece tab_output a 'agrupado' para agregar todo el contenido bajo cada pestaña de categoría. Elige el estilo de píldoras y posición vertical izquierda para navegación en barra lateral.
Tabla de datos responsiva
Muestra datos estructurados en una tabla ordenable y responsiva. Usa el estilo Bootstrap Table con responsivo habilitado. Selecciona 'Hasta pantallas medianas' para responsive_size para habilitar el desplazamiento horizontal en tabletas y teléfonos. Añade estilos rayados y hover para mejor legibilidad.
Elementos de noticias como objetos multimedia
Muestra avances de noticias con imágenes en miniatura usando el diseño de objeto multimedia. Configura el estilo Bootstrap Media Object con la imagen destacada como campo de imagen, el titular como encabezado, y el resumen como cuerpo. Establece la ubicación de la imagen a la izquierda para un diseño de noticias tradicional.
Cuadrícula de productos con columnas responsivas
Crea un listado de productos con anchos de columna responsivos. Usa el estilo Bootstrap Grid, configura col_sm a 2 columnas (ancho 6), col_md a 3 columnas (ancho 4), y col_lg a 4 columnas (ancho 3). Los productos se muestran en columnas óptimas en cada tamaño de pantalla.
Menú desplegable de acciones
Construye un desplegable de acciones rápidas para interfaces administrativas. Crea una vista de enlaces de acción, usa el estilo Bootstrap Dropdown, establece el texto del botón a 'Acciones' con estilo btn-primary. Cada resultado de la vista se convierte en un elemento del menú desplegable.
Tips
- Tu tema debe incluir CSS y JavaScript de Bootstrap 5 - el módulo genera el marcado Bootstrap pero no incluye la librería Bootstrap en sí misma
- Usa las sugerencias de tema para personalización de plantillas por vista: copia la plantilla base y renómbrala a views-bootstrap-[estilo]--[view-id]--[display-id].html.twig
- Para acordeones y pestañas, el modo de salida 'agrupado' requiere establecer un campo de agrupación en los ajustes de Formato de Views para agregar contenido
- Los diseños de tarjetas funcionan mejor con proporciones de imagen consistentes - usa estilos de imagen para aplicar dimensiones
- Habilita la librería JavaScript del carrusel adjuntada automáticamente mediante {{ attach_library('views_bootstrap/components') }} en la plantilla del carrusel
- Los carruseles multicolumna requieren elementos divisibles por el número de columnas para una visualización correcta
- El estilo de tabla hereda todas las opciones del estilo de tabla del núcleo de Drupal, añadiendo mejoras específicas de Bootstrap
- Las clases CSS personalizadas pueden añadirse a la mayoría de los componentes a través de las opciones row_class y clases personalizadas
Technical Details
Hooks 1
hook_theme_suggestions_HOOK_alter
Añade sugerencias de plantilla específicas por vista y por display para todas las plantillas de Views Bootstrap, habilitando anulaciones de plantilla por vista
Troubleshooting 7
Asegúrate de que tu tema cargue las librerías CSS y JavaScript de Bootstrap 5. El módulo genera el marcado Bootstrap pero no incluye Bootstrap en sí mismo. Verifica que bootstrap.bundle.min.js esté cargado para componentes interactivos como acordeones, carruseles y pestañas.
Bootstrap 5 requiere atributos data-bs-* (no data-*). Verifica que estés usando Bootstrap 5, no Bootstrap 4. Limpia las cachés después de actualizar. Revisa la consola del navegador para errores de JavaScript.
El JavaScript del módulo oculta los controles cuando solo existe un elemento. Asegúrate de que tu vista devuelva múltiples resultados. Verifica que las opciones de navegación e indicadores estén habilitadas en los ajustes de estilo.
Cuando no se usa el modo card-group, las tarjetas usan el sistema de cuadrícula de Bootstrap. Asegúrate de que el contenedor de tu tema tenga la estructura de cuadrícula Bootstrap apropiada. Verifica que el ajuste de columnas coincida con tus expectativas.
Los ajustes de columna se heredan de puntos de interrupción más pequeños. Si col_sm está establecido pero col_md es 'none', las pantallas medianas usan el ajuste pequeño. Establece valores explícitos en cada punto de interrupción donde quieras un comportamiento diferente.
Cuando se usa el modo de salida 'agrupado', asegúrate de que tu vista devuelva todos los resultados esperados (revisa los ajustes del paginador). La agrupación ocurre en los resultados renderizados, no a nivel de base de datos.
Las sugerencias de plantilla siguen el patrón: views_bootstrap_[estilo]__[view_id]__[display_id]. Asegúrate de que el nombre del archivo coincida exactamente con dobles guiones bajos. Limpia la caché del registro de temas.
Security Notes 4
- El módulo aplica filtrado XSS al contenido generado por usuarios en títulos de acordeones y pestañas usando Xss::filter() de Drupal con un conjunto limitado de etiquetas HTML permitidas
- Las plantillas de desplegables usan el filtro striptags para prevenir XSS en elementos del menú mientras preservan enlaces e imágenes
- Las clases CSS personalizadas se sanitizan usando Html::cleanCssIdentifier() para prevenir inyección CSS
- Todos los atributos HTML se manejan a través de la clase Attribute de Drupal para un escape apropiado