Paginacja / Numeracja podstron

autor: Robert

11 listopada 2013

Nie raz zauważyliście, że na stronie znajduje się pasek z numerami kolejnych podstron (np. kwejk) albo w przypadku blogów można znaleźć linki prowadzące do poprzedniego / następnego wpisu.

Oczywiście tutaj również bootstrap posiada gotowe komponenty które pomagają nam stworzyć właśnie takie paginacje.

Standardowa paginacja

• «
• 1
• 2
• 3
• 4
• 5
• »

Paginację tworzymy poprzez dodanie do znacznika <ul> klasy pagination.

Kod wygląda następująco:

Blokowanie i podświetlanie

Gdy przykładowo dojdziemy do ostatniej/pierwszej podstrony trzeba zablokować przewijanie dalej/wcześniej. Operacje tą wykonujemy poprzez dodanie do znacznika <li> klasy disabled. Bootstrap zadba by link stał się wtedy nieaktywny.

Warto też by aktualny numer podstrony podświetlał się na naszej liście. Dokonujemy tego poprzez dodanie klasy active do znacznika <li>.

• «
• 1
• 2
• 3
• 4
• 5
• »

Kod:

Rozmiary paginacji

Gdy chcemy aby nasza nawigacja była mniejsza bądź większa to wystarczy dodać klasę, odpowiednio: pagination-sm lub pagination-lg.

Poprzednia / Następna strona

W przypadku gdy nie potrzebujmy numeracji podstron a jedynie przyciski Wstecz / Dalej, posługujemy się klasą pager. Generuje ona 2 przyciski które służą tylko do nawigacji pomiędzy 2 podstronami. Najlepszym przykładem jest przełączanie się pomiędzy starszym a nowszym postem na tej stronie.

• Poprzednia strona
• Następna strona

Poprzez dodanie klas previous oraz next do znaczników <li> przyciski automatycznie ustawią się na bokach diva w którym są zawarte.

• ← Poprzednia
• Następna →

Przykłady

Strona z przykładami

---

Post się przydał? Oceń go proszę.

(4 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Breadcrumbs / Okruszki
Nowszy post →
Etykietki / Labels

Robert 15 czerwca 2015 o 07:51

Na pewno można:) Spróbuj dodać margin-left i margin-right: auto. Albo zamknij paginację w divie z klasą center-block.

Odpowiedz

Robert 30 września 2015 o 08:03

Sam HTML służy tylko do wyświetlania treści, aby „tchnąć w niego życie” trzeba użyć PHP albo JS. Paginacja jest tylko wyświetlanym elementem a żeby zmieniało się podświetlenie na kolejnej stronie trzeba napisać skrypt, który będzie dodawał klasę .active w odpowiednie miejsce.

Odpowiedz

Armando 1 października 2015 o 08:36

a czy skrypt js dostarczony przez bootstrap nie posiada tej funkcji?

Odpowiedz

Robert 1 października 2015 o 08:48

JSy dostarczone z Bootstrapem służą do tworzenia animacji, modali, akordeonów itp.

Przykładowo tutaj na blogu buttony na dole wpisów służące do przełączania się pomiędzy postami korzystają z WordPressowej funkcji previous_post_link i next_post_link i mają kod:

<ul class="pager">
  <div class="col-md-6 col-xs-6">
    <li>
      <?php previous_post_link('%link', '← Starszy post<br><strong>%title</strong>') ?>
    </li>
  </div>
  <div class="col-md-6 col-xs-6">
    <li>
      <?php next_post_link('%link', 'Nowszy post →<br><strong>%title</strong>') ?>
    </li>
  </div>
</ul>

Więc jak widzisz te funkcje są tylko „ubrane” w Bootstrapa.

Odpowiedz