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 для размера разбиения на страницы:
Пример
<div class="w3-bar
w3-xlarge">
Пагинация по центру
Чтобы центрировать разбиение на страницы, поместите элемент «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 , чтобы создать разбиение на страницы с границами:
Пример
<div class="w3-bar
w3-border">
Закругленные границы
Добавьте класс w3-round рядом с w3-border для закругленных границ:
Пример
<div class="w3-bar
w3-border w3-round">
Другие примеры нумерации страниц
Класс w3-bar также можно использовать для создания кнопок «следующий/предыдущий»:
Следующий/предыдущий пример
<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>