Alertas
Alertas são usadas para enviar um feedback contextual de sucesso, erro, warning ou apenas uma notificação de novas features no sistema.
Exemplos
Os alertas seguem o mesmo padrão do Bootstrap. Envolva qualquer texto com uma classe .alert juntamente com classes contextuais como .alert-sucess. Veja abaixo exemplos:
Não existe uma classe padrão
Alertas não tem classes padrão, apenas uma classe de base (.alert) e as classes de modificação. Por isso você sempre deverá inserir uma classe de contexto para indicar qual o teor do alerta.
Sucesso! Você conseguiu, parabéns!
Atenção: você tem informações importantes para ler.
Cuidado: cheque duas vezes. Você pode ter esquecido alguma informação.
Mórreu: Algo muito ruim aconteceu e você vai precisar refazer tudo.
............
Fechando alertas
Você pode colocar um botãozinho para fechar o alerta inserindo a classe .alert-dismissable em qualquer alerta e também inserindo um botão de dismiss, que pode ser um botão ou um link.
Sucesso! Você conseguiu, parabéns!
Atenção: você tem informações importantes para ler.
Atenção: você tem informações importantes para ler. Veja mais detalhes aqui.
Acessibilidade
Utilize a classe .alert-focus, com isso ele recebe o foco visual (rolagem na tela) e os leitores de tela conseguem entender automaticamente a mensagem que ali consta, por exemplo em sucesso ou erro de formulários isso é fundamental para o usuário.
Links internos
Para que os links fiquem com estilizados conforme cada alerta, basta inserir os links com a classe .alert-link
Atenção: você tem informações importantes para ler. Veja mais detalhes aqui.
<div class="alert alert-success alert-dismissable"> <a href="#" class="close" data-dismiss="alert" aria-hidden="true">×</a> <p><strong>Atenção:</strong> você tem informações importantes para ler. <a href="#" class="alert-link">Veja mais detalhes aqui.</a></p> </div>