Пагинация
Документация и примери за показване на пагинация, за да се посочи, че поредица от свързано съдържание съществува на множество страници.
Ние използваме голям блок от свързани връзки за нашата пагинация, което прави връзките трудни за пропускане и лесни за мащабиране - като същевременно осигуряваме големи зони на попадение. Страницирането е изградено със списъчни HTML елементи, така че екранните четци да могат да съобщават броя на наличните връзки. Използвайте обвиващ <nav>
елемент, за да го идентифицирате като навигационен раздел за екранни четци и други помощни технологии.
Освен това, тъй като страниците вероятно имат повече от една такава секция за навигация, препоръчително е да предоставите описание aria-label
, за <nav>
да отразите нейната цел. Например, ако компонентът за страниране се използва за навигация между набор от резултати от търсене, подходящ етикет може да бъде 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>
Търсите да използвате икона или символ вместо текст за някои връзки към страници? Уверете се, че сте предоставили подходяща поддръжка на екранен четец с aria
атрибути и .sr-only
помощната програма.
<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>
<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>
Връзките към страници могат да се персонализират за различни обстоятелства. Използвайте .disabled
за връзки, които изглеждат невъзможни за кликване и .active
за обозначаване на текущата страница.
Въпреки че .disabled
класът използва pointer-events: none
, за да се опита да деактивира функционалността на връзката на <a>
s, това CSS свойство все още не е стандартизирано и не отчита навигацията от клавиатурата. Поради това винаги трябва да добавяте tabindex="-1"
деактивирани връзки и да използвате персонализиран JavaScript, за да деактивирате напълно тяхната функционалност.
<nav aria-label="...">
<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">(current)</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>
По желание можете да замените активни или деактивирани котви за <span>
или да пропуснете котвата в случай на стрелките предишна/следваща, за да премахнете функционалността на щракване и да предотвратите фокусирането на клавиатурата, като същевременно запазите предвидените стилове.
<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">
<span class="page-link">
2
<span class="sr-only">(current)</span>
</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>
Искате ли по-голяма или по-малка пагинация? Добавете .pagination-lg
или .pagination-sm
за допълнителни размери.
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>
</ul>
</nav>
Променете подравняването на компонентите за страниране с помощните програми на flexbox .
<nav aria-label="Page navigation example">
<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>
<nav aria-label="Page navigation example">
<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>