tutoriais mais recente desenvolvimento web
 

Bootstrap Alerts


alertas

Bootstrap oferece uma maneira fácil para criar mensagens de alerta pré-definidos:

× sucesso! Esta caixa de alerta indica uma ação bem-sucedida ou positivo.
× informação! Esta caixa de alerta indica uma mudança informativa neutra ou ação.
× Aviso! Esta caixa de alerta indica um aviso de que pode precisar de atenção.
× Perigo! Esta caixa de alerta indica uma ação perigosa ou potencialmente negativa.

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">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>
Tente você mesmo "

O aria-* atributo e &times; 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.

&times; (×) &times; (×) é 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:

Exemplo

<div class="alert alert-success fade in">
Tente você mesmo "

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 .