TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć paginację Bootstrap 5?

5

Być może widziałeś składnik stronicowania na większości stron indeksu i archiwum bloga. Na ogół strony indeksu pokazują ostatnie dziesięć artykułów, a następnie używają wczytaj więcej lub numerowanej paginacji, aby przejść do innych stron. W Bootstrap 5 wystarczy dołączyć fragment kodu, aby wyświetlić paginację w różnych stylach. Należy pamiętać, że Bootstrap to framework frontendowy, który oferuje wbudowany komponent paginacji tylko do celów wyświetlania. Powinieneś sam zakodować, aby dodawać automatyczne linki stronicowane na stronach indeksowych i archiwalnych.

Jeśli Twoja witryna ma mniej stron, łatwo jest ręcznie dodać każdy link w paginacji. Ale w przypadku większej witryny, powiedzmy, że masz 500 postów na blogu, powinieneś użyć odpowiedniej konfiguracji skryptu i motywu, aby dodać automatyczne linki w paginacji.

W tym samouczku opisano następujące sposoby tworzenia stronicowania Bootstrap:

  1. Tworzenie domyślnej stronicowania Bootstrapa
  2. Dodawanie ikon dla poprzedniej i następnej nawigacji
  3. Wyświetlam aktywne i wyłączone linki
  4. Tworzenie różnych rozmiarów paginacji
  5. Korzystanie z różnych wyrównań

Komponent paginacji w Bootstrap to nic innego jak nieuporządkowana lista elementów, jak poniżej:

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav>
  • Zasadniczo powinieneś użyć

    składnik do włączania stronicowania.

  • Dołącz listę nieuporządkowaną z klasą „.pagination".

  • Każdy oświetlony element powinien mieć klasę „.page-item”.

  • Każdy link powinien używać klasy „.page-link”.

Domyślna paginacja będzie wyglądać tak, jak pokazano poniżej:

Jak stworzyć paginację Bootstrap 5?

2 Dodawanie ikon dla poprzedniego i następnego

Domyślnie paginacja używa tekstu do poprzedniej i następnej nawigacji. Zamiast tego możesz użyć ikon, używając poniższego kodu.

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>

Ponieważ ikony nie mogą być odczytane przez użytkowników niedowidzących, należy używać poprzedniego/następnego tekstu dla czytników ekranu używających klasy „.sr-only”. To nie będzie wyświetlane w przeglądarce. Komponent będzie wyglądał w przeglądarce jak poniżej:

Jak stworzyć paginację Bootstrap 5?

3 Pokazywanie aktywnego łącza i wyłączanie łącza

Aktywny link można wyświetlić na paginacji, dodając klasę „.active” do wymaganej pozycji listy. Podobnie dodaj klasę „.disabled”, aby wyłączyć klikanie konkretnego linku. W poniższym przykładzie poprzedni tekst nawigacji jest wyłączony, a łącze 2 jest wyświetlane jako aktywne.

<nav aria-label="Pagination"> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">Active Page</span></a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

Klasa „.disabled” używa domyślnej właściwości CSS „pointer-events:none”. Spowoduje to wyłączenie klikania myszą, ale użytkownicy nadal mogą używać klawisza tabulatora na klawiaturze do podświetlania linku i naciskania spacji, aby otworzyć linkowaną stronę. Atrybut tabindex ="-1" jest używany do wyłączenia łącza dla dostępu z klawiatury.

Poniżej znajduje się sposób wyświetlania aktywnego linku na paginacji. Wyłączone łącza pokażą symbol zatrzymania kursora po najechaniu myszą.

Jak stworzyć paginację Bootstrap 5?

4 duże i małe paginacje

Podobnie jak w przypadku większości innych komponentów Bootstrap 4, paginację można również zmienić na większą lub mniejszą. Większy powinien zawierać klasę „.pagination-lg” z nieuporządkowaną listą jak poniżej:

<nav aria-label="Pagination"> <ul class="pagination pagination-lg"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

I dobrze!!! Mniejszy powinien zawierać klasę „.pagination-sm”:

<nav aria-label="Pagination"> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

Większy i mniejszy komponent paginacji będzie wyglądał jak poniżej:

Jak stworzyć paginację Bootstrap 5?

5 Wyrównane do środka i do prawej

Ostatnią odmianą jest wyrównanie. Domyślnie składnik stronicowania zostanie wyrównany do lewej strony. Możesz ustawić go centralnie lub w prawo, korzystając z dodatkowych klas. Aby wyrównać do środka, dodaj „.justify-content-center” do nieuporządkowanej listy.

<nav aria-label="Pagination"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

Aby uzyskać właściwe wyrównanie, dodaj klasę „.justify-content-end” do listy nieuporządkowanej.

<nav aria-label="Pagination"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów