TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag Bootstrap 5 -paginering?

1

Du kanske har sett pagineringskomponenten på de flesta bloggindex och arkivsidor. Generellt visar indexsidorna de senaste tio artiklarna och använder sedan ladda mer eller numrerad sidvisning för att gå vidare till andra sidor. I Bootstrap 5 behöver du bara inkludera en kodbit för att visa paginering i olika stilar. Observera att Bootstrap är ett frontend -ramverk, det erbjuder bara inbyggd pagineringskomponent för bara visningsändamål. Du bör koda dig själv för att lägga till automatiska sidade länkar på index- och arkivsidor.

Om din webbplats har färre sidor är det enkelt att manuellt lägga till varje länk på sidläggningen. Men för en större webbplats, säg att du har 500 blogginlägg, bör du använda lämplig skript- och temainställning för att lägga till automatiska länkar vid sidvisning.

Denna handledning täcker följande sätt att skapa Bootstrap -paginering:

  1. Skapa standard Bootstrap -paginering
  2. Lägger till ikoner för föregående och nästa navigering
  3. Visar aktiva och inaktiverade länkar
  4. Skapa olika storlekar av pagination
  5. Använda olika inriktningar

Paginationskomponenten i Bootstrap är inget annat än en oordnad lista med objekt som nedan:

<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>
  • I princip bör du använda

    komponent för att inkludera pagination.

  • Inkludera orörd lista med klass ".pagination".

  • Varje tänd objekt ska ha klassen ".page-item".

  • Varje länk ska använda klassen ".page-link".

Standardpagineringen kommer att se ut som nedan:

Hur skapar jag Bootstrap 5 -paginering?

2 Lägga till ikoner för föregående och nästa

Som standard använder pagineringen text för föregående och nästa navigering. Du kan använda ikoner istället genom att använda koden nedan.

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

Eftersom ikoner inte kan läsas av synskadade användare, bör du använda föregående / nästa text för skärmläsarna som använder klassen ".sr-only". Detta kommer inte att visas i webbläsaren. Komponenten kommer att se ut nedan i webbläsaren:

Hur skapar jag Bootstrap 5 -paginering?

3 Visar aktiv länk och inaktiverar länk

Du kan visa den aktiva länken på pagineringen genom att lägga till ".active" -klassen till det önskade listobjektet. Lägg på samma sätt till ".disabled" -klassen för att inaktivera att klicka på den specifika länken. I exemplet nedan är den tidigare navigeringstexten inaktiverad och länk 2 visas som aktiv.

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

Klassen ".disabled" använder standard "pekarhändelser: ingen" CSS-egenskap. Detta inaktiverar att klicka med musen, men användare kan fortfarande använda tangentbordstangenten för att markera länken och trycka på mellanslagstangenten för att öppna den länkade sidan. Attributet tabindex = "-1 ″ används för att inaktivera länken för tangentbordsåtkomst.

Nedan ser du hur den aktiva länken kommer att visas på pagineringen. De inaktiverade länkarna visar stoppmarkörssymbolen när du flyttar musen över.

Hur skapar jag Bootstrap 5 -paginering?

4 stora och små paginationer

På samma sätt som de flesta andra Bootstrap 4 -komponenter kan paginering också ändras till större eller mindre. Den större bör innehålla klassen ".pagination-lg" med orörd lista som nedan:

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

Och rätt !!! Den mindre på ska innehålla klassen ".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>

Större och mindre pagineringskomponent kommer att se ut nedan:

Hur skapar jag Bootstrap 5 -paginering?

5 Mitt och högerjusterat

Sista variationen är inriktningen. Som standard kommer sidningskomponenten att justeras på vänster sida. Du kan göra det mitt eller höger med hjälp av ytterligare klasser. För mittjustering, lägg till ".justify-content-center" i den orordnade listan.

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

Och för rätt anpassning lägger du till ".justify-content-end" -klassen i den oordnade listan.

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

Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer