jQuery Mobile Grid
jQuery Mobile Grid-Layout
jQuery Mobile bietet einen Zusammenbruch eines CSS-basierten Layouts. Doch auf mobilen Geräten, die Bildschirmbreite schmaler Telefon unter Berücksichtigung, in der Regel haben wir nicht die Verwendung von aufgeschlüsselten Spaltenlayout empfehlen.
Aber manchmal will man kleinere Elemente (wie Knöpfe oder Navigations Tabs) nebeneinander angeordnet sind, zusammen, wie wie in einer Tabelle. In diesem Fall ist es empfehlenswert, sub-Spalten-Layout zu verwenden.
Grid-Säulen sind von gleicher Breite (gesamt 100%), ohne Rahmen, Hintergrund, Rand oder Polsterung.
Es gibt vier Layout-Raster stehen zur Verfügung:
| Grid-Klasse | Reihe | Spaltenbreite | Korrespondenz | Beispiele |
|---|---|---|---|---|
| ui-Grid-Solo | 1 | 100% | ui-Block-a | versuchen |
| ui-Grid-a | 2 | 50% / 50% | ui-block-a | b | versuchen |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a | b | c | versuchen |
| ui-Grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d | versuchen |
| ui-Grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e | versuchen |
 | In den Säulenbehälter, Unterelemente haben Klasse als ui-block-a | b | c | d | e für die Anzahl der Spalten abhängig. Schwimmdock Reihe nebeneinander. Beispiele 1: Klasse von ui-Grid-a (zwei Layouts), müssen Sie den ui-Block-a und ui-Block-b der beiden Teilelemente angeben. Beispiele 2: Klasse ui-Grid-b (drei Layouts), müssen Sie ui-Block-a, UI- hinzufügen Block-b und ui-block-c der drei Teilelemente. |
|---|
Benutzerdefinierte Gitter
Durch die Verwendung von CSS können Sie die Spaltenblöcke anpassen:
Beispiele
.ui-Block-a, .ui-Block-b, .ui-block-c {
background-color: hellgrau;
border: 1px solid black;
Höhe: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</ Style>
Versuchen »
Sie können anpassen, auch die Inline-Stil Blöcke mit:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
Multi-line
In der Spalte können Sie auch über mehrere Leitungen verfügen.
Hinweis: ui-Block-a-Klasse immer eine neue Zeile zu erstellen:
Beispiele
<Div class = "ui-Block-a"> <span> ein Text </ span> </ div>
<Div class = "ui-block-b"> <span> ein Text </ span> </ div>
<Div class = "ui-block-c"> <span> ein Text </ span> </ div>
<Div class = "ui-Block-a"> <span> ein Text </ span> </ div>
<Div class = "ui-block-b"> <span> ein Text </ span> </ div>
<Div class = "ui-Block-a"> <span> ein Text </ span> </ div>
</ Div>
Versuchen »
Responsive Grid
In dem kleinen Bildschirm ist zu viel nicht durch seitliche Taste in einer Reihe Seite empfohlen (Text gekürzt).
Wir schaffen eine ansprechende Gitter für den Einsatz in Container ui-responsive Kategorien: