Pruhy W3.CSS


Londýn
Paříž
Tokio
Londýn
Paříž
Tokio
Londýn
Paříž
Tokio
Londýn
Paříž
Tokio

Vodorovné pruhy

Vodorovné pruhy jsou běžné prvky webového designu:

Londýn
Paříž
Tokio

Třída w3-bar se používá ke stylování vodorovného pruhu:

Příklad

<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>

Účelem třídy w3-bar-item je poskytnout správné rozestupy, odsazení a umístění.


Svislé pruhy

Svislé pruhy (boční pruhy) jsou také běžné ve webovém designu:

Londýn
Paříž
Tokio

Třída w3-bar-block se používá ke stylování svislé čáry:

Příklad

<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>



Barvy pruhů

Pro styling lišty můžete použít jakoukoli barvu:

Londýn
Paříž
Tokio
Londýn
Paříž
Tokio
Londýn
Paříž
Tokio
Londýn
Paříž
Tokio

Příklad

<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>


Vznášet barvy

Ke stylování pruhu můžete použít libovolnou barvu při najetí myší:

Chcete-li vidět efekt, umístěte kurzor myši na položky lišty:

Londýn
Paříž
Tokio

Londýn
Paříž
Tokio

Příklad

<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>


Bar Links

Poskytování navigace je typické použití pro lišty:


Příklad

<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>


Barová tlačítka

Třída tlačítka w3 je ideální pro stylování odkazů v liště.

Chcete-li vidět efekt, umístěte kurzor myši na položky lišty:

Londýn
Paříž
Tokio

Londýn
Paříž
Tokio

Příklad

<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>


Responzivní lišta

Třída w3-mobile je ideální k tomu, aby položky baru byly responzivní.

Změňte velikost okna, abyste viděli efekt:

Londýn
Paříž
Tokio

Příklad

<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>


Položky zarovnané vpravo

Třída w3-right je ideální pro vytváření položek pruhů zarovnaných doprava:

Londýn
Paříž
Tokio

Příklad

<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>