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/Previous (Следующая/Предыдущая)
<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">Главная</a>
<a href="#" class="w3-bar-item w3-button">Ссылка 1</a>
<a href="#" class="w3-bar-item w3-button">Ссылка 2</a>
<a href="#" class="w3-bar-item w3-button">Ссылка 3</a>
</div>
</div>
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
