jQuery Mobile Grille
jQuery Mobile Grid Layout
jQuery Mobile fournit une ventilation d'une mise en page à base de CSS. Cependant, sur les appareils mobiles, compte tenu de la largeur de l'écran du téléphone étroit, en général, nous ne recommandons pas l'utilisation de désagrégées disposition des colonnes.
Mais parfois, vous voulez plus petits éléments (tels que des boutons ou des onglets de navigation) sont disposés côte à côte ensemble, comme comme dans une table. Dans ce cas, il est recommandé d'utiliser des sous-colonnes.
colonnes de la grille sont d'égale largeur (total 100%), sans frontière, fond, la marge ou de rembourrage.
Il y a quatre grille de mise en page sont disponibles:
| classe de grille | rangée | Largeur de colonne | correspondance | Exemples |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-bloc-un | essayer |
| ui-grid-un | 2 | 50% / 50% | ui-bloc-a | b | essayer |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-bloc-a | b | c | essayer |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-bloc-a | b | c | d | essayer |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-bloc-a | b | c | d | e | essayer |
 | Dans les conteneurs de colonne, les sous-éléments ont classe ui-bloc-a | b | c | d | e en fonction du nombre de colonnes. Flottant côté de la ligne côte à côte. Exemples 1: classe de ui-grid-un (deux mises en page), vous devez spécifier l'ui-bloc-un et ui-block-b des deux sous-éléments. Exemples 2: classe de ui-grid-b (trois configurations), vous devez ajouter ui-bloc-un, UI- bloc-b et ui-bloc-c des trois sous-éléments. |
|---|
Grille personnalisée
En utilisant CSS, vous pouvez personnaliser les blocs de colonnes:
Exemples
.ui-bloc-un, .ui-block-b, .ui-bloc-c {
background-color: lightgray;
border: 1px solid black;
hauteur: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</ Style>
Essayez »
Vous pouvez également personnaliser en utilisant les blocs de style en ligne:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
Multi-line
Dans la colonne, vous pouvez aussi avoir plusieurs lignes.
Remarque: ui-bloc-a-classe toujours créer une nouvelle ligne:
Exemples
<Class Div = "ui-bloc un"> <span> texte </ span> </ div>
<Class Div = "ui-block-b"> <span> texte </ span> </ div>
<Class Div = "ui-bloc-c"> <span> texte </ span> </ div>
<Class Div = "ui-bloc un"> <span> texte </ span> </ div>
<Class Div = "ui-block-b"> <span> texte </ span> </ div>
<Class Div = "ui-bloc un"> <span> texte </ span> </ div>
</ Div>
Essayez »
Grille Responsive
Dans le petit écran, trop est pas recommandé dans un côté de la ligne par bouton latéral (texte raccourci).
Nous créons une grille sensible pour une utilisation dans les catégories conteneurs ui-sensibles: