jQuery Mobile layout Grids
jQuery Mobile fornece um conjunto de layouts de coluna baseados em CSS. No entanto, layouts de coluna não são geralmente recomendada em um dispositivo móvel, devido à largura da tela do celular.
Mas há momentos em que você deseja posicionar elementos menores, como botões ou guias de navegação, lado a lado, como se estivesse em uma mesa. Em seguida, as colunas são perfeitos.
Colunas em uma grade têm a mesma largura (e 100% de largura no total), sem border, background, margin ou padding .
Existem cinco grades de layout que podem ser utilizados:
| Classe grade | colunas | larguras de coluna | Corresponde a | Exemplo |
|---|---|---|---|---|
| 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 do recipiente de coluna, elementos filho pode ter a classe ui-block-a|b|c|d|e , dependendo do número de colunas. As colunas irá flutuar de lado-a-lado.
Exemplo 1: Para o ui-grid-uma classe (que é um layout de duas colunas), é necessário especificar dois elementos filho de ui-block-a e ui-block-b .
Exemplo 2: Para ui-grid-b (layout de três colunas), adicione três elementos filho de ui-block-a, ui-block-b e ui-block-c .
Personalize Grids
Você pode personalizar seus blocos de colunas usando CSS:
Exemplo
<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>
Tente você mesmo " Você também pode personalizar seus blocos usando estilos in-line:
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
várias linhas
Também é possível ter ter várias linhas dentro de suas colunas.
Nota: O ui-block-a-class sempre criará uma nova linha:
Exemplo
<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>
Tente você mesmo " Grids Responsive
Em telas pequenas, não é recomendável ter muitos botões com side-by-side de texto em uma linha - como o texto pode ter encurtado.
Em relação às redes de resposta, adicione a classe ui-responsivos para o recipiente: