W3.CSS Paginations
Jeśli masz stronę internetową z dużą ilością stron, możesz dodać jakieś paginacji na każdej stronie:
Podstawowe Pagination
Aby utworzyć podstawowy podział na strony, dodać klasę w3-paginacji do <ul> element:
Przykład
<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> Spróbuj sam " Strzałki paginacji
Użyj podmioty HTML lub ikony z biblioteki, aby dodać ikonę strzałki paginacji:
Przykład
<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> Spróbuj sam " Aktywny / Aktualny link
Użyj jednego z w3- klas kolorów, aby wskazać, która strona użytkownik jest na:
Przykład
<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> Spróbuj sam " Hover Kolor
Domyślnie podczas przesuwania myszy nad linków paginacji, dostają szary kolor tła. Użyj dowolnej klasy kolorów W3-hover- zmienić kolor kursorem:
Przykład
<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> Spróbuj sam " paginacja Rozmiary
Użyj w3-tiny, w3-małe, w3-duże, w3-XLarge, w3-XXLarge lub w3-xxxlarge wielkości paginacji:
Z ramką Pagination
Dodaj klasę w3 granicznego stworzyć podział na strony z granicami:
zaokrąglone krawędzie
Dodaj klasę w3-round obok w3-granicy do granicy zaokrąglonymi:
centered Pagination
Aby wyśrodkować paginacji, zawinąć <div> class = "w3-center" wokół <ul>:
Przykład
<div class="w3-center">
<ul class="w3-pagination
w3-xlarge">
...
</ul>
</div> Spróbuj sam " Inne przykłady paginacji
Następny / poprzedni Przykład
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> Spróbuj sam " Przykład menu
<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> Spróbuj sam "