autor: Robert
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.
Paginację tworzymy poprzez dodanie do znacznika <ul>
klasy pagination
.
Kod wygląda następująco:
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:
Gdy chcemy aby nasza nawigacja była mniejsza bądź większa to wystarczy dodać klasę, odpowiednio: pagination-sm
lub pagination-lg
.
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
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.
OdpowiedzJSy 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