jQuery Mobile - Layouts de grade
O sistema de grade móvel jQuery cria layouts de página por meio de uma série de linhas e colunas.
A tabela a seguir demonstra os tipos de grade em detalhes.
Sr. Não. | Tipo e descrição |
---|---|
1 | Grades básicas
Inclua a classe ui-grid-solo em <div> para criar uma grade de coluna única, a largura da grade é 100% |
2 | Duas grades de coluna
Adicione a classe ui-grid-a a um <div> e inclua dois contêineres filho com as classes ui-block-a e ui-block-b para criar o layout de duas colunas. |
3 | Three-column grids A classe ui-grid-b é usada para criar uma grade de três colunas, ela inclui três contêineres filho com a classe ui-block-a / b / c . |
4 | Grades de quatro colunas
A classe ui-grid-c é usada para criar uma grade de quatro colunas, ela inclui quatro contêineres filho com a classe ui-block-a / b / c / d / e . |
5 | Grades de cinco colunas
A classe ui-grid-d é usada para criar uma grade de cinco colunas, ela inclui cinco contêineres filho com a classe ui-block-a / b / c / d . |
6 | Grades de várias linhas
Várias linhas podem ser agrupadas na grade especificando qualquer classe de coluna em um contêiner. |
7 | Aula solo de grade
A grade padrão é responsiva substituindo os estilos de grade abaixo de um único ponto de interrupção. |
8 | Grades responsivas
Nas grades de pilha abaixo de 35em (560px), um ponto de interrupção predefinido pode ser aplicado. |
9 | Predefinição de ponto de interrupção
Nas grades de pilha abaixo de 35em (560px), um ponto de interrupção predefinido pode ser aplicado. No contêiner de grade, inclua a classe responsiva .ui . |