jQuery Mobile Grilles
jQuery Mobile Disposition de grille
jQuery Mobile fournit un ensemble de mises en page en colonnes basées sur CSS. Cependant, sur les appareils mobiles, en raison de la largeur d'écran étroite des téléphones, il n'est généralement pas recommandé d'utiliser des mises en page multicolonnes.
Mais parfois, vous souhaitez placer des éléments plus petits (tels que des boutons ou des onglets de navigation) côte à côte, comme dans un tableau. Dans ces cas, il est recommandé d'utiliser une mise en page en colonnes.
Les colonnes d'une grille ont une largeur égale (totalisant 100%), sans bordures, arrière-plan, marge ni rembourrage.
Quatre grilles de mise en page sont disponibles :
| Classe de grille | Column | Largeur de colonne | Correspond à | Exemple |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Essayez-le |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Essayez-le |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Essayez-le |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Essayez-le |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Essayez-le |
 |
À l'intérieur du conteneur de colonnes, les éléments enfants ont des classes ui-block-a|b|c|d|e selon le nombre de colonnes. Les colonnes flotteront côte à côte. Exemple 1 :Avec la classe ui-grid-a (disposition à deux colonnes), vous devez spécifier deux éléments enfants, ui-block-a et ui-block-b. Exemple 2 :Avec la classe ui-grid-b (disposition à trois colonnes), vous devez ajouter trois éléments enfants : ui-block-a, ui-block-b et ui-block-c. |
|---|
Grilles personnalisées
En utilisant CSS, vous pouvez personnaliser les blocs de colonnes :
Exemples
.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>
Essayez-le »
Vous pouvez également personnaliser les blocs en utilisant des styles en ligne :
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
Plusieurs lignes
Il peut également y avoir plusieurs lignes dans les colonnes.
Remarque :La classe ui-block-a crée toujours une nouvelle ligne :
Exemples
<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>
Essayez-le »
Grilles responsives
Sur les petits écrans, il n'est pas recommandé de placer trop de boutons côte à côte sur une même ligne (le texte sera raccourci).
Nous utilisons la classe ui-responsive sur le conteneur pour créer des grilles responsives :
Autres extensions