Нумерация страниц

Документация и примеры отображения разбивки на страницы существующего материала на нескольких страницах.

alrosadiamond.ru

Дизайнерские украшения с бриллиантами ALROSA Diamonds

На этой странице

maxim-demidov.ru

Эксклюзивные дорогие ювелирные кольца с турмалином

Адреса бутиков

Выбор знаменитостей

Изделия от 100 000 руб.

Коллекции

Обзор

Мы используем большой блок связанных ссылок для нашей нумерации страниц, что делает ссылки труднодоступными и легко масштабируемыми, обеспечивая при этом большие области попадания. Разбивка на страницы построена с помощью элементов списка HTML, поэтому программы чтения с экрана могут объявлять количество доступных ссылок. Используйте оборачивающий элемент <nav>, чтобы идентифицировать его как раздел навигации для программ чтения с экрана и других вспомогательных технологий.

Кроме того, поскольку страницы, вероятно, имеют более одного такого раздела навигации, рекомендуется предоставить описательный aria-label для <nav>, чтобы отразить его назначение. Например, если компонент разбивки на страницы используется для навигации между набором результатов поиска, подходящей меткой может быть aria-label="Search results pages".

html

<navaria-label="Пример навигации по страницам"><ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#">Предыдущая</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="#">Следующая</a></li></ul></nav>

Работа с иконками

Хотите использовать иконку или символ вместо текста нумерации страниц? Для правильной работы экранной читалки удостоверьтесь, что задали правильные атрибуты aria.

html

<navaria-label="Пример навигации по страницам"><ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#"aria-label="Предыдущая"><spanaria-hidden="true">&laquo;</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="Следующая"><spanaria-hidden="true">&raquo;</span></a></li></ul></nav>

Отключенные и активные состояния

Ссылки пагинации настраиваются для разных обстоятельств. Используйте .disabled для ссылок, которые кажутся неактивными, и .active, чтобы указать текущую страницу.

В то время как класс .disabled использует pointer-events: none для попыток отключить функциональность ссылок <a>, это свойство CSS еще не стандартизировано и не учитывает навигацию с клавиатуры. Таким образом, Вы всегда должны добавлять tabindex="-1" для отключенных ссылок и использовать собственный JavaScript для полного отключения их функций.

html

<navaria-label="..."><ulclass="pagination"><liclass="page-item disabled"><aclass="page-link">Предыдущая</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="#">Следующая</a></li></ul></nav>

При желании Вы можете заменить активные или отключенные привязки на <span>, или опустить привязку в случае стрелок предыдущая/следующая, чтобы удалить функцию щелчка и предотвратить фокусировку клавиатуры при сохранении заданных стилей.

html

<navaria-label="..."><ulclass="pagination"><liclass="page-item disabled"><spanclass="page-link">Предыдущая</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="#">Следующая</a></li></ul></nav>

Размеры

Добавьте классы .pagination-lg или .pagination-sm для создания дополнительных размеров.

html

<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>

html

<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>

Выравнивание

Измените выравнивание компонентов пагинации с помощью утилит flexbox. Например, с помощью .justify-content-center:

html

<navaria-label="Пример навигации по страницам"><ulclass="pagination justify-content-center"><liclass="page-item disabled"><aclass="page-link">Предыдущая</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="#">Следующая</a></li></ul></nav>

Или с помощью .justify-content-end:

html

<navaria-label="Пример навигации по страницам"><ulclass="pagination justify-content-end"><liclass="page-item disabled"><aclass="page-link">Предыдущая</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="#">Следующая</a></li></ul></nav>

CSS

Переменные

Добавлено в версии 5.2.0

Как часть развивающегося подхода Bootstrap к переменным CSS, разбиение на страницы теперь использует локальные переменные CSS в .pagination для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

scss/_pagination.scss

--#{$prefix}pagination-padding-x:#{$pagination-padding-x};--#{$prefix}pagination-padding-y:#{$pagination-padding-y};@include rfs($pagination-font-size,--#{$prefix}pagination-font-size);--#{$prefix}pagination-color:#{$pagination-color};--#{$prefix}pagination-bg:#{$pagination-bg};--#{$prefix}pagination-border-width:#{$pagination-border-width};--#{$prefix}pagination-border-color:#{$pagination-border-color};--#{$prefix}pagination-border-radius:#{$pagination-border-radius};--#{$prefix}pagination-hover-color:#{$pagination-hover-color};--#{$prefix}pagination-hover-bg:#{$pagination-hover-bg};--#{$prefix}pagination-hover-border-color:#{$pagination-hover-border-color};--#{$prefix}pagination-focus-color:#{$pagination-focus-color};--#{$prefix}pagination-focus-bg:#{$pagination-focus-bg};--#{$prefix}pagination-focus-box-shadow:#{$pagination-focus-box-shadow};--#{$prefix}pagination-active-color:#{$pagination-active-color};--#{$prefix}pagination-active-bg:#{$pagination-active-bg};--#{$prefix}pagination-active-border-color:#{$pagination-active-border-color};--#{$prefix}pagination-disabled-color:#{$pagination-disabled-color};--#{$prefix}pagination-disabled-bg:#{$pagination-disabled-bg};--#{$prefix}pagination-disabled-border-color:#{$pagination-disabled-border-color};

Переменные Sass

scss/_variables.scss

$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-font-size:$font-size-base;$pagination-color:var(--#{$prefix}link-color);$pagination-bg:var(--#{$prefix}body-bg);$pagination-border-radius:var(--#{$prefix}border-radius);$pagination-border-width:var(--#{$prefix}border-width);$pagination-margin-start:calc(#{$pagination-border-width}*-1);// stylelint-disable-line function-disallowed-list
$pagination-border-color:var(--#{$prefix}border-color);$pagination-focus-color:var(--#{$prefix}link-hover-color);$pagination-focus-bg:var(--#{$prefix}secondary-bg);$pagination-focus-box-shadow:$focus-ring-box-shadow;$pagination-focus-outline:0;$pagination-hover-color:var(--#{$prefix}link-hover-color);$pagination-hover-bg:var(--#{$prefix}tertiary-bg);$pagination-hover-border-color:var(--#{$prefix}border-color);// Todo in v6: remove this?
$pagination-active-color:$component-active-color;$pagination-active-bg:$component-active-bg;$pagination-active-border-color:$component-active-bg;$pagination-disabled-color:var(--#{$prefix}secondary-color);$pagination-disabled-bg:var(--#{$prefix}secondary-bg);$pagination-disabled-border-color:var(--#{$prefix}border-color);$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:var(--#{$prefix}border-radius-sm);$pagination-border-radius-lg:var(--#{$prefix}border-radius-lg);

Миксины Sass

scss/mixins/_pagination.scss

@mixin pagination-size($padding-y,$padding-x,$font-size,$border-radius){--#{$prefix}pagination-padding-x:#{$padding-x};--#{$prefix}pagination-padding-y:#{$padding-y};@include rfs($font-size,--#{$prefix}pagination-font-size);--#{$prefix}pagination-border-radius:#{$border-radius};}