Pagination
Zolemba ndi zitsanzo zowonetsera zolemba zosonyeza mndandanda wazinthu zokhudzana nazo zilipo pamasamba angapo.
Mwachidule
Timagwiritsa ntchito maulalo ambiri olumikizidwa kumitundu yathu, zomwe zimapangitsa kuti maulalo akhale ovuta kuphonya komanso osavuta kuwonjeza-nthawi zonse ndikupereka madera akuluakulu. Pagination imapangidwa ndi mndandanda wazinthu za HTML kuti owerenga zenera athe kulengeza kuchuluka kwa maulalo omwe alipo. Gwiritsani ntchito <nav>
chinthu chomangirira kuti muzindikire ngati gawo loyang'ana powonera owerenga ndi matekinoloje ena othandizira.
Kuphatikiza apo, popeza masamba ali ndi magawo opitilira amodzi otere, ndibwino kuti mupereke zofotokozera aria-label
kuti <nav>
ziwonetse cholinga chake. Mwachitsanzo, ngati chigawo cha pagination chikugwiritsidwa ntchito poyang'ana pakati pa zotsatira zakusaka, chizindikiro choyenera chikhoza kukhala 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>
Kugwira ntchito ndi zithunzi
Mukuyang'ana kugwiritsa ntchito chithunzi kapena chizindikiro m'malo mwa mawu pamalumikizidwe amitundu? Onetsetsani kuti mukupereka chithandizo choyenera chowerengera chophimba ndi mawonekedwe aria
.
<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>
Mayiko olumala komanso ogwira ntchito
Maulalo aPagination amasinthidwa mwamakonda pamikhalidwe yosiyanasiyana. Gwiritsani .disabled
ntchito maulalo omwe akuwoneka ngati osadina .active
ndikuwonetsa tsamba lomwe lilipo.
Pomwe .disabled
kalasiyo imagwiritsa ntchito pointer-events: none
kuyesa kuletsa magwiridwe antchito a <a>
s, katundu wa CSS sunakhazikitsidwebe ndipo samawerengera pa kiyibodi. Chifukwa chake, nthawi zonse muyenera kuwonjezera tabindex="-1"
pa maulalo olemala ndikugwiritsa ntchito JavaScript kuti mulepheretse magwiridwe ake.
<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>
Mutha kusinthanso anangula omwe akugwira ntchito kapena olephereka a <span>
, kapena kusiya nangula ngati mivi yapitayi / yotsatira, kuti muchotse magwiridwe antchito ndikuletsa kuyang'ana kwa kiyibodi ndikusunga masitayelo omwe mukufuna.
<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>
Kukula
Mukufuna zokhala zazikulu kapena zazing'ono? Onjezani .pagination-lg
kapena .pagination-sm
ma size owonjezera.
<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>
Kuyanjanitsa
Sinthani masanjidwe a zigawo za pagination ndi zida za 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>