Os alertas em bootstrap são diferentes do alerta em javascript. São utilizados para
avisar o usuário sobre um detalhe de relevância no contexto do processo.
Os alertas são criados com a classe .alert, seguida por uma classe de cores contextual:
A sintaxe tipica é a seguinte:
<div class="alert alert-cor">
A classe define a cor do texto e a cor de fundo do box que pode ser :
classe
Cor caracteres
Cor de fundo
success
verde escuro
azul claro
info
azul escuro
azul claro
warning
marron claro
rosa claro
danger
vermelho
rosa claro
primary
azul
azul claro
secondary
preto
azul claro
dark
preto
azul claro
light
cinza claro
branco
Importante : O nome da classe está em negrito porque eu coloquei um strong nela.
Como o browser exibe as classes de alerta
Success! Essa caixa de alerta pode indicar uma ação positiva ou bem-sucedida.
Info! Essa caixa de alerta pode indicar uma alteração ou ação informativa neutra.
Warning! Essa caixa de alerta pode indicar um aviso que pode precisar de atenção.
Danger! Essa caixa de alerta pode indicar uma ação perigosa ou potencialmente negativa.
Primary! Indica uma ação importante.
Secondary! Indica uma ação um pouco menos importante.
Dark! Alerta cinza escuro.
Light! Alerta cinza claro.
Todos os alertas acima usaram o código:
<div class="alert alert-success">
<strong>Success!</strong> Essa caixa de alerta pode indicar uma ação positiva ou bem-sucedida.
</div>
Bootstrap - Fechando os alertas
A classe que formata formata o box é .alert seguida por um contexto de cor.
O botão com a class="close" e data-dismiss="alert" é usado para fechar o box
de alerta.
A classe alert-dismissible adiciona algum extra padding ao botão close.
classe alert, alert-sucess, alert-dismissible
Como usar :
<div class="alert alert-cor alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Successo!</strong> Este box de alerta pode indicar um ação que foi terminada com sucesso.
</div>
Note que a cor esta enunciada no topo da página
Como o browser exibe :
Successo! Este box de alerta pode indicar um ação que foi terminada com sucesso.
Info! Este box de alerta indica uma informação neutra, uma mudança ou ação de processo.
Aviso! Este box de alerta indica um aviso que pode necessitar de atenção.
Perigo! Este alerta pode indicar uma coisa perigosa ou uma ação potencialmente negativa.
Importante! Indicatas que uma ação importante precisa ser tomada.
Aviso! Indicata que uma ação menos importante ou prioritária deve ser feita.
Dark! Um box de alerta Cinza Escuro.
Ligh! Um box de alerta Cinza Claro.
Bootstrap - Fechando os alertas animado
As classes .fade e .show adicionam efeitos de fading quando o box de alerta é fechado .
Como usar :
<div class="alert alert-cor alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Successo!</strong> Este box de alerta pode indicar um ação que foi terminada com sucesso.
</div>
Note que a cor esta enunciada no topo da página
Como o browser exibe :
Successo! Este box de alerta pode indicar um ação que foi terminada com sucesso.
Info! Este box de alerta indica uma informação neutra, uma mudança ou ação de processo.
Aviso! Este box de alerta indica um aviso que pode necessitar de atenção.
Perigo! Este alerta pode indicar uma coisa perigosa ou uma ação potencialmente negativa.
Importante! Indicatas que uma ação importante precisa ser tomada.
Aviso! Indicata que uma ação menos importante ou prioritária deve ser feita.