HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Alertas de inicialização

❮ Anterior Próximo ❯

Alertas

O Bootstrap fornece uma maneira fácil de criar mensagens de alerta predefinidas:

× Sucesso! Esta caixa de alerta indica uma ação bem-sucedida ou positiva.
× Informações! Esta caixa de alerta indica uma mudança ou ação informativa neutra.
× Aviso! Esta caixa de alerta indica um aviso que pode precisar de atenção.
× Perigo! Esta caixa de alerta indica uma ação perigosa ou potencialmente negativa.

Os alertas são criados com a classe, seguidos por .alertuma das quatro classes contextuais .alert-success, ou .alert-info:.alert-warning.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>

Links de alerta

Adicione a alert-linkclasse a qualquer link dentro da caixa de alerta para criar "links coloridos correspondentes":

Sucesso! Você deve ler esta mensagem .
Informações! Você deve ler esta mensagem .
Aviso! Você deve ler esta mensagem .
Perigo! Você deve ler esta mensagem .

Exemplo

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

Alertas de fechamento

× Clique no símbolo "x" à direita para me fechar.

Para fechar a mensagem de alerta, adicione uma .alert-dismissible classe ao contêiner de alerta. Em seguida, adicione class="close"e data-dismiss="alert" a um link ou a um elemento de botão (quando você clicar nele, a caixa de alerta desaparecerá).

Exemplo

<div class="alert alert-success alert-dismissible">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

O atributo aria-* e × explicação

Para ajudar a melhorar a acessibilidade para pessoas que usam leitores de tela, você deve incluir o atributo aria-label="close" ao criar um botão Fechar.

& vezes; (×) é uma entidade HTML que é o ícone preferido para botões de fechar, em vez da letra "x".
Para obter uma lista de todas as entidades HTML, visite nossa Referência de entidades HTML .

Alertas animados

× Clique no símbolo "x" à direita para me fechar. Eu vou "desaparecer".

As classes .fadee .inadicionam um efeito de desvanecimento ao fechar a mensagem de alerta:

Exemplo

<div class="alert alert-danger fade in">

Teste-se com exercícios

Exercício:

Adicione uma classe "alerta" do Bootstrap para exibir o resultado de uma ação bem-sucedida.

<div class="">
  Success!
</div>

Referência Completa do Alerta Bootstrap

Para obter uma referência completa de todas as opções, métodos e eventos de alerta, acesse nossa Referência de Alerta do Bootstrap JS .


❮ Anterior Próximo ❯