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:
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:
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:
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