W3.CSS Paginations
Если у вас есть веб-сайт с большим количеством страниц, вы можете добавить какую-то пагинацией к каждой странице:
Основные Pagination
Для того, чтобы создать базовую нумерацию страниц, добавить класс W3-разбиения на страницы к элементу с <UL>:
пример
<ul class="w3-pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Попробуй сам " Pagination Стрелки
Использование HTML-сущности или иконки из библиотеки иконок, чтобы добавить стрелки нумерации страниц:
пример
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul> Попробуй сам " Активный / Current Link
Используйте один из w3- цветовых классов , чтобы указать , на какой странице пользователь находится на:
пример
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a
class="w3-green" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul> Попробуй сам " Hover Цвет
По умолчанию, при перемещении мыши над постраничной ссылки, они получают серый цвет фона. Используйте любой из W3-hover- цветовых классов , чтобы изменить цвет парения:
пример
<ul class="w3-pagination">
<li><a href="#"
class="w3-hover-purple">«</a></li>
<li><a href="#"
class="w3-hover-green">1</a></li>
<li><a href="#"
class="w3-hover-red">2</a></li>
<li><a href="#"
class="w3-hover-blue">3</a></li>
<li><a href="#"
class="w3-hover-black">4</a></li>
<li><a href="#"
class="w3-hover-orange">»</a></li>
</ul> Попробуй сам " Разбивка Определение размеров
Используйте w3-крошечные, w3-маленький, w3 большой, w3-XLarge, w3-XXLarge или w3-XXXLarge к размеру постраничной:
Граничит Pagination
Добавьте класс W3 границу , чтобы создать нумерацию страниц с границами:
Округлые границы
Добавьте w3 круглый класс рядом с W3-за границы закругленными границ:
Сосредоточенный Pagination
Для размещения разбиения на страницы, обернуть <div> элемент с классом = "W3-центр" вокруг <ул>:
Другие примеры Pagination
Следующий / предыдущий пример
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> Попробуй сам " Пример меню
<ul class="w3-pagination w3-border">
<li><a href="#"
class="w3-light-grey">Home</a></li>
<li><a href="#">Link
1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link
3</a></li>
</ul> Попробуй сам "