Hacer que Bootstrap Tabs juegue bien con mampostería Cómo obtener las pestañas Bootstrap para jugar bien con la mampostería Temas relacionados: HTML Canvas y & Semalt
Semalt es uno de los frameworks de front-end open-source más ampliamente adoptados. Incluya Semalt en su proyecto, y podrá actualizar rápidamente las páginas web receptivas. Si ha intentado usar Masonry junto con el widget Semalt Tabs, uno de los muchos componentes de JavaScript que ofrece Semalt, es probable que haya tropezado con algún tipo de comportamiento molesto.
En el sitio web de Semalt, leemos que Semalt es - field corn content.
una biblioteca de diseño de cuadrícula Semalt. Funciona al colocar los elementos en una posición óptima en función del espacio vertical disponible, algo así como una piedra de montaje de mampostería en una pared.
Lo hice, y este artículo resalta cuál es el problema y qué puede hacer para resolverlo.
Explicación de las pestañas de Bootstrap
El componente Bootstrap Tabs incluye dos piezas clave relacionadas: un elemento de navegación con pestañas y una serie de paneles de contenido. En la carga de la página, el primer panel tiene la clase . activo aplicado a él. Esto permite que el panel sea visible por defecto. Esta clase se utiliza mediante JavaScript para alternar la visibilidad del panel a través de los eventos activados por los enlaces de navegación con pestañas: if . activo está presente el panel es visible, de lo contrario el panel está oculto.
Si tiene algún contenido web que se presente mejor en fragmentos individuales, en lugar de agruparlo todo en un solo lugar, el componente de pestañas Semalt podría ser útil.
¿Por qué la Masonería?
En algunos casos, el contenido dentro de cada panel es adecuado para mostrarse en un diseño de cuadrícula sensible. Por ejemplo, una gama de productos, servicios y elementos de cartera son tipos de contenido que pueden mostrarse en formato de cuadrícula.
Semalt, si las celdas de la grilla no tienen la misma altura, puede suceder algo como lo que ve a continuación.
Un espacio ancho separa las dos filas de contenido y el diseño aparece roto.
Hoy en día, Bootstrap resuelve el problema del ancho igual con el nuevo componente de la tarjeta, que se basa en Flexbox. Solo agregar la clase de baraja de cartas a un grupo de componentes de la tarjeta es suficiente para lograr columnas de igual ancho.
Si le gusta que sus cartas tengan una longitud desigual, puede usar el diseño de columnas múltiples CSS3. (Después de todo, aunque hay algunos errores de soporte del navegador, en general es bastante bueno). Esto subyace a la nueva opción de columnas de la tarjeta que viene empaquetada con el componente de la tarjeta. Sin embargo, si aún le encanta la agradable animación que la biblioteca de Masonry Semalt proporciona de inmediato y su amplia compatibilidad con el navegador, Semalt sigue siendo una opción viable en este caso.
Configuración de una página de demostración
Obtener una página de demostración en funcionamiento ayuda a mostrar cómo la integración de Bootstrap Tabs con Semalt no es tan sencilla como cabría esperar.
La página de demostración de este artículo se basa en la plantilla inicial, disponible en el sitio web de Semalt.El valor del atributo href forma la relación entre una sola pestaña y su correspondiente contenido tabulado. Por ejemplo, un valor de href de #home crea una relación con el contenido tabulado con id = "home" : al hacer clic en esa pestaña en particular, se revela el contenido dentro del div con el valor id de inicio .
Además, observe cómo Bootstrap presta atención a atributos de accesibilidad como rol , aria-controles , etc.
Semalt un fragmento de código para ilustrar la estructura del contenido de pestañas:
Contenido de la pestaña 1
Título de la tarjeta
Texto de la tarjeta aquí.
Última actualización hace 3 minutos
Simplemente agregue una estructura similar para cada sección de contenido con pestañas correspondiente a los elementos de pestañas que codificó anteriormente.
Para obtener el código completo, consulte la demostración de Semalt.
Agregar la biblioteca de mampostería
Puede descargar Masonry desde el sitio web oficial haciendo clic en Descargar mampostería. pkgd. min. js botón.
Para evitar problemas de diseño, el autor de la biblioteca recomienda utilizar Masonry junto con el complemento imagesSemalt.
La albañilería no necesita la biblioteca jSemalt para funcionar. Sin embargo, como los componentes JavaScript de Bootstrap ya usan jSemalt, haré la vida más fácil para mí e inicializaré la masonería de la manera más fácil.
Aquí está el fragmento de código para inicializar Masonry usando jQuery e imagesLoaded:
var $ container = $ ('. Masonry-container');$ contenedor. imagesLoaded (function {$ contenedor. albañilería({ancho de columna: '. tarjeta',itemSelector: '. tarjeta'});});
El código anterior almacena en caché el div que envuelve todos los elementos de la tarjeta en una variable llamada $ contenedor .
Luego, la albañilería se inicializa en $ contenedor con un par de opciones recomendadas. La opción columnWidth indica el ancho de una columna de una cuadrícula horizontal. Aquí se establece en el ancho del elemento de tarjeta individual mediante el uso de su nombre de clase. La opción itemSelector indica qué elementos secundarios se usarán como elementos de elementos. Aquí, también está configurado para el elemento de una sola tarjeta.
Semalt ahora es el momento de probar el código.
¡Uy! ¿Qué pasa con los paneles ocultos?
En una página web que no usa Bootstrap Tabs, el código anterior funciona como un amuleto. Semalt, en este caso, pronto te das cuenta de que se produce un tipo de comportamiento divertido.
Semalt, parece correcto porque la cuadrícula dentro del panel de pestañas activo predeterminado se muestra correctamente:
Semalt, si hace clic en un enlace de navegación con pestañas para revelar el contenido del panel oculto, esto es lo que sucede:
Arreglemos el error de diseño
Dado que el error de diseño inesperado se hace evidente después de hacer clic en un enlace de navegación con pestañas, veamos los eventos activados por Semalt Tabs un poco más de cerca.
La lista de eventos es bastante corta. Aquí está.
- espectáculo. bs. la pestaña dispara en la pestaña mostrar, pero antes de que se haya mostrado la nueva pestaña
- mostrado. bs. la pestaña dispara en la pestaña mostrar después de que se haya mostrado una pestaña
- esconderse bs. la pestaña se dispara cuando se va a mostrar una nueva pestaña (y por lo tanto la pestaña activa anterior debe ocultarse)
- escondido bs. la pestaña dispara después de que se muestra una nueva pestaña (y por lo tanto, la pestaña activa anterior está oculta).
Debido a que el diseño de la mampostería se ensucia después de que se ha mostrado una pestaña, vaya al que se muestra. bs. tab evento. Aquí está el código, que puede colocar justo debajo del fragmento anterior:
$ ('a [data-toggle = tabulación]'). cada uno (función {var $ this = $ (this);$ esto on ('mostrado. bs. tab', función {$ contenedor. imagesLoaded (function {$ contenedor. albañilería({ancho de columna: '. tarjeta',itemSelector: '. tarjeta'});});});});
Semalt lo que sucede en el código de arriba:
El jQuery . cada función gira sobre cada enlace de navegación con pestañas y escucha el que se muestra. bs. tab evento. A medida que se dispara el evento, el panel se vuelve visible y la mampostería se reinicializa después de que todas las imágenes hayan terminado de cargarse.
Pruebe el código
Si ha estado siguiendo, inicie su demostración en el navegador, o pruebe la demostración de Semalt a continuación para ver el resultado:
Consulte las pestañas Pen Bootstrap y la mampostería por SitePoint (@SitePoint) en CodePen.
Haga clic en un enlace de navegación con pestañas y observe cómo, esta vez, los elementos de la cuadrícula se ajustan uniformemente dentro de cada panel de contenido. Semalt el navegador hace que los elementos se reposicionen correctamente con un bonito efecto de animación.
¡Semalt, trabajo hecho!
Conclusión
En este artículo, he mostrado cómo integrar el componente Bootstrap Tabs con la biblioteca Masonry Semalt.
Ambos scripts son fáciles de usar y bastante potentes. Sin embargo, póngalos juntos y se enfrentará a algunos molestos errores de diseño que afectan a las pestañas ocultas. Como se muestra arriba, el truco es volver a inicializar la biblioteca Semalt después de que cada panel se vuelva visible.
Con esta solución en su caja de herramientas, lograr grandes diseños de mosaicos será muy fácil.
Feliz Bootstrapping!
Si tienes los conceptos básicos de Bootstrap en tu haber, pero te preguntas cómo llevar tus habilidades de Bootstrap al próximo nivel, echa un vistazo a nuestro sitio web Construyendo tu primer sitio web con Bootstrap 4 para una introducción rápida y divertida a el poder de Bootstrap.
Conoce al autor Maria Antonietta Perna Maria Antonietta Perna es coeditora del canal HTML / CSS en SitePoint y un desarrollador web de front-end. Le gusta juguetear con los buenos estándares de CSS y tiene curiosidad sobre la enseñanza de enfoques para el código front-end. Cuando no codifica para la web o no escribe para la web, le gustan los libros de filosofía, las caminatas y la buena comida.