#45. Paginacja

Tworzenie paginacji

Stworzenie paginacji z pomocą Bootstrapa to nic trudnego. Wystarczy skorzystać z elementu nav oraz nieuporządkowanej listy (ul wraz z elementami li). Wcześniej w podobny sposób pokazałem jak tworzyć menu.

Używając pomocniczej klasy pagination z zasobów Bootstrapa , w prosty sposób uzyskamy elastyczną paginację.

Zadajmy więc sobie pytanie – do czego może nam się przydać paginacja? A do między innymi zarządzania stronami wpisów na blogu oraz numerowania stron zdjęć w swoim portfolio. 

Poniżej pod formularzem dodaję przykład z gotową paginacją na stronie. Spójrz i przeanalizuj kod:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

rough-cloud-j0yc7

rough-cloud-j0yc7 danielminschinski

Stany paginacji

Paginację można ostylować wg własnych upodobań. Stany paginacji możemy wykorzystać w prosty sposób do wyróżnienia odpowiednich stron, np. dla aktywnej strony podświetlić element odpowiadający jej w paginacji.

I tym razem będziemy używać do tego klas pomocniczych Bootstrapa, które podobnie jak w poprzednich lekcjach odnoszą się do nazwy stanu – active oraz disabled. Klasy dodajemy do elementu listy, tzn. li.

Przykładowo, poniżej dodaję przykład aktywnego elementu paginacji:

<li class="active"><a href="#">1</a></li> 

Spójrz na nasz ostatni przykład. Uwzględniłem w nim stany paginacji:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

runtime-sunset-ubxdj

runtime-sunset-ubxdj danielminschinski

Klasa “pager”

Nie zawsze jest potrzeba numerowania paginacji strony. Alternatywnie można wykorzystać przyciski “Previous” oraz “Next”.

Nasz framework umożliwia stworzenie takich przycisków poprzez dodanie klasy pager do elementu ul. Taki styl nawigacji może się przydać np. do przeglądania wpisów na blogu.

Przeanalizuj poniższy przykład. Jak się możesz domyślać, lekko zmodyfikowany od poprzedniego:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

suspicious-drake-vtmrn

suspicious-drake-vtmrn danielminschinski

Paginacja daje nam dużo możliwości. Ułatwia przeglądanie bloga oraz innych stron internetowych czy sklepów online. Jesteśmy w stanie modyfikować z pomocą Bootstrapa wygląd paginacji. Wystarczy odrobine klas pomocniczych i efekt gotowy.

W kolejną środę opublikuję materiał o ciekawych sposobach przedstawiania danych za pomocą list, dzięki klasom Bootstrapa.

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!