Нумерация страниц
Документация и примеры ссылок постраничного разделения для обозначения серии связанного контента на несколько страниц.
Обзор
Мы используем большой блок связанных между собой ссылок для нумерации страниц, который делает ссылки легко заметными и доступными подсчету – и с большой «зоной клика». Нумерация страниц создана списком элементов HTML, так что экранные читалки могут объявлять число доступных страниц. Оборачивайте всё в <nav> для возможности определять эту секцию как секцию навигации для экранных читалок и прочих вспомогательных технологий.
В дополнение – так как страницы с большой вероятностью имеют более одной навигационной секции – рекомендуется описывать назначение <nav> через aria-label. Например – если компонент нумерации страниц используется для навигации между набором результатов поиска – правильным лейблом был бы aria-label="Search results pages".
<navaria-label="Page navigation example"><ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></nav>Работа с иконками
Хотите использовать иконку или символ вместо текста нумерации страниц? Для правильной работы экранной читалки удостоверьтесь, что задали правильные атрибуты aria и класс .sr-only.
<navaria-label="Page navigation example"><ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#"aria-label="Previous"><spanaria-hidden="true">«</span></a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#"aria-label="Next"><spanaria-hidden="true">»</span></a></li></ul></nav>Неактивные и активные состояния
Ссылки в нумерации страниц можно настраивать под разные обстоятельства. Используйте класс .disabled для ссылок, которые должны выглядеть некликабельными, и .active - для обозначения текущей страницы.
Хотя в классе .disabled для попытки деактивации ссылочной функциональности элементов <a> используется pointer-events: none, это свойство СSS еще не стандартизировано и не подходит для навигации с клавиатуры. Поэтому вам следует добавлять tabindex="-1" в деактивированные ссылки и использовать JavaScript для полной деактивации их функциональности.
<navaria-label="..."><ulclass="pagination"><liclass="page-item disabled"><aclass="page-link"href="#"tabindex="-1"aria-disabled="true">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item active"aria-current="page"><aclass="page-link"href="#">2 <spanclass="sr-only">(current)</span></a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></nav>Вы можете по желанию поменять\удалить активные или неактивные ссылки, связанные со <span>, или для удаления функциональности «клика» и предотвращения возможности фокусировки с клавиатуры, но с оставлением всех желаемых стилей, - исключить «якорь» в случае существования стрелок «пред\след».
<navaria-label="..."><ulclass="pagination"><liclass="page-item disabled"><spanclass="page-link">Previous</span></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item active"aria-current="page"><spanclass="page-link"> 2 <spanclass="sr-only">(current)</span></span></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></nav>Размеры
Добавьте классы .pagination-lg или .pagination-sm для создания дополнительных размеров.
<navaria-label="..."><ulclass="pagination pagination-lg"><liclass="page-item active"aria-current="page"><spanclass="page-link"> 1 <spanclass="sr-only">(current)</span></span></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li></ul></nav><navaria-label="..."><ulclass="pagination pagination-sm"><liclass="page-item active"aria-current="page"><spanclass="page-link"> 1 <spanclass="sr-only">(current)</span></span></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li></ul></nav>Выравнивание
Изменяйте выравнивание элементов нумерации классами флексбокса.
<navaria-label="Page navigation example"><ulclass="pagination justify-content-center"><liclass="page-item disabled"><aclass="page-link"href="#"tabindex="-1"aria-disabled="true">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></nav><navaria-label="Page navigation example"><ulclass="pagination justify-content-end"><liclass="page-item disabled"><aclass="page-link"href="#"tabindex="-1"aria-disabled="true">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></nav>