Bootstrap 4 - Alertes
La description
Le composant d'alerte spécifie le message prédéfini pour les actions d'un utilisateur. Il est utilisé pour envoyer des informations telles que des messages d'avertissement, d'erreur ou de confirmation aux utilisateurs finaux.
Vous pouvez créer une boîte d'alerte, en ajoutant une classe de .alert et avec des classes contextuelles telles que .alert-success , .alert-info , .alert-warning , .alert-danger , .alert-primary , .alert-secondary , .alert-light ou .alert-dark .
L'exemple suivant illustre l'utilisation des classes contextuelles ci-dessus -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Alerts</h2>
<div class = "alert alert-primary" role = "alert">
primary alert - Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-secondary" role = "alert">
secondary alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-success" role = "alert">
success alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-danger" role = "alert">
danger alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-warning" role = "alert">
warning alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-info" role = "alert">
info alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-light" role = "alert">
light alert — Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-dark" role = "alert">
dark alert — Welcome to Tutorialspoint!!!
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Liens dans les alertes
Pour obtenir des liens dans les alertes, utilisez la classe utilitaire .alert-link dans la balise <a> comme indiqué dans l'exemple ci-dessous -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Links in Alerts</h2>
<div class = "alert alert-primary" role = "alert">
primary alert - Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-secondary" role = "alert">
secondary alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-success" role = "alert">
success alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-danger" role = "alert">
danger alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-warning" role = "alert">
warning alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-info" role = "alert">
info alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-light" role = "alert">
light alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
<div class = "alert alert-dark" role = "alert">
<div class = "alert alert-dark" role = "alert">
dark alert — Welcome to
<a href = "https://www.tutorialspoint.com/" target = "_blank"
rel = "nofollow" class = "alert-link">Tutorialspoint!!!</a>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Alertes de rejet
Pour créer une alerte de rejet, utilisez la classe .alert-ignoreable pour alerter le conteneur. Ajoutez l' attribut data-licenciement = "alert" sur l'élément bouton pour fermer un bouton, ce qui ferme automatiquement la boîte de message d'alerte.
L'exemple suivant illustre le rejet de la boîte d'alerte -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Dismissal Alerts</h2>
<div class = "alert alert-success alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Success!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-primary alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Primary!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-secondary alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Secondary!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-danger alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Danger!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-warning alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Warning!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-info alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Info!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-light alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Light!</strong> Welcome to Tutorialspoint!!!
</div>
<div class = "alert alert-dark alert-dismissible">
<button type = "button" class = "close" data-dismiss = "alert">×</button>
<strong>Dark!</strong> Welcome to Tutorialspoint!!!
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -