Paginacja stron w Bootstrap

Paginacja czyli numerowanie stron ułatwia poruszanie się po stronach danej witryny. Jest ona bardzo przydatna i wygodna jeżeli witryna posiada się więcej niż jedną podstronę.

O tym dlaczego stronę dzieli się na części chyba nie muszę wam wyjaśniać. Wystarczy bowiem chwilę pomyśleć. Paginację bardzo często stosuje się na różnego typu stronach z systemami CMS, ale spokojnie możemy ją sami stworzyć na nasze potrzeby.

Jak wygląda paginacja

Przykładowa paginacja wygląda tak:

• 1
• 2
• 3
• 4
• 5

• Poprzedni
• 1
• 2
• 3
• Następny

W HTML:

<ul class="pagination">
  <li class="page-item"><a href="#" class="page-link">1</a></li>
  <li class="page-item"><a href="#" class="page-link">2</a></li>
  <li class="page-item"><a href="#" class="page-link">3</a></li>
  <li class="page-item"><a href="#" class="page-link">4</a></li>
  <li class="page-item"><a href="#" class="page-link">5</a></li>
</ul>

 
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

• 1
• 2
• 3
• 4
• 5

<ul class="pagination">
  <li class="page-item"><a href="#" class="page-link">1</a></li>
  <li class="page-item" class="active"><a href="#" class="page-link">2</a></li>
  <li class="page-item"><a href="#" class="page-link">3</a></li>
  <li class="page-item"><a href="#" class="page-link">4</a></li>
  <li class="page-item"><a href="#" class="page-link">5</a></li>
</ul>

Blokowanie wybranego elementu

Istnieje również możliwość zablokowania konkretnej podstrony dodając class=”disabled”
Elementu z tą klasą nie będziemy mogli kliknąć.

• 1
• 2
• 3
• 4
• 5

<ul class="pagination">
  <li class="page-item"><a href="#" class="page-link">1</a></li>
  <li class="page-item"><a href="#" class="page-link">2</a></li>
  <li class="page-item"><a href="#" class="page-link">3</a></li>
  <li class="disabled page-item"><a href="#" class="page-link">4</a></li>
  <li class="page-item"><a href="#" class="page-link">5</a></li>
</ul>

Wielkość paginacji

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

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

<ul class="pagination pagination-lg">
 ...
</ul>

<ul class="pagination pagination-sm">
 ...
</ul>

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”

• 1
• 2
• 3

<ul class="pagination justify-content-center">
...
</ul>

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

• 1
• 2
• 3

  <ul class="pagination justify-content-end">

  </ul>

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

• Poprzednia strona
• Następna strona

<ul class="pager">
  <li><a href="#">Poprzednia strona</a></li>
  <li><a href="#">Następna strona</a></li>
</ul>

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

• ← Poprzednia
• Następna →

<ul class="pager">
  <li class="previous"><a href="#">&larr; Poprzednia</a></li>
  <li class="next"><a href="#">Następna &rarr;</a></li>
</ul>

Breadcrumb

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

• Home
• Podstrona 1
• Podstrona 2
• Podstrona 3

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Podstrona 1</a></li>
  <li><a href="#">Podstrona 2</a></li>
  <li class="active">Podstrona 3</li> 
</ul>

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