jQuery Mobile - Dispositions en grille

Le système de grille mobile jQuery crée des mises en page via une série de lignes et de colonnes.

Le tableau suivant montre les types de grille en détail.

Sr.No. Type et description
1 Grilles de base

Incluez la classe ui-grid-solo dans <div> pour créer une grille de colonne unique, la largeur de la grille est de 100%

2 Grilles de deux colonnes

Ajoutez la classe ui-grid-a à un <div> et incluez deux conteneurs enfants avec les classes ui-block-a et ui-block-b pour créer une disposition à deux colonnes.

3 Three-column grids
La classe ui-grid-b est utilisée pour créer une grille à trois colonnes, elle comprend trois conteneurs enfants avec la classe ui-block-a / b / c .
4 Grilles à quatre colonnes

La classe ui-grid-c est utilisée pour créer une grille à quatre colonnes, elle comprend quatre conteneurs enfants avec la classe ui-block-a / b / c / d / e .

5 Grilles à cinq colonnes

La classe ui-grid-d est utilisée pour créer une grille à cinq colonnes, elle comprend cinq conteneurs enfants avec la classe ui-block-a / b / c / d .

6 Grilles à plusieurs lignes

Plusieurs lignes peuvent être encapsulées dans la grille en spécifiant n'importe quelle classe de colonne sur un conteneur.

sept Cours solo de grille

La grille standard est rendue réactive en remplaçant les styles de grille sous un seul point d'arrêt.

8 Grilles réactives

Les grilles de pile inférieures à 35em (560px), un point d'arrêt prédéfini peut être appliqué.

9 Préréglage de point d'arrêt

Les grilles de pile inférieures à 35em (560px), un point d'arrêt prédéfini peut être appliqué. Dans le conteneur de grille, incluez la classe .ui-responsive .