Das beste jQuery Mobile Grid-Tutorial im Jahr 2024. In diesem Tutorial können Sie jQuery Mobile Grid-Layout,Benutzerdefinierte Gitter,Beispiele,Multi-line,Beispiele,Responsive Grid,Beispiele, lernen
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. |
Durch die Verwendung von CSS können Sie die Spaltenblöcke anpassen:
Sie können anpassen, auch die Inline-Stil Blöcke mit:
<div class="ui-block-a" style="border: 1px solid black;"><span>Textde</span></div>
In der Spalte können Sie auch über mehrere Leitungen verfügen.
Hinweis: ui-Block-a-Klasse immer eine neue Zeile zu erstellen:
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: