Barras W3.CSS
Barras horizontales
Las barras horizontales son elementos comunes de diseño web:
La clase w3-bar se usa para diseñar una barra horizontal:
Ejemplo
<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>
El propósito de la clase w3-bar-item es proporcionar el espaciado, el relleno y el posicionamiento correctos.
Barras Verticales
Las barras verticales (barras laterales) también son comunes en el diseño web:
La clase w3-bar-block se usa para diseñar una barra vertical:
Ejemplo
<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>
Colores de barra
Puedes usar cualquier color para darle estilo a una barra:
Ejemplo
<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>
Colores flotantes
Puede usar cualquier color de desplazamiento para diseñar una barra:
Pase el mouse sobre los elementos de la barra para ver el efecto:
Ejemplo
<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>
Enlaces de barra
Proporcionar navegación es un uso típico de las barras:
Ejemplo
<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>
Botones de barra
La clase w3-button es perfecta para diseñar enlaces en una barra.
Pase el mouse sobre los elementos de la barra para ver el efecto:
Ejemplo
<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>
Barra receptiva
La clase w3-mobile es perfecta para hacer que los artículos de la barra respondan.
Cambia el tamaño de la ventana para ver el efecto:
Ejemplo
<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>
Elementos de barra alineados a la derecha
La clase w3-right es perfecta para hacer elementos de barra alineados a la derecha:
Ejemplo
<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>