bootstrap tutorials kurs
|

Paginacja stron w Bootstrap

przezAurelia Sypniewska
Czas czytania: 2 minut

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:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">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

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

Blokowanie wybranego elementu

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

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

Wielkość paginacji

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

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

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

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

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

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

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

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