Exibindo Alertas
Perigo!
O vermelho indica frequentemente uma ação perigosa ou potencialmente negativa.
Atenção!
Amarelo e laranja, muitas vezes indica um aviso de que pode precisar de atenção.
Sucesso!
O verde indica frequentemente uma ação bem-sucedida ou positivo.
Informações!
Azul muitas vezes indica uma mudança informativa neutra ou ação.
Uma caixa de alerta é apenas um w3-container com uma cor:
Exemplo
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or potentially negative action.</p>
</div> Tente você mesmo " W3.CSS Cores
Os alertas são frequentemente exibidos com uma cor forte, mas toda a cor pode ser usado:
Perigo!
O vermelho indica frequentemente uma ação perigosa ou potencialmente negativa.
Atenção!
Amarelo, muitas vezes indica um aviso de que pode precisar de atenção.
Sucesso!
Verde, muitas vezes indica algo bem sucedida ou positivo.
Perigo!
Atenção!
Sucesso!
Alertas de fechamento
Para fechar estes contentores, clique no X no canto superior direito:
Perigo!
O vermelho indica frequentemente uma ação perigosa ou potencialmente negativa.
Atenção!
Amarelo, muitas vezes indica um aviso de que pode precisar de atenção.
Sucesso!
O verde indica frequentemente uma ação bem-sucedida ou positivo.
Fechando um alerta pode ser feito usando um evento onclick em uma w3-closebtn:
Exemplo
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">×</span> Tente você mesmo " Alertas arredondados
Use as classes w3-redondas, se quiser cantos arredondados:
w3-round
w3-large-round
w3-round-XXLarge
Alerta como um cartão
w3-card-8