Нумерація сторінок в Bootstrap 4

Клас .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>

Активний стан для поточної сторінки

Додайте клас .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>