Boîte d'alerte Foundation
Foundation facilite la création d'une boîte d'alerte :
La boîte d'alerte peut être utilisée.alert-boxCréation de classe, des classes optionnelles peuvent être ajoutées :.secondary, .success, .info, .warningou.alert:
Exemple
<div data-alert class="alert-box">
Ceci est une boîte d'alerte par défaut.
</div>
<div data-alert class="alert-box secondary">
Ceci est une boîte d'alerte secondaire.
</div>
<div data-alert class="alert-box success">
<strong>Succès !</strong> Cette boîte d'alerte indique une action réussie ou positive.
</div>
<div data-alert class="alert-box info">
<strong>Info !</strong> Cette boîte d'alerte indique un changement ou une action à caractère informatif neutre.
</div>
<div data-alert class="alert-box warning">
<strong>Avertissement !</strong> Cette boîte d'alerte indique un avertissement qui pourrait nécessiter votre attention.
</div>
<div data-alert class="alert-box alert">
<strong>Alerte !</strong> Cette boîte d'alerte indique une action dangereuse ou potentiellement négative.
</div>
Ceci est une boîte d'alerte par défaut.
</div>
<div data-alert class="alert-box secondary">
Ceci est une boîte d'alerte secondaire.
</div>
<div data-alert class="alert-box success">
<strong>Succès !</strong> Cette boîte d'alerte indique une action réussie ou positive.
</div>
<div data-alert class="alert-box info">
<strong>Info !</strong> Cette boîte d'alerte indique un changement ou une action à caractère informatif neutre.
</div>
<div data-alert class="alert-box warning">
<strong>Avertissement !</strong> Cette boîte d'alerte indique un avertissement qui pourrait nécessiter votre attention.
</div>
<div data-alert class="alert-box alert">
<strong>Alerte !</strong> Cette boîte d'alerte indique une action dangereuse ou potentiellement négative.
</div>
Essayez-le vous-même »
 |
La boîte d'alerte occupe 100 % de la largeur de son conteneur. |
|---|
Encadré arrondi
.radiuset.roundLa classe est utilisée pour ajouter des coins arrondis aux boîtes d'alerte :
Exemple
<div data-alert class="alert-box success radius">
<strong>Succès !</strong> Boîte d'alerte avec un rayon.
</div>
<div data-alert class="alert-box info round">
<strong>Info !</strong> Boîte d'alerte arrondie.
</div>
<strong>Succès !</strong> Boîte d'alerte avec un rayon.
</div>
<div data-alert class="alert-box info round">
<strong>Info !</strong> Boîte d'alerte arrondie.
</div>
Essayez-le vous-même »
Fermer l'encadré
Pour fermer la boîte d'alerte, ajoutez-la à un élément lien ou bouton :class="close"classe, et initialisez Foundation JS :
Exemple
<div data-alert class="alert-box">
Il s'agit d'une boîte d'alerte par défaut avec fonctionnalité de fermeture.
<a href="#" class="close">×</a>
</div>
<script>
// Initialiser Foundation JS pour la fonctionnalité
$(document).ready(function() {
$(document).foundation();
})
</script>
Il s'agit d'une boîte d'alerte par défaut avec fonctionnalité de fermeture.
<a href="#" class="close">×</a>
</div>
<script>
// Initialiser Foundation JS pour la fonctionnalité
$(document).ready(function() {
$(document).foundation();
})
</script>
Essayez-le vous-même »
|
× (×) est une entité de caractère HTML représentant une icône de bouton de fermeture, et non la lettre « x ». |
|---|