Paginering i bootstrap 5

En paginering blir en nødvendighet hvis det er flere websider på nettstedet ditt fordi det hjelper en bruker å enkelt navigere gjennom disse sidene og også gjør brukeren oppmerksom på siden han/hun er på for øyeblikket. Hvis du designer nettstedet ditt ved hjelp av Bootstrap 5 og vil lære å lage og style en paginering ved hjelp av Bootstrap 5, kan du lese artikkelen til slutten.

Hvordan lage en paginering ved hjelp av bootstrap 5

For å lage en paginering, tilordne .paginering klasse til en uordnet liste, .Page-artikk klasse til listeartiklene og .Sidekobling klasse til lenken som er til stede i hvert listeelement.

Html

• «


• 1


• 2


• 3


• 4


• »

Ovennevnte kode genererer en paginering som viser nummerering fra 1 til 4, mens & Laquo og & Raquo er enhetsnavn for henholdsvis venstre-peke- og høyre-pekepinning. Disse enhetene hjelper brukeren med å flytte pagineringsnummerering bakover og fremover.

Produksjon

Utgangen viser en grunnleggende paginering.

Hvordan tilordne aktive og funksjonshemmede tilstander til en paginering

Den aktive tilstanden til en paginering viser siden brukeren for øyeblikket er på, mens den funksjonshemmede tilstanden gjør en kobling som ikke er klikkbar og gjør brukeren oppmerksom på at det ikke er ytterligere sider å navigere.

Html

• Tilbake


• 1


• 2


• 3


• 4


• NESTE

Kodebiten vil opprette en paginering med listeelementet merket "Back" som blir tildelt den funksjonshemmede tilstanden, i mellomtiden har den aktive tilstanden blitt tildelt listeelementet merket "4" som indikerer at brukeren for øyeblikket er på fjerde side.

Produksjon

De aktive og funksjonshemmede statene ble vellykket tildelt paginasjonen.

Hvordan du skal skalere en paginering

Hvis du ønsker å skalere paginasjonen din, så bruk .Pagination-SM klasse for å lage paginasjoner i små størrelse, mens du bruker .Pagination-LG å generere paginasjoner i stor størrelse.

Html

Koden over vil generere både små og store paginasjoner for å demonstrere sammenligningen mellom størrelser på begge paginasjoner.

Produksjon

Slik kan du skalere paginasjonen din.

Hvordan sette inn justering av en paginering

En paginering som standard er plassert på venstre hjørne av en side, men hvis du ønsker å plassere den i sentrum, så bruk deretter .Justify-Content-Center Klasse, mens du bruker .Justify-Content-End å plassere den på høyre hjørne av siden.

Html

Ovennevnte kode bruker .Justify-Content-Center-klassen, derfor vil paginasjonen som er opprettet som et resultat bli plassert i midten av siden.

Produksjon

Dette er et senterposisjonert paginering.

La oss nå plassere paginasjonen i høyre hjørne av siden.

Html

Koden over bruker .Justify-Content-End Class, derav paginasjonen vil bli plassert på slutten av siden.

Produksjon

Dette er en riktig plassert paginering.

Konklusjon

En paginering kan opprettes ved å tilordne .paginering klasse til en uordnet liste, .Page-artikk klasse til listeartiklene og .Sidekobling klasse til lenken som er til stede i hvert listeelement. Hvis du ønsker å skalere en paginering, så bruk .Pagination-SM, og .Pagination-LG klasser. For å samkjøre en paginering i sentrum eller på slutten av en side, bruk dessuten .Justify-Content-Center, og .Justify-Content-End henholdsvis klasser. Til slutt kan du også tildele aktive og disbalerte stater til paginasjonsartiklene.