Paginacja stron w Bootstrap

bootstrap tutorials kurs

Kategoria wpisu Bootstrap 3, Kurs Bootstrap, Kursy Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Paginacja ułatwia ułatwia poruszanie się po stronach danej witryny jeżeli posiada się więcej niż jedną podstronę.

Przykładowa paginacja wygląda tak:

W HTML:

 
Jak widać jest to prosta lista z np. z numerami stron lub z konkretnymi tekstami.

Podświetlenie konkretnego elementu

Zadaniem podświetlonego elementu jest informowanie, na której aktualnie stronie, elemencie się znajdujemy.
W tym celu dodajemy do elementu class=”activ”. Aktywny element będzie wyświetlał się w innym kolorze niż pozostałe

Blokowanie wybranego elementu

Istnieje również możliwość zablokowania konkretnej podstrony dodając class=”disabled”
Element z tą klasą będzie nieklikalny.

Wielkość paginacji

Bootstrap posiada wbudowane kilka wielkości paginacji pagination-lg i pagination-sm:

pagination-lg – duży rozmiar
pagination-sm – mały rozmiar

Pozycjonowanie paginacji

Domyślnie zostały przygotowane 3 metody miejsca ustawienia paginacji (Flexbox)

  • domyślny do lewej
  • wyśrodkowanie
  • do prawej

W celu wyśrodkowania pagination wystarczy dodać class=”justify-content-center”

Do przesunięcia na prawą stronę użyjemy z kolei class=”justify-content-end”

Poprzednia i Następna strona

W przypadku gdy jednak chcemy mieć jednak nieco prostszą metodę poruszania się po stronie bez numerowanych stron możemy użyć class=”pager”:

W celu rozdzielenia przycisków należy dodać odpowiednio previous na poprzedni i next na następny.

Breadcrumb

Podobną strukturę posiada breadcrumb, dzięki któremu często możemy zlokalizować swoje położenie na stronie.

Jak widać rożni się on praktycznie tym że używa class=”breadcrumb”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *