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 .
Um alerta primário simples – confira!
Um alerta secundário simples - confira!
Um simples alerta de sucesso - confira!
Um simples alerta de perigo - confira!
Um simples alerta de aviso - confira!
Um alerta de informação simples - confira!
Um simples alerta de luz - confira!
Um alerta escuro simples - confira!
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.
Cor do link
Use a .alert-linkclasse de utilitário para fornecer rapidamente links coloridos correspondentes em qualquer alerta.
Um alerta primário simples com
um link de exemplo . Dê um clique se quiser.
Um alerta secundário simples com
um link de exemplo . Dê um clique se quiser.
Um alerta de sucesso simples com
um link de exemplo . Dê um clique se quiser.
Um alerta de perigo simples com
um link de exemplo . Dê um clique se quiser.
Um alerta de aviso simples com
um link de exemplo . Dê um clique se quiser.
Um alerta de informação simples com
um link de exemplo . Dê um clique se quiser.
Um alerta de luz simples com
um link de exemplo . Dê um clique se quiser.
Um alerta escuro simples com
um link de exemplo . Dê um clique se quiser.
Conteúdo adicional
Os alertas também podem conter elementos HTML adicionais, como títulos, parágrafos e divisores.
Bem feito!
Ah, sim, você leu com sucesso esta importante mensagem de alerta. Este texto de exemplo ficará um pouco mais longo para que você possa ver como o espaçamento em um alerta funciona com esse tipo de conteúdo.
Sempre que precisar, certifique-se de usar utilitários de margem para manter as coisas bonitas e organizadas.
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:
Santo guacamole! Você deve verificar alguns desses campos abaixo.
Comportamento JavaScript
Gatilhos
Habilite a dispensa de um alerta via JavaScript:
Ou com dataatributos em um botão dentro do alert , conforme demonstrado acima:
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.
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).