jQuery komórkowy Siatka
jQuery komórkowy Układ Siatka
jQuery Mobile zawiera podział na układ oparty na CSS. Jednak na urządzeniach mobilnych, biorąc pod uwagę szerokość ekranu telefonu wąskie, na ogół nie jest zalecane stosowanie zdezagregowanym układzie kolumnowym.
Ale czasami chcesz mniejsze elementy (takie jak przyciski lub kartach nawigacji) są ułożone obok siebie razem, podobnie jak w tabeli. W tym przypadku zaleca się stosowanie układu podkolumnie.
kolumny siatki mają jednakową szerokość całkowita (100%), bez obramowania, tła, margines lub dopełnienie.
Istnieją cztery siatki układu są dostępne:
| Klasa Siatka | rząd | Szerokość kolumny | korespondencja | Przykłady |
|---|---|---|---|---|
| ui-grid-Solo | 1 | 100% | ui-block-a | próbować |
| ui-grid-a | 2 | 50% / 50% | ui-blok-a | b | próbować |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-blok-a | b | c | próbować |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-blok-a | b | c | d | próbować |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-blok-a | b | c | d | e | próbować |
 | W pojemnikach kolumn cząstkowe elementy mają klasę jako ui-blok-B | c | d | e, w zależności od liczby kolumn. Pływające obok wiersza siebie. Przykłady 1: klasa UI-siatki-A (dwa układy), należy określić UI-blok-A i ui-blok-b z dwóch elementów podrzędnych. Przykłady 2: klasa UI-grid-B (trzy układy klawiatury), należy dodać ui-blok-a, ui- block-b oraz ui-blok-c z trzech sub-elementów. |
|---|
niestandardowe Siatka
Za pomocą CSS, można dostosować bloki kolumn:
Przykłady
.ui-blok-a, .ui-blok-b, .ui-blok-c {
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</ Style>
Spróbuj »
Można również dostosować za pomocą bloków wbudowanych stylów:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
Multi-line
W kolumnie, można również wiele linii.
Uwaga: ui-blok-a-klasy zawsze utworzyć nowy wiersz:
Przykłady
<Div class = "ui-block-a"> <span> jakiś tekst </ span> </ div>
<Div class = "ui-blok-b"> <span> jakiś tekst </ span> </ div>
<Div class = "ui-blok-c"> <span> jakiś tekst </ span> </ div>
<Div class = "ui-block-a"> <span> jakiś tekst </ span> </ div>
<Div class = "ui-blok-b"> <span> jakiś tekst </ span> </ div>
<Div class = "ui-block-a"> <span> jakiś tekst </ span> </ div>
</ Div>
Spróbuj »
responsive Siatka
Na małym ekranie, zbyt wiele nie jest zalecane u boku rzędu przyciskiem bocznym (tekst skrócić).
Tworzymy elastyczne siatki do użytku w pojemnikach kategoriach UI-reaguje: