W3.CSS Paginacja
Podstawowa paginacja
Jeśli masz witrynę internetową z wieloma stronami, możesz użyć pewnego rodzaju paginacji.
Aby utworzyć podstawową paginację, użyj przycisków ( w3-button ) w pasku ( w3-bar ).
Przykład
<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>
Aby usunąć spację między przyciskami, dodaj klasę w3-bar-item :
Przykład
<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>
Strzałki stronicowania
Użyj encji HTML lub ikon z biblioteki ikon, aby dodać strzałki stronicowania:
Przykład
<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>
Aktywne/bieżące łącze
Użyj jednej z klas kolorów w3 , aby wskazać, na której stronie znajduje się użytkownik:
Przykład
<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>
Kolor kursora
Domyślnie, po najechaniu myszą na linki stronicowania, otrzymują one szary kolor tła. Użyj dowolnej z klas w3-hover- color , aby zmienić kolor najechania:
Przykład
<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>
Rozmiary stronicowania
Użyj w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge lub w3-xxxlarge , aby określić rozmiar paginacji:
Przykład
<div class="w3-bar
w3-xlarge">
Wyśrodkowana paginacja
Aby wyśrodkować paginację, umieść element „w3-bar” wewnątrz elementu „w3-center”:
Przykład
<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>
Paginacja obramowana
Dodaj klasę w3-border , aby utworzyć paginację z obramowaniem:
Przykład
<div class="w3-bar
w3-border">
Zaokrąglone granice
Dodaj klasę w3-round obok w3-border dla zaokrąglonych granic:
Przykład
<div class="w3-bar
w3-border w3-round">
Inne przykłady paginacji
Klasa w3-bar może być również użyta do tworzenia przycisków następny/poprzedni:
Następny/poprzedni przykład
<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>
Przykład menu wbudowanego
<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>