El mejor tutorial de Fundación Equalizer (Ecualizador) en 2024. En este tutorial podrás aprender
Ecualizador diferentes pantallas,contenido anidado,
Fundación Equalizer (Ecualizador)
Podemos añadir un elemento contenedor data-equalizer
propiedad, y añadir a cada sub-elemento data-equalizer-watch
propiedad para crear un ecualizador idéntica altura. El elemento más alto determina la altura de los otros elementos.
Nota: El regulador requiere JavaScript. Por lo que necesita para inicializar JS OUNDATION:
Ejemplos
<class = datos Div "fila" -equalizer>
< "Medio-4 div class = panel de columnas"-ecualizador de reloj de datos>
Vestibulum es.
</ Div>
< "Medio-4 div class = panel de columnas"-ecualizador de reloj de datos>
Sed ut es.
</ Div>
< "Medio-4 div class = panel de columnas"-ecualizador de reloj de datos>
Vestibulum es.
</ Div>
</ Div>
<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »
Ecualizador diferentes pantallas
El ecualizador añadiendo data-equalizer-mq=" value "
mq conjunto de atributos a la misma altura para diferentes tamaños de pantalla. El valor puede ser una de las siguientes:
valor | descripción | Ejemplos |
---|
medium-up | Predeterminado. Crear la misma altura del contenedor, anchura mayor que 40.063em | |
large-up | Crear la misma altura del contenedor, anchura mayor que 64.063em | probar |
xlarge-up | Crear la misma altura del contenedor, anchura mayor que 90.063em | probar |
xxlarge-up | Crear la misma altura del contenedor, anchura mayor que 120.063em | probar |
contenido anidado
La data-equalizer
y data-equalizer-watch
se suman el mismo valor de la propiedad. Este puede ser conectado junto al contenedor de ecualizador. Anidado en repetidas ocasiones ecualizador, asegúrese de que son un partido:
Ejemplos
<! - The Container Equalized ->
<class = datos Div "fila" -equalizer = "primera">
<div class = "medio-4 columnas">
<Div class = datos "panel" -equalizer-reloj = "primeros">
<H3> Panel </ h3>
<! - Una Equalized contenedor en el Equalized Container ->
<class = datos Div "fila" -equalizer = "segundo">
<Div class = datos "panel" -equalizer-reloj = "segundas">
<H3> Panel de anidado </ h3 >
<P> Vestibulum es. </ p>
</ Div>
<Div class = datos "panel" -equalizer-reloj = "segundas">
<H3> Panel de anidado </ h3 >
<P> Vestibulum es. </ p>
</ Div>
<Div class = datos "panel" -equalizer-reloj = "segundas">
<H3> Panel de anidado </ h3 >
<P> Vestibulum es. </ p>
</ Div>
</ Div>
<! - Anidado final Equalized Container - >
</ Div>
</ Div>
<div class = "medio-4 columnas">
<Div class = datos "panel" -equalizer-reloj = "primeros">
<H3> Panel </ h3>
<P> Ut enim es. </ p>
</ Div>
</ Div>
<div class = "medio-4 columnas">
<Div class = datos "panel" -equalizer-reloj = "primeros">
<H3> Panel </ h3>
<P> Vestibulum eses </ p>
</ Div>
</ Div>
</ Div>
Trate »