W3.CSS- Leisten
Horizontale Balken
Horizontale Balken sind gängige Webdesign-Elemente:
Die w3-bar- Klasse wird verwendet, um einen horizontalen Balken zu stylen:
Beispiel
<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>
Der Zweck der w3-bar-item- Klasse besteht darin, korrekte Abstände, Polsterung und Positionierung bereitzustellen.
Vertikale Balken
Vertikale Balken (Sidebars) sind auch im Webdesign üblich:
Die Klasse w3-bar-block wird verwendet, um einen vertikalen Balken zu formatieren:
Beispiel
<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>
Balkenfarben
Sie können eine beliebige Farbe verwenden, um einen Balken zu gestalten:
Beispiel
<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>
Hover-Farben
Sie können eine beliebige Hover-Farbe verwenden, um eine Leiste zu gestalten:
Bewegen Sie die Maus über die Balkenelemente, um den Effekt zu sehen:
Beispiel
<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
Die Bereitstellung der Navigation ist eine typische Verwendung für Balken:
Beispiel
<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>
Balken-Schaltflächen
Die Klasse w3-button eignet sich perfekt zum Stylen von Links in einer Bar.
Bewegen Sie die Maus über die Balkenelemente, um den Effekt zu sehen:
Beispiel
<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>
Responsive Leiste
Die w3-mobile- Klasse ist perfekt, um Barartikel responsive zu machen.
Ändern Sie die Größe des Fensters, um den Effekt zu sehen:
Beispiel
<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>
Elemente der rechtsbündigen Leiste
Die w3-right- Klasse ist perfekt, um Balkenelemente rechtsbündig zu machen:
Beispiel
<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>