jQuery Mobile Disposición Grids
jQuery Mobile proporciona un conjunto de disposiciones de columnas basadas en CSS. Sin embargo, las disposiciones de columnas no se recomiendan generalmente en un dispositivo móvil, debido a la anchura de la pantalla del móvil.
Pero hay veces que desee colocar los elementos más pequeños, como botones o pestañas de navegación, de lado a lado como si se tratara de una tabla. A continuación, las columnas son perfectos.
Las columnas en una cuadrícula tienen la misma anchura (y el 100% de ancho en total), sin border, background, margin o padding .
Hay cinco rejillas de diseño que se pueden utilizar:
| rejilla Clase | columnas | Los anchos de columna | Corresponde a | Ejemplo |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
Dentro del recipiente de columna, elementos secundarios pueden tener la clase ui-block-a|b|c|d|e , dependiendo de el número de columnas. Las columnas flotarán lado-a-lado.
Ejemplo 1: Para la conexión a la red, una interfaz de usuario de clase (que es un diseño de dos columnas), debe especificar dos elementos secundarios de ui-block-a y ui-block-b .
Ejemplo 2: Para ui-grid-b (diseño de tres columnas), añadir tres elementos secundarios de ui-block-a, ui-block-b y ui-block-c .
personalizar Grids
Puede personalizar los bloques de columnas mediante el uso de CSS:
Ejemplo
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height:
100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
Inténtalo tú mismo " También puede personalizar los bloques mediante el uso de estilos en línea:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
varias filas
También es posible tener tiene varias filas dentro de sus columnas.
Nota: El ui-block-a-class siempre va a crear una nueva línea:
Ejemplo
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-c"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
</div>
Inténtalo tú mismo " Rejillas Responsive
En pantallas pequeñas, no se recomienda tener demasiados botones con de lado a lado en una fila de texto - como el texto puedes ser acortada.
Para las redes de respuesta, agregar la clase de interfaz de usuario que responde al contenedor: