Нумерация страниц
Документация и примеры отображения разбивки на страницы существующего материала на нескольких страницах.
Обзор
Мы используем большой блок связанных между собой ссылок для нумерации страниц, который делает ссылки легко заметными и доступными подсчету – и с большой «зоной клика». Нумерация страниц создана списком элементов 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.
<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</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</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</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</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>Sass
Переменные
$pagination-padding-y:.375rem;$pagination-padding-x:.75rem;$pagination-padding-y-sm:.25rem;$pagination-padding-x-sm:.5rem;$pagination-padding-y-lg:.75rem;$pagination-padding-x-lg:1.5rem;$pagination-color:$link-color;$pagination-bg:$white;$pagination-border-width:$border-width;$pagination-border-radius:$border-radius;$pagination-margin-start:-$pagination-border-width;$pagination-border-color:$gray-300;$pagination-focus-color:$link-hover-color;$pagination-focus-bg:$gray-200;$pagination-focus-box-shadow:$input-btn-focus-box-shadow;$pagination-focus-outline:0;$pagination-hover-color:$link-hover-color;$pagination-hover-bg:$gray-200;$pagination-hover-border-color:$gray-300;$pagination-active-color:$component-active-color;$pagination-active-bg:$component-active-bg;$pagination-active-border-color:$pagination-active-bg;$pagination-disabled-color:$gray-600;$pagination-disabled-bg:$white;$pagination-disabled-border-color:$gray-300;$pagination-transition:color.15sease-in-out,background-color.15sease-in-out,border-color.15sease-in-out,box-shadow.15sease-in-out;$pagination-border-radius-sm:$border-radius-sm;$pagination-border-radius-lg:$border-radius-lg;Миксины
@mixin pagination-size($padding-y,$padding-x,$font-size,$border-radius){.page-link{padding:$padding-y$padding-x;@include font-size($font-size);}.page-item{@if$pagination-margin-start==(-$pagination-border-width){&:first-child{.page-link{@include border-start-radius($border-radius);}}&:last-child{.page-link{@include border-end-radius($border-radius);}}}@else{//Add border-radius to all pageLinks in case they have left margin
.page-link{@include border-radius($border-radius);}}}}