alertas
Bootstrap oferece uma maneira fácil para criar mensagens de alerta pré-definidos:
Alertas são criados com o .alert
classe, seguido por uma das quatro classes contextuais .alert-success
, .alert-info
, .alert-warning
ou .alert-danger
:
Exemplo
<div class="alert alert-success">
<strong>Success!</strong>
Indicates a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negative
action.
</div>
Tente você mesmo " Alertas de fechamento
Para fechar a mensagem de alerta, adicione class="close"
e data-dismiss="alert"
para um link ou um elemento de botão:
Exemplo
<div class="alert alert-success">
<a href="#"
class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Tente você mesmo " O aria-* atributo e × explicação
Para ajudar a melhorar a acessibilidade para as pessoas que utilizam leitores de tela, você deve incluir o aria-label="close" atributo, ao criar um botão de fechamento.
× (×) × (×) é uma entidade HTML que é o ícone de preferência para botões de fecho, em vez de a letra "x" .
Alertas animated
O .fade
e .in
aulas adiciona um efeito de esmaecimento ao fechar a mensagem de alerta:
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 »
Conclua Bootstrap Referência Alert
Para uma referência completa de todas as opções de alerta, métodos e eventos, ir ao nosso Bootstrap JS Alerta de Referência .