Paginacija
Dokumentacija i primjeri za prikaz paginacije za označavanje niza povezanih sadržaja postoje na više stranica.
Pregled
Koristimo veliki blok povezanih poveznica za našu paginaciju, čineći poveznice teško promašenim i lako skalabilnim—a sve dok pružamo velika područja pretraživanja. Paginacija je izgrađena pomoću HTML elemenata popisa kako bi čitači zaslona mogli objaviti broj dostupnih veza. Upotrijebite omotni <nav>
element da ga identificirate kao navigacijski odjeljak za čitače zaslona i druge pomoćne tehnologije.
Nadalje, budući da stranice vjerojatno imaju više od jednog takvog odjeljka za navigaciju, preporučljivo je pružiti opis aria-label
kako <nav>
bi odražavao njegovu svrhu. Na primjer, ako se komponenta paginacije koristi za navigaciju između niza rezultata pretraživanja, odgovarajuća bi oznaka mogla biti aria-label="Search results pages"
.
<nav aria-label="Page navigation example">
<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>
Rad sa ikonama
Želite koristiti ikonu ili simbol umjesto teksta za neke veze na stranice? Osigurajte ispravnu podršku za čitač zaslona s aria
atributima.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</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>
</a>
</li>
</ul>
</nav>
Onesposobljena i aktivna stanja
Veze na stranice mogu se prilagoditi različitim okolnostima. Koristite .disabled
za poveznice na koje se ne može kliknuti i .active
za označavanje trenutne stranice.
Iako .disabled
klasa pokušava onemogućiti funkcionalnost veze za s, to CSS svojstvo još nije standardizirano i ne uzima u obzir navigaciju tipkovnicom pointer-events: none
. Kao takvi, uvijek biste trebali dodavati onemogućene veze i koristiti prilagođeni JavaScript kako biste u potpunosti onemogućili njihovu funkcionalnost.<a>
tabindex="-1"
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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>
Po izboru možete zamijeniti aktivna ili onemogućena sidra za <span>
ili izostaviti sidro u slučaju strelica prethodno/sljedeće, kako biste uklonili funkciju klika i spriječili fokus tipkovnice uz zadržavanje željenih stilova.
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link">2</span>
</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>
Dimenzioniranje
Želite li veću ili manju paginaciju? Dodajte .pagination-lg
ili .pagination-sm
za dodatne veličine.
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>
Poravnanje
Promijenite poravnanje komponenti paginacije pomoću uslužnih programa flexbox .
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">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>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link">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>