Bootstrap tutorial logo

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

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

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.

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

Przykłady

Strona z przykładami


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (4 głosów, średnia: 5,00 na 5)
Loading...

Mister Klikacz 12 czerwca 2015 o 12:24

Można jakoś wycentrować paginację?

Odpowiedz
    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
Armando 29 września 2015 o 11:02

Mi żadna z paginacji, podanych jako przykłady na tej stronie, nie działa (przy przełączaniu strony nie zmienia się niebieskie podświetlenie).

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