Обзор
Мы используем большой блок связанных ссылок для нашей нумерации страниц, что делает ссылки труднодоступными и легко масштабируемыми, обеспечивая при этом большие области попадания. Разбивка на страницы построена с помощью элементов списка 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
атрибутами.
<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>
Отключенные и активные состояния
Ссылки пагинации настраиваются для разных обстоятельств. Используйте .disabled
для ссылок, которые кажутся неактивными, и .active
для обозначения текущей страницы.
В то время как .disabled
класс использует pointer-events: none
, чтобы попытаться отключить функциональность линии связи <a>
, что свойство CSS еще не стандартизированы и не учитывает клавиатурной навигации. Таким образом, вы всегда должны добавлять tabindex="-1"
отключенные ссылки и использовать собственный JavaScript, чтобы полностью отключить их функциональность.
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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 <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" aria-current="page">
<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 active" aria-current="page">
<span class="page-link">
1
<span class="sr-only">(current)</span>
</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 class="sr-only">(current)</span>
</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>
Выравнивание
Измените выравнивание компонентов разбиения на страницы с помощью утилит 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" aria-disabled="true">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" aria-disabled="true">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>