W3.CSS Stránkování
Základní stránkování
Pokud máte web s mnoha stránkami, možná budete chtít použít nějaký druh stránkování.
Pro vytvoření základního stránkování použijte tlačítka ( w3-button ) v pruhu ( w3-bar ).
Příklad
<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>
Chcete-li odstranit mezeru mezi tlačítky, přidejte třídu w3-bar-item :
Příklad
<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>
Šipky stránkování
Pomocí entit HTML nebo ikon z knihovny ikon přidejte šipky stránkování:
Příklad
<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>
Aktivní/aktuální odkaz
Pomocí jedné z tříd barev w3- označte, na které stránce se uživatel nachází:
Příklad
<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>
Barva přechodu
Ve výchozím nastavení, když najedete myší na stránkovací odkazy, získají šedou barvu pozadí. Ke změně barvy přechodu použijte kteroukoli z tříd w3- hover- color :
Příklad
<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>
Velikost stránkování
K nastavení velikosti stránkování použijte w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge nebo w3-xxxlarge :
Příklad
<div class="w3-bar
w3-xlarge">
Stránkování na střed
Chcete-li vycentrovat stránkování, vložte prvek „w3-bar“ do prvku „w3-center“:
Příklad
<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>
Ohraničené stránkování
Přidejte třídu w3-border a vytvořte stránkování s ohraničením:
Příklad
<div class="w3-bar
w3-border">
Zaoblené hranice
Přidejte třídu w3-round vedle w3-border pro zaoblené okraje:
Příklad
<div class="w3-bar
w3-border w3-round">
Další příklady stránkování
Třídu w3-bar lze také použít k vytvoření dalších/předchozích tlačítek:
Další/předchozí Příklad
<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>
Příklad inline nabídky
<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>