Руководство Bootstrap Pagination

1- Pagination (Пагинация)

Если у вас есть страница с большим количеством данных (или что-то наподобии), оно будет слишком длинное для отображения на единственной странице, поэтому вам нужно разделить данные на разные части. Каждая часть это страница, она отображает только некоторые данные и вам нужно собрать ссылки (Link), чтобы пользователь переходил к следующей странице (Или предыдущей странице). Набор этих ссылок называется компонент  Pagination (Компонент Пагинации).Пример  Pagination (Компонент Пагинации):В данной статье мы изучим как создать компонент Pagination (Компонент Пагинации) с помощью  Bootstrap.

<h4 class="mb-5">Pagination example:</h4>
 
<nav aria-label="Search results pages">
   <ul class="pagination">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
      </li>
   </ul>
</nav>

Это структура  Bootstrap Pagination:
На самом деле вы можете создать компонент  Bootstrap Pagination без применения элемента  <nav>, но рекомендуется этого не делать. Так как <nav> похож на подсказку, что это навигационная зона, и имеет пользу для таких устройств как  Screen Reader. Вы можете заменить  <nav> с помощью  <div role="nav"> чтобы получить индентичное значение.

<nav aria-label="Search results pages">
   ...
</nav>
 
 
<div role="nav" aria-label="Search results pages">
  ...
</div>

Icon

Элементы  "Next" или  "Previous" можно заменить иконками, но стоит оставить подсказки для Screen Reader используя  ".sr-only", данный элемент полностью скрыт для всех устройств за исключением  Screen Reader.

<h4 class="mb-5">Pagination example:</h4>
 
<nav aria-label="Page navigation example">
   <ul class="pagination">
      <li class="page-item">
         <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</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>
         <span class="sr-only">Next</span>
         </a>
      </li>
   </ul>
</nav>

2- .disable & .active

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

<h4 class="mb-5">Pagination (.active & .disabled):</h4>
 
<nav aria-label="Something..">
   <ul class="pagination">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</a>
      </li>
      <li class="page-item">
         <a class="page-link" href="#">1</a>
      </li>
      <li class="page-item active">
         <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
         <a class="page-link" href="#">Next</a>
      </li>
   </ul>
</nav>

3- Размер (Sizing)

Если вы хотите, чтобы компонент  Pagination немного увеличился, используйте класс  .pagination-lg:

<h5 class="mb-2">Pagination (.pagination .pagination-lg):</h5>
 
<nav aria-label="Something">
   <ul class="pagination pagination-lg">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">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>
   </ul>
</nav>

Или если вы хотите иметь  Pagination меньше, используйте класс  .pagination-sm:

<h5 class="mb-2">Pagination (.pagination .pagination-sm):</h5>
 
<nav aria-label="Something">
   <ul class="pagination pagination-sm">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">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>
   </ul>
</nav>

4- Justify (Выравнивание)

Bootstrap Pagination на самом деле является  Flex Container, так как он был построен Css property {display: flex}. Поэтому некоторые утилитарные классы  Bootstrap Flex могут применяться для  Pagination:

• justify-content-start
• justify-content-center
• justify-content-end
• justify-content-between
• justify-content-around

.pagination .justify-content-center

<h6 class="mb-3">.pagination .justify-content-center</h6>
 
<nav aria-label="Something">
   <ul class="pagination justify-content-center bg-light">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
      </li>
   </ul>
</nav>

.pagination .justify-content-end

<h6 class="mb-3">.pagination .justify-content-end</h6>
 
<nav aria-label="Something">
   <ul class="pagination justify-content-end bg-light">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
      </li>
   </ul>
</nav>