O melhor tutorial jQuery Mobile Grade em 2024. Neste tutorial você pode aprender jQuery Mobile disposição da grade,Grade personalizada,Exemplos,Multi-linha,Exemplos,Grade Responsive,Exemplos,
jQuery Mobile fornece uma análise de um layout baseado em CSS. No entanto, em dispositivos móveis, considerando a largura da tela do telefone estreito, geralmente não recomendamos o uso de layout de coluna desagregada.
Mas às vezes você quer elementos menores (como botões ou guias de navegação) são dispostos lado a lado, juntos, como como em uma mesa. Neste caso, recomenda-se usar o layout sub-coluna.
colunas de grade têm a mesma largura (total 100%), sem borda, fundo, margin ou padding.
Há grade quatro de layout estão disponíveis:
classe de grelha | linha | Largura da coluna | correspondência | Exemplos |
---|---|---|---|---|
ui-grid-a solo | 1 | 100% | ui-block-a | tentar |
ui-grid-a | 2 | 50% / 50% | ui-block-a | b | tentar |
ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a | b | c | tentar |
ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d | tentar |
ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e | tentar |
Nos recipientes de coluna, sub-elementos têm classe como ui-block-a | b | c | d | e, dependendo do número de colunas. Flutuante side row a lado. Exemplos 1: classe de ui-grid-um (dois layouts), você deve especificar o ui-block-a e ui-block-b dos dois sub-elementos. Exemplos 2: classe de ui-grid-b (três layouts), você deve adicionar ui-block-a, UI- bloco-b e ui-block-c dos três sub-elementos. |
Usando CSS, você pode personalizar blocos de colunas:
Você também pode personalizar usando os blocos de estilo in-line:
<div class="ui-block-a" style="border: 1px solid black;"><span>Textpt</span></div>
Na coluna, você também pode ter várias linhas.
Nota: ui-bloco-a-classe sempre criar uma nova linha:
Na tela pequena, muito não é recomendado em um lado linha por botão lateral (texto encurtado).
Criamos uma grade responsiva para uso em contentores categorias ui-responsive: