Source

Alertas

Forneça mensagens de feedback contextuais para ações típicas do usuário com um punhado de mensagens de alerta flexíveis e disponíveis.

Exemplos

Alertas estão disponíveis para qualquer tamanho de texto, bem como um botão de dispensa opcional. Para um estilo adequado, use uma das oito classes contextuais necessárias.alert-success (por exemplo, ). Para dispensa inline, use o plugin jQuery de alertas .

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Transmitindo significado às tecnologias assistivas

Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .sr-onlyclasse.

Use a .alert-linkclasse de utilitário para fornecer rapidamente links coloridos correspondentes em qualquer alerta.

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Conteúdo adicional

Os alertas também podem conter elementos HTML adicionais, como títulos, parágrafos e divisores.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Dispensando

Usando o plugin JavaScript de alerta, é possível dispensar qualquer alerta inline. Veja como:

  • Certifique-se de ter carregado o plugin de alerta ou o JavaScript Bootstrap compilado.
  • Se você estiver construindo nosso JavaScript a partir da fonte, ele requerutil.js . A versão compilada inclui isso.
  • Adicione um botão de dispensa e a .alert-dismissibleclasse, que adiciona preenchimento extra à direita do alerta e posiciona o .closebotão.
  • No botão dispensar, adicione o data-dismiss="alert"atributo, que aciona a funcionalidade JavaScript. Certifique-se de usar o <button>elemento com ele para um comportamento adequado em todos os dispositivos.
  • Para animar alertas ao dispensá-los, certifique-se de adicionar as classes .fadee ..show

Você pode ver isso em ação com uma demonstração ao vivo:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Comportamento JavaScript

Gatilhos

Habilite a dispensa de um alerta via JavaScript:

$('.alert').alert()

Ou com dataatributos em um botão dentro do alert , conforme demonstrado acima:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Observe que fechar um alerta irá removê-lo do DOM.

Métodos

Método Descrição
$().alert() Faz um alerta escutar eventos de clique em elementos descendentes que possuem o data-dismiss="alert"atributo. (Não é necessário ao usar a inicialização automática da API de dados.)
$().alert('close') Fecha um alerta removendo-o do DOM. Se as classes .fadee .showestiverem presentes no elemento, o alerta desaparecerá antes de ser removido.
$().alert('dispose') Destrói o alerta de um elemento. 
$('.alert').alert('close')

Eventos

O plugin de alerta do Bootstrap expõe alguns eventos para se conectar à funcionalidade de alerta.

Evento Descrição
close.bs.alert Este evento é acionado imediatamente quando o closemétodo de instância é chamado.
closed.bs.alert Este evento é acionado quando o alerta é fechado (aguardará a conclusão das transições CSS). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})