w3tutoriels.com

Bootstrap Alert

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.

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.

Les alertes sont créées avec la classe .alert, suivie de l’une des classes contextuelles.

Liste de toutes les classes contextuelles:

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>
Quitter la version mobile