Alertes W3.CSS
La classe w3-panel est la classe parfaite pour afficher tous les types d'alertes :
Danger!
Le rouge indique souvent une situation dangereuse ou négative.
Les alertes sont souvent affichées en utilisant une couleur forte :
Danger!
Le rouge indique souvent une situation dangereuse ou négative.
Exemple
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Afficher les avertissements
Avertissement!
Le jaune indique souvent un avertissement qui pourrait nécessiter votre attention.
Avertissement!
Le jaune indique souvent un avertissement qui pourrait nécessiter votre attention.
Exemple
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Afficher les réussites
Succès!
Le vert indique souvent quelque chose de réussi ou de positif.
Succès!
Le vert indique souvent quelque chose de réussi ou de positif.
Exemple
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Afficher les informations
Info!
Le bleu indique souvent un changement informatif neutre ou une action.
Info!
Le bleu indique souvent un changement informatif neutre ou une action.
Exemple
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
Utiliser un conteneur
La classe w3-container peut également être utilisée pour afficher des alertes :
Exemple
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Alertes de toutes les couleurs
Les alertes sont souvent affichées dans des couleurs spéciales, mais n'importe quelle couleur peut être utilisée :
Danger!
Le rouge indique souvent une situation dangereuse ou négative.
Danger!
Le rouge indique souvent une situation dangereuse ou négative.
Danger!
Le rouge indique souvent une situation dangereuse ou négative.
Danger!
Le rouge indique souvent une situation dangereuse ou négative.
Danger!
Le rouge indique souvent une situation dangereuse ou négative.
Exemple
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Alertes de fermeture
Pour fermer la boîte d'alerte, cliquez sur le X dans le coin supérieur droit :
Danger!
Le rouge indique souvent une situation dangereuse ou négative.
Pour créer le X qui ferme l'alerte, ajoutez un élément <span> avec la classe w3-button et un événement onclick :
Exemple
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Astuce : Le code HTML × entity est l'icône préférée pour les boutons de fermeture (plutôt que la lettre "X").
Alertes arrondies
Utilisez les classes w3-round si vous voulez des coins arrondis :
Succès!
Ici w3-round est utilisé.
Succès!
Ici w3-round-large est utilisé.
Succès!
Ici w3-round-xxlarge est utilisé.
Exemple
<div class="w3-panel w3-green w3-round">
Alerte sous forme de carte
Utilisez une classe w3-card si vous souhaitez que l'alerte s'affiche sous forme de carte :
Avertissement!
Le jaune indique souvent quelque chose qui a besoin d'attention.
Exemple
<div class="w3-panel w3-yellow w3-card-4">