En esta ocasión veremos como crear grids con Jquery Mobile, con este componente se pueden crear bloques horizontales que se adaptan perfectamente
a la resolución de cualquier dispositivo, se maneja a través de clases como veremos a continuación ...
La clase principal ui-grid-[letra de la "a" a la "e"]. Cada una de las letras indica el nivel de comprimido para el Grid, cuanto mayor es la letra
más se comprimen los bloques del grid.
Otra clase es ui-block-[aumentar la letra por cada nuevo bloque]. Para poder formar el grid horizontalmente esta clase es fundamental, de lo
contrario se posicionarán verticalmente.
Y la otra clase es ui-bar-[letra para aplicar el estilo]. Esta letra determina el estilo del bloque, es como data-theme en el cual indicas la letra
que aplicará el estilo.
<div class="ui-grid-b"> <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:30px">Bloque 1</div></div> <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:30px">Bloque 2</div></div> <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:30px">Bloque 3</div></div> </div>
No hay comentarios:
Publicar un comentario