Alertas do Bootstrap 4
Alertas do Bootstrap 4
O Bootstrap 4 fornece uma maneira fácil de criar mensagens de alerta predefinidas:
Os alertas são criados com a classe, seguidos por .alertuma das classes contextuais .alert-success, .alert-info, .alert-warning,
.alert-danger, .alert-primary, ou .alert-secondary:.alert-light.alert-dark
Exemplo
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Links de alerta
Adicione a alert-linkclasse a qualquer link dentro da caixa de alerta para criar "links coloridos correspondentes":
Exemplo
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
Alertas de fechamento
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">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Dica: × (×) é 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
As classes .fadee .showadicionam um efeito de desvanecimento ao fechar a mensagem de alerta:
Exemplo
<div class="alert alert-danger
alert-dismissible fade show">
Referência completa do alerta do Bootstrap 4
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 4 JS .