jQuery Mobile Grade
jQuery Mobile disposição da grade
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. |
|---|
Grade personalizada
Usando CSS, você pode personalizar blocos de colunas:
Exemplos
-.ui-Block a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid preta;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</ Style>
tente »
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>
Multi-linha
Na coluna, você também pode ter várias linhas.
Nota: ui-bloco-a-classe sempre criar uma nova linha:
Exemplos
<Div class = "ui-block-a"> <span> algum texto </ span> </ div>
<Div class = "ui-block-b"> <span> algum texto </ span> </ div>
<Div class = "ui-bloco c"> <span> algum texto </ span> </ div>
<Div class = "ui-block-a"> <span> algum texto </ span> </ div>
<Div class = "ui-block-b"> <span> algum texto </ span> </ div>
<Div class = "ui-block-a"> <span> algum texto </ span> </ div>
</ Div>
tente »
Grade Responsive
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:
