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

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

Нумерация по умолчанию

Чтобы создать нумерацию страниц по умолчанию, добавьте class="pagination" к элементу <ul>, который представляет список страниц. Также добавьте .page-item к каждому элементу <li> и .page-link к каждому элементу <a>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<nav>
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Предыдущая">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
    <li class="page-item"><a href="#" class="page-link">6</a></li>
    <li class="page-item"><a href="#" class="page-link">7</a></li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Следующая">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 требует только класс .pagination. Bootstrap 4, в дополнение к классу .pagination, также требует, чтобы класс .page-item был добавлен к каждому элементу <li>, а класс .page-link к каждому элементу <a>.

Активное состояние для текущей страницы

Добавьте класс .active к элементу <li>, который представляет текущую страницу (страницу, на которой сейчас находится пользователь).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<nav>
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Предыдущая">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item active"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
    <li class="page-item"><a href="#" class="page-link">6</a></li>
    <li class="page-item"><a href="#" class="page-link">7</a></li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Следующая">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Отключение пункта

Добавьте класс .disabled к элементу <li>, чтобы отключить данный пункт.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<nav>
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Предыдущая">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item disabled"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
    <li class="page-item"><a href="#" class="page-link">6</a></li>
    <li class="page-item"><a href="#" class="page-link">7</a></li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Следующая">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Размер нумерации

Добавьте класс .pagination-lg или .pagination-sm к элементу <ul>, чтобы увеличить или уменьшить размер элементов управления нумерацией.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<nav>
  <ul class="pagination pagination-lg">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Предыдущая">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
    <li class="page-item"><a href="#" class="page-link">6</a></li>
    <li class="page-item"><a href="#" class="page-link">7</a></li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Следующая">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

<nav>
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Предыдущая">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
    <li class="page-item"><a href="#" class="page-link">6</a></li>
    <li class="page-item"><a href="#" class="page-link">7</a></li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Следующая">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

<nav>
  <ul class="pagination pagination-sm">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Предыдущая">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
    <li class="page-item"><a href="#" class="page-link">6</a></li>
    <li class="page-item"><a href="#" class="page-link">7</a></li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Следующая">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 поддерживает пейджеры (для обеспечения работы перехода к предыдущей или следующей странице). Пейджеры были удалены из Bootstrap 4.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.11.2019
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid