Alertas W3.CSS
A classe w3-panel é a classe perfeita para exibir todos os tipos de alertas:
Perigo!
O vermelho geralmente indica uma situação perigosa ou negativa.
Os alertas geralmente são exibidos usando uma cor forte:
Perigo!
O vermelho geralmente indica uma situação perigosa ou negativa.
Exemplo
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Exibir avisos
Aviso!
Amarelo geralmente indica um aviso que pode precisar de atenção.
Aviso!
Amarelo geralmente indica um aviso que pode precisar de atenção.
Exemplo
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Exibir sucessos
Sucesso!
Verde muitas vezes indica algo bem sucedido ou positivo.
Sucesso!
Verde muitas vezes indica algo bem sucedido ou positivo.
Exemplo
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Exibir informações
Informações!
Azul geralmente indica uma mudança ou ação informativa neutra.
Informações!
Azul geralmente indica uma mudança ou ação informativa neutra.
Exemplo
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Usando um contêiner
A classe w3-container também pode ser usada para exibir alertas:
Exemplo
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Alertas em todas as cores
Os alertas geralmente são exibidos em cores especiais, mas qualquer cor pode ser usada:
Perigo!
O vermelho geralmente indica uma situação perigosa ou negativa.
Perigo!
O vermelho geralmente indica uma situação perigosa ou negativa.
Perigo!
O vermelho geralmente indica uma situação perigosa ou negativa.
Perigo!
O vermelho geralmente indica uma situação perigosa ou negativa.
Perigo!
O vermelho geralmente indica uma situação perigosa ou negativa.
Exemplo
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Alertas de fechamento
Para fechar a caixa de alerta, clique no X no canto superior direito:
Perigo!
O vermelho geralmente indica uma situação perigosa ou negativa.
Para criar o X que fecha o alerta, adicione um elemento <span> com a classe w3-button e um evento onclick :
Exemplo
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Dica: O HTML × entidade é o ícone preferido para botões de fechamento (em vez da letra "X").
Alertas arredondados
Use as classes w3-round se quiser cantos arredondados:
Sucesso!
Aqui w3-round é usado.
Sucesso!
Aqui w3-round-large é usado.
Sucesso!
Aqui w3-round-xxlarge é usado.
Exemplo
<div class="w3-panel w3-green w3-round">
Alerta como um cartão
Use uma classe w3-card se quiser que o alerta seja exibido como um cartão:
Aviso!
Amarelo muitas vezes indica algo que precisa de atenção.
Exemplo
<div class="w3-panel w3-yellow w3-card-4">