Najlepszy samouczek jQuery komórkowy Siatka W 2024 r. W tym samouczku możesz dowiedzieć się jQuery komórkowy Układ Siatka,niestandardowe Siatka,Przykłady,Multi-line,Przykłady,responsive Siatka,Przykłady,
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. |
Za pomocą CSS, można dostosować bloki kolumn:
Można również dostosować za pomocą bloków wbudowanych stylów:
<div class="ui-block-a" style="border: 1px solid black;"><span>Textpl</span></div>
W kolumnie, można również wiele linii.
Uwaga: ui-blok-a-klasy zawsze utworzyć nowy wiersz:
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: