Barras W3.CSS
Barras horizontais
Barras horizontais são elementos comuns de web design:
A classe w3-bar é usada para estilizar uma barra horizontal:
Exemplo
<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>
O objetivo da classe w3-bar-item é fornecer espaçamento, preenchimento e posicionamento corretos.
Barras Verticais
Barras verticais (barras laterais) também são comuns em web design:
A classe w3-bar-block é usada para estilizar uma barra vertical:
Exemplo
<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>
Cores da barra
Você pode usar qualquer cor para estilizar uma barra:
Exemplo
<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>
Cores de foco
Você pode usar qualquer cor de foco para estilizar uma barra:
Passe o mouse sobre os itens da barra para ver o efeito:
Exemplo
<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>
Links de barra
Fornecer navegação é um uso típico para barras:
Exemplo
<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>
Botões da barra
A classe do botão w3 é perfeita para estilizar links em uma barra.
Passe o mouse sobre os itens da barra para ver o efeito:
Exemplo
<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 responsiva
A classe w3-mobile é perfeita para tornar os itens do bar responsivos.
Redimensione a janela para ver o efeito:
Exemplo
<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>
Itens de barra alinhados à direita
A classe w3-right é perfeita para fazer itens de barra alinhados à direita:
Exemplo
<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>