Alertas de bootstrap 5
Bootstrap 5 é a versão principal mais recente do Bootstrap, onde a IU foi renovada e várias mudanças foram feitas. Os alertas fornecem mensagens de feedback contextual para ações típicas do usuário com um punhado de mensagens de alerta disponíveis e flexíveis. O bootstrap permite mostrar essas mensagens de alerta no site usando classes predefinidas. Cada uma das classes possui cores diferentes associadas a elas.
Sintaxe:
<div class="alert alert-type"> Contents of the alert... <div>
Tipos: há oito tipos de alertas disponíveis no Bootstrap 5. As classes desses alertas são fornecidas a seguir:
- alerta primário
- alerta secundário
- alerta-sucesso
- alerta-perigo
- alerta-aviso
- alert-info
- luz de alerta
- alerta escuro
Exemplo 1: Este exemplo mostra os primeiros quatro tipos de Alertas no Bootstrap 5.
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Alerts
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<body>
<div style="text-align: center;
width:600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<div id="canvas" style="width: 600px;
height: 200px;
margin: 20px;">
<div class="alert alert-primary" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-secondary" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-success" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-danger" role="alert">
GeeksforGeeks
</div>
</div>
</body>
</html>
Saída:
Exemplo 2: Este exemplo mostra os próximos quatro tipos de Alertas no Bootstrap 5.
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Alerts
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<body>
<div style="text-align: center;
width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<div id="canvas" style="width: 600px;
height: 200px;
margin: 20px;">
<div class="alert alert-warning" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-info" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-light" role="alert">
GeeksforGeeks
</div>
<div class="alert alert-dark" role="alert">
GeeksforGeeks
</div>
</div>
</body>
</html>
Saída:
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva