Alertas no bootstrap 5 | Explicado
Dar a essas mensagens alertas um certo estilo também é importante porque esse estilo desempenha um papel importante na transmissão do significado por trás da mensagem. No Bootstrap 5, você pode executar esta tarefa usando várias classes que foram discutidas neste relatório.
Fazendo mensagens de alerta usando o Bootstrap 5
Para criar uma mensagem de alerta no bootstrap 5, use o .alerta classe em combinação com as classes de cores fornecidas para representar o significado da mensagem de alerta. As classes de cores que podem ser utilizadas junto com o .A classe de alerta está listada abaixo.
1… Alert-Primary
Fornece uma cor azul representando uma tarefa importante.
2… ALERT-SUCESSO
Fornece uma cor verde representando sucesso.
3… alerta-info
Fornece uma cor azul clara indicando algumas informações.
4… Darenamento de alerta
Fornece uma cor amarela representando um aviso.
5… Danger de alerta
Dá uma cor vermelha indicando perigo.
6… Alert-secundário
Fornece uma cor cinza representando uma tarefa menos importante.
7… LIGHTA DE ALERTA
Dá uma cor cinza claro à mensagem.
8… Alert-Dark
Fornece uma cor cinza escura para a mensagem.
Vamos criar uma mensagem de alerta usando o bootstrap 5.
Como gerar um alerta de mensagem de confirmação usando o bootstrap 5
Suponha que você queira gerar uma mensagem de confirmação quando uma solicitação de usuário for processada com sucesso.
Html
Processado com sucesso! Seu pedido foi processado com sucesso.
O código acima gerará um alerta de confirmação informando ao usuário que a solicitação feita foi processada com sucesso.
Saída
Uma mensagem de confirmação foi gerada com sucesso.
Como gerar um alerta de mensagem de erro usando o bootstrap 5
Suponha que você queira gerar uma mensagem de erro quando uma solicitação do usuário for negada.
Html
Inválido! Seu pedido foi negado.
No trecho de código, observe que, além de atribuir a mensagem .Classe de Alerta Danger, também estamos atribuindo o .Classe-Dismissível de Alerta, juntamente com um botão com aula .BTN Close e Data-Bs-Dismiss = "Alert". Todas as três entidades contribuem para fazer uma mensagem de alerta que pode ser fechada pelo usuário.
Saída
Uma mensagem de erro descartável foi gerada.
Criando alertas como links
Se você deseja fazer suas mensagens alertas como links e direcionar seus usuários para outra página ou fonte através desses links, use o .Alerta-Link classe para fazer isso.
Exemplo
Suponha que você queira redirecionar seu usuário para outra página da web e siga o trecho de código abaixo.
Html
Confira o nosso outra oferta.
Aqui estamos usando o .classe de alerta-info para indicar algumas informações contidas na mensagem de alerta. Além disso, como você pode notar que estamos vinculando algum pedaço da mensagem a outra página da web atribuindo o .Classe de alerta de link para a etiqueta de ancoragem.
Saída
Uma mensagem de alerta foi vinculada a outra fonte.
Alertas de animação
Você também pode adicionar animações às suas mensagens de alerta, como incluir um efeito de desbotamento usando o .desaparecer e .mostrar Aulas.
Exemplo
Aqui está como você pode adicionar um efeito desbotado às suas mensagens de alerta.
Html
Não clique no link enquanto a solicitação estiver processando
O Código acima afirma que a mensagem de alerta será um aviso e será dispensável. Além disso, quando o usuário fechar a mensagem, terá um efeito desbotado.
Saída
O alerta foi animado com sucesso.
Conclusão
Alertas são basicamente mensagens ou partes de certas informações que exigem atenção imediata de um usuário. No bootstrap 5, você pode criar alertas usando o .alerta aula, além disso, para transmitir seu significado através de cores usando as classes de cores disponíveis. Além disso, usando as classes fornecidas pelo bootstrap 5, você pode fazer com que seus alertas sejam descartáveis ou animá -los. Este relatório discute alertas no bootstrap 5 em detalhes.