Pagination
Documenta et exempla praebendae paginae ad indicandam seriem contentorum relatorum per plures paginas existit.
Overview
Magnum truncum nexuum nexuum ad nostram paginationem utimur, nexus difficiles fallendi ac facile scalabiles faciendos, omnes areas magnas praebens. Pagination cum indice HTML elementorum constructum est ita lectorum screen numerum nexuum promptorum annunciare potest. Elemento involuto utere <nav>
ut sectionem navigationis eam cognoscas ad lectores protegendos et alia technologia adiuvantia.
Praeterea, cum paginae verisimile plus quam unam sectionem navigationis haberent, visum est descriptionem aria-label
ad propositum <nav>
suum reflectere. Exempli gratia, si paginationis pars inter certa eventus investigationis navigare adhibetur, congruens titulus esse potest 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>
Opus cum iconibus
Vultus uti icon vel symbolum loco textus aliquot nexus paginationis? Vide ut lectori velamentum proprium subsidium aria
attributis.
<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>
Debilitatum et active civitatibus
Pagination nexus sunt customizabiles pro diversis adiunctis. Utere .disabled
ad nexus qui un-clickable apparent, et .active
paginam hodiernam indicant.
Dum .disabled
classis utitur pointer-events: none
ut nexum functionis s inactivare conetur<a>
, proprietas CSS nondum normatum est et navigationis claviaturae rationem non facit. Quale, semper debes addere tabindex="-1"
nexus debiles et consuetudo JavaScript ad usum eorum functionality plene disable.
<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>
Anchoras activas vel debiles emittere optione potes <span>
, vel ancoram omitte in casu sagittae proximae proximae, ut clicca functionem removeas et ne umbilicum claviaturae servatis stylis intentis.
<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>
inspectionem
Fac maiorem vel minorem paginationem? Add .pagination-lg
or .pagination-sm
for additional sizes.
<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>
Gratia diei et noctis
Notionem paginationis mutant cum utilitatibus 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>