Les alertes bootstrap sont utilisées pour fournir un moyen simple de créer des messages d’alerte prédéfinis. Alert ajoute un style à vos messages pour le rendre plus attrayant pour les utilisateurs.
Quatre classes sont utilisées dans l’élément <div> pour les alertes.
- .alert-success
- .alert-info
- .alert-warning
- .alert-danger
Exemple d’alerte bootstrap
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Succès!</strong>Ce champ d’alerte indique une action réussie ou positive.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Ce champ d’alerte indique un changement ou une action informatif neutre.
</div>
<div class="alert alert-warning">
<strong>Attention!</strong> Cette zone d'alerte indique un avertissement qui pourrait nécessiter votre attention..
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Ce champ d’alerte indique une action dangereuse ou potentiellement négative..
</div>
</div>
</body>
</html>
Résultat :
Alerte Bootstrap4
Bootstrap 4 ajoute 4 nouvelles alertes dans Bootstrap Alert définies dans le didacticiel Bootstrap 3.
- Primary: cette zone d’alerte indique une action importante.
- Secondary: cette zone d’alerte indique une action moins importante.
- Dark: boîte d’alerte gris foncé.
- Light: Boîte d’alerte gris clair.
Les alertes sont créées avec la classe .alert, suivie de l’une des classes contextuelles.
Liste de toutes les classes contextuelles:
- .alert-success
- .alert-info
- .alert-warning
- .alert-danger
- .alert-primary
- .alert-secondary
- .alert-light
- .alert-dark
Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Succès! </strong> Utilisé pour indiquer une action réussie ou positive.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Utilisé pour indiquer un changement ou une action informatif neutre.
</div>
<div class="alert alert-warning">
<strong>Attention!</strong> Utilisé pour indiquer un avertissement qui pourrait avoir besoin d'attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Utilisé pour indiquer une action dangereuse ou potentiellement négative.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> Utilisé pour indiquer une action importante.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> Utilisé pour indiquer une action légèrement moins importante.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> Alerte gris foncé.
</div>
<div class="alert alert-light">
<strong>Light!</strong >Alerte gris clair.
</div>
</div>
</body>
</html>
Résultat :
Bootstrap liens d’alerte
Vous devez ajouter la classe alert-link à tous les liens dans la zone d’alerte pour créer des « liens colorés correspondants »:
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Alert Links</h2>
<div class="alert alert-success">
<strong>Succès!</strong> Vous devriez <a href="#" class="alert-link">lire ce message</a>.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Vous devriez <a href="#" class="alert-link">lire ce message</a>.
</div>
<div class="alert alert-warning">
<strong>Attention!</strong> Vous devriez <a href="#" class="alert-link">lire ce message</a>.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> Vous devriez <a href="#" class="alert-link">lire ce message</a>.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> Vous devriez <a href="#" class="alert-link">lire ce message</a>.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> Vous devriez <a href="#" class="alert-link">lire ce message</a>.
</div>
<div class="alert alert-dark">
<strong>Dark!</strong> Vous devriez <a href="#" class="alert-link">lire ce message</a>.
</div>
<div class="alert alert-light">
<strong>Light!</strong> Vous devriez <a href="#" class="alert-link">lire ce message</a>.
</div>
</div>
</body>
</html>
Résultat :
Fermeture des alertes
Si vous souhaitez fermer le message d’alerte, vous devez ajouter une classe .alert-licenciable au conteneur d’alerte. Ajoutez ensuite class = « close » et data-rejet = « alert » à un lien ou à un élément de bouton (lorsque vous cliquez sur le signe de fermeture, le message d’alerte sera fermé.)
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Succès!</strong>Cette boîte d’alerte peut indiquer une action réussie ou positive.
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Info!</strong> Cette boîte d’alerte peut indiquer un changement ou une action informative neutre.
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Attention!</strong> Cette zone d'alerte peut indiquer un avertissement qui pourrait nécessiter votre attention.
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Danger!</strong> Cette boîte d’alerte peut indiquer une action dangereuse ou potentiellement négative.
</div>
<div class="alert alert-primary alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Primary!</strong> Indique une action importante.
</div>
<div class="alert alert-secondary alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Secondary!</strong> Indique une action légèrement moins importante.
</div>
<div class="alert alert-dark alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Dark!</strong>Alerte gris foncé.
</div>
<div class="alert alert-light alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Light!</strong>Alerte gris clair.
</div>
</div>
</body>
</html>
Résultat :
Alertes Animées
Vous pouvez utiliser les classes .fade et .show pour ajouter un effet de fondu lors de la fermeture du message d’alerte.
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Alertes animatés </h2>
<div class="alert alert-success alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Succès!</strong> Cette boîte d’alerte peut indiquer une action réussie ou positive.
</div>
<div class="alert alert-info alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Info!</strong> Cette boîte d’alerte peut indiquer un changement ou une action informative neutre.
</div>
<div class="alert alert-warning alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Attention!</strong> Cette zone d'alerte peut indiquer un avertissement qui pourrait nécessiter votre attention.
</div>
<div class="alert alert-danger alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Danger!</strong>Cette boîte d’alerte peut indiquer une action dangereuse ou potentiellement négative.
</div>
<div class="alert alert-primary alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Primary!</strong>Indique une action importante.
</div>
<div class="alert alert-secondary alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Secondary!</strong> Indique une action légèrement moins importante.
</div>
<div class="alert alert-dark alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Dark!</strong>Alerte gris foncé.
</div>
<div class="alert alert-light alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Light!</strong>Alerte gris clair.
</div>
</div>
</body>
</html>