Bootstrap Pagination (Пагинация)

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

Обзор

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

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

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

Результат:

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

Хотите использовать значок или символ вместо текста для некоторых ссылок с разбиением на страницы? Обязательно обеспечьте надлежащую поддержку программы чтения с экрана с помощью атрибутов aria.

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

Результат:

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Предыдущая страница</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>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Далее</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>
    </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>
    </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. Например, с помощью .justify-content-center:

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

Результат:

Или с .justify-content-end:

<nav aria-label="Пример навигации по страницам">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">Предыдущая страница</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="#">Далее</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 .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-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};
}

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