W3.CSS Bary
Drążki gimnastyczne
Poziome paski są typowymi elementami projektowania stron internetowych:
Klasa w3-bar służy do stylizacji poziomego paska:
Przykład
<div class="w3-bar w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Celem klasy w3-bar-item jest zapewnienie prawidłowych odstępów, wypełnienia i pozycjonowania.
Pręty pionowe
Pionowe paski (paski boczne) są również powszechne w projektowaniu stron internetowych:
Klasa w3-bar-block służy do stylizacji pionowego paska:
Przykład
<div class="w3-bar-block w3-green">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Kolory paska
Do stylizacji paska możesz użyć dowolnego koloru:
Przykład
<div class="w3-bar w3-black">
<div class="w3-bar-item">London</div>
<div class="w3-bar-item">Paris</div>
<div class="w3-bar-item">Tokyo</div>
</div>
Kolory kursora
Do stylizacji paska można użyć dowolnego koloru najechania kursorem:
Najedź myszą na elementy paska, aby zobaczyć efekt:
Przykład
<div class="w3-bar w3-black">
<div class="w3-bar-item w3-hover-red">London</div>
<div class="w3-bar-item w3-hover-green">Paris</div>
<div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>
Linki do paska
Zapewnienie nawigacji to typowe zastosowanie pasków:
Przykład
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-hover-green">London</a>
<a href="#" class="w3-bar-item w3-hover-green">Paris</a>
<a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>
Przyciski na pasku
Klasa w3-button jest idealna do stylizacji linków w barze.
Najedź myszą na elementy paska, aby zobaczyć efekt:
Przykład
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>
Responsywny pasek
Klasa w3-mobile jest idealna do tworzenia responsywnych elementów barowych.
Zmień rozmiar okna, aby zobaczyć efekt:
Przykład
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>
Elementy wyrównane do prawej strony
Klasa w3-right jest idealna do wyrównywania elementów prętowych do prawej:
Przykład
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">London</a>
<a href="#" class="w3-bar-item w3-button">Paris</a>
<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>