W3.CSS Пагінація
Основна пагінація
Якщо у вас вебсайт із багатьма сторінками, можливо, ви захочете використати певний вид розбивки сторінок.
Щоб створити базову пагінацію, використовуйте кнопки (w3-button) на панелі (w3-bar).
Приклад
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
Щоб видалити пробіл між кнопками, додайте клас w3-bar-item:
Приклад
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Стрілки пагінації
Використовуйте сутності HTML або піктограми з бібліотеки іконок, щоб додати стрілки пагінації:
Приклад
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Активне/поточне посилання
Використовуйте один із класів w3-color, щоб вказати, на якій сторінці перебуває користувач:
Приклад
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
Колір наведення
За замовчуванням, коли ви наводите курсор миші на посилання на сторінки, вони отримують сірий фоновий колір. Використовуйте будь-який із класів w3-hover-color, щоб змінити колір наведення:
Приклад
<div class="w3-bar">
<a href="#" class="w3-button w3-hover-purple">«</a>
<a href="#" class="w3-button w3-hover-green">1</a>
<a href="#" class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button w3-hover-blue">3</a>
<a href="#" class="w3-button w3-hover-black">4</a>
<a href="#" class="w3-button w3-hover-orange">»</a>
</div>
Розмір пагінації
Використовуйте розмір пагінації w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge або w3-xxxlarge:
Пагінація по центру
Щоб розмістити сторінки по центру, помістіть елемент w3-bar в елемент w3-center:
Приклад
<div class="w3-center">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
Пагінація в рамці
Додайте клас w3-border, щоб створити розбивку на сторінки з рамками:
Заокруглені межі
Додайте клас w3-round поруч із w3-border для округлених меж:
Інші приклади пагінації
Клас w3-bar також можна використовувати для створення наступних/попередніх кнопок:
Next/prev Приклад
<div class="w3-bar w3-border w3-round">
<a href="#" class="w3-button">❮ Previous</a>
<a href="#" class="w3-button w3-right">Next ❯</a>
</div>
Приклад вбудованого меню
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
