Pagination in Bootstrap 5

Paginacja staje się koniecznością, jeśli w Twojej witrynie jest wiele stron internetowych, ponieważ pomaga użytkownikowi łatwo poruszać się po tych stronach, a także uświadamia użytkownikowi na stronie. Jeśli projektujesz swoją witrynę za pomocą Bootstrap 5 i chcesz nauczyć się tworzyć i stylizować paginację za pomocą Bootstrap 5, przeczytaj artykuł do końca.

Jak utworzyć paginację za pomocą Bootstrap 5

Aby zrobić paginację, przypisz .paginacja klasa do nieuporządkowanej listy, .Page-Item klasa do pozycji listy i .link do strony klasa do linku obecnego wewnątrz każdego elementu listy.

Html

• «


• 1


• 2


• 3


• 4


• »

Powyższy kod generuje paginację pokazującą numerację od 1 do 4, podczas gdy Laquo i & Raquo są nazwami encji odpowiednio dla lewicowych i prawej podwójnej kąt. Podmioty te pomagają użytkownikowi przesunąć paginację numerującą się do tyłu i naprzód.

Wyjście

Wyjście wyświetla podstawową paginację.

Jak przypisać stany aktywne i niepełnosprawne do paginacji

Aktywny stan paginacji pokazuje stronę, na której użytkownik jest obecnie, podczas gdy stan wyłączony sprawia, że ​​link nie można się spójny i uświadamia, że ​​nie ma dalszych stron do nawigacji.

Html

• Z powrotem


• 1


• 2


• 3


• 4


• Następny

Snippet kodowy utworzy paginację z elementem listy oznaczonym „Wstecz” przypisywanego stanowi niepełnosprawny, tymczasem stan aktywny został przypisany do elementu listy oznaczonego „4”, który wskazuje, że użytkownik jest obecnie na czwartej stronie.

Wyjście

Stany aktywne i niepełnosprawne zostały pomyślnie przypisane do paginacji.

Jak skalować paginację

Jeśli chcesz skalować swoją paginację, użyj .Pagination-SM klasa, aby stworzyć małe paginacje, podczas gdy użyj .Pagination-lg do wygenerowania dużych wielkości paginacji.

Html

Powyższy kod wygeneruje zarówno małe, jak i duże paginacje, aby zademonstrować porównanie między rozmiarami obu paginacji.

Wyjście

W ten sposób możesz skalować swoją paginację.

Jak ustawić wyrównanie paginacji

Paginacja domyślnie jest ustawiona w lewym rogu strony, jednak jeśli chcesz umieścić ją w centrum, użyj .Justify-Content-Center klasa, podczas gdy użyj .Justify-Content-end Aby umieścić go w prawym rogu strony.

Html

Powyższy kod używa .Klasa Justify-Content-Center, zatem paginacja utworzona w rezultacie zostanie umieszczona na środku strony.

Wyjście

To jest paginacja ustawiona w środku.

Teraz ustawmy paginację w prawym rogu strony.

Html

Kod powyżej używa .Klasa Justify-Content-End, stąd paginacja zostanie umieszczona na końcu strony.

Wyjście

To jest prawe pozycjonowane paginacja.

Wniosek

Paginację można utworzyć, przypisując .paginacja klasa do nieuporządkowanej listy, .Page-Item klasa do pozycji listy i .link do strony klasa do linku obecnego wewnątrz każdego elementu listy. Jeśli chcesz skalować paginację, skorzystaj z .Pagination-SM, I .Pagination-lg zajęcia. Ponadto, aby wyrównać paginację w środku lub na końcu strony, użyj .Justify-Content-Center, I .Justify-Content-end zajęcia odpowiednio. Na koniec możesz również przypisać stany aktywne i rozebrane do elementów paginacji.