Alertes

Travail en cours

Cette page est un travail en cours.

Veuillez présenter une question ou envoyer une demande d'extraction si des renseignements ou des codes sont manquants, inexacts ou décalés par rapport au référentiel principal (wet-boew/wet-boew).

Usage

Utilisez cette fonction afin de fournir des messages de rétroaction contextuels pour les mesures habituelles prises par les utilisateurs. Faites un choix à partir d'une poignée de messages d'alertes disponibles et souples.

Conception et codage

Utilisation de base

Utilisez cette fonction pour boucler tout texte et un bouton ignorer facultatif dans .alert, ou dans l'une des quatre catégories contextuelles (par exemple, .alert-success) pour les messages d'alertes de base.

Les alertes n'appartiennent pas à une catégorie par défaut, seulement des catégories de base et de modificateur. Une alerte grise par défaut n'a pas beaucoup de sens, par conséquent, précisez toujours un type d'alerte au moyen d'une catégorie contextuelle. Choisissez parmi réussite, information, avertissement ou danger.

Alerte de réussite

Utilisez cette alerte pour attirer l'attention sur des renseignements qui doivent se distinguer du reste du contenu de la page. Avec l'alerte de réussite, le titre apparaît à côté d'une coche; l'arrière-plan du contenu est vert.

Apparence

Alerte comprenant un en-tête

(Titre)

(Le contenu de la réussite est indiqué ici.)

Alerte sans en-tête

(Le contenu régulier est indiqué ici.)

(Le contenu de la réussite est indiqué ici.)

Bonne utilisation

Point d'observation :

Utilisez .alert-success pour reconnaître quelque chose de positif; par exemple, une tâche achevée, quelque chose d'exact
Placez-la dans le flux logique d'une page
Assurez-vous qu'elle est liée au contenu qui l'entoure immédiatement
Commencez la balise <section> par un en-tête qui est propre au contenu présenté et qui est contenu à l'intérieur de celui-ci
Utilisez un en-tête général uniquement si un en-tête particulier n'est pas possible (par exemple, « Félicitations »)

Mauvaise utilisation

Points de conformité :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
N'utilisez pas la balise <section> à l'intérieur d'une autre section, cela cause des problèmes de validation
- Utiliser la balise <div> pour styliser l'alerte

Code

// Alerte avec un en-tête
<section class="alert alert-success">
  <h*>...</h*>
  ...
</section>

// Alerte sans en-tête
<div class="alert alert-success">
   <p>...</p>
</div>

Alerte d'information

Utilisez cette fonction pour mettre en évidence des renseignements ciblés pour des groupes de segments précis. Avec l'alerte d'information, le titre apparaît à côté d'une icône de la lettre « i »; l'arrière-plan du contenu est bleu. Utilisez cette alerte pour attirer l'attention sur des renseignements notables qui doivent se distinguer du reste du contenu de la page.

Apparence

Alerte avec un en-tête

(Titre)

(Le contenu de l'alerte d'information est indiqué ici.)

Alerte sans en-tête

(Le contenu régulier est indiqué ici.)

(Le contenu de l'alerte d'information est indiqué ici.)

Bonne utilisation

Points de conformité :

Utilisez .alert-info pour mettre en évidence des renseignements passablement importants
Placez-la dans le flux logique d'une page
Assurez-vous qu'elle est liée au contenu qui l'entoure immédiatement
Commencez la balise <section> par un en-tête qui est propre au contenu présenté et contenu à l'intérieur de celui-ci
Utilisez un en-tête général seulement si un en-tête précis n'est pas possible (par exemple, « Conseil », « Résumé », « Remarque »)

Mauvaise utilisation

Points de conformité :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
N'utilisez pas la balise <section> à l'intérieur d'une autre section, cela cause des problèmes de validation
- Utiliser la balise <div> pour styliser l'alerte

Code

// Alerte avec un en-tête
<section class="alert alert-info">
  <h*>...</h*>
  ...
</section>

// Alerte sans en-tête
<div class="alert alert-info">
   <p>...</p>
</div>

Alerte d'avertissement

Utilisez cette alerte pour attirer l'attention sur des renseignements qui doivent se distinguer du reste du contenu de la page. Avec l'alerte d'avertissement, le titre apparaît à côté d'une icône de mise en garde; l'arrière-plan du contenu est jaune.

Apparence

Alerte avec un en-tête

(Titre)

(Le contenu de l'avertissement est indiqué ici.)

Alerte sans en-tête

(Le contenu régulier est indiqué ici.)

(Le contenu de l'avertissement est indiqué ici.)

Bonne utilisation

Points de conformité :

Utilisez .alert-warning pour avertir l'utilisateur
Placez-la dans le flux logique d'une page
Assurez-vous qu'elle est liée au contenu qui l'entoure immédiatement
Commencez la balise <section> par un en-tête qui est propre au contenu présenté et qui est contenu à l'intérieur de celui-ci
Utilisez un en-tête général uniquement si un en-tête précis n'est pas possible (par exemple, « Avertissement », « Alerte »)

Mauvaise utilisation

Points de conformité :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
N'utilisez pas la balise <section> à l'intérieur d'une autre section, cela cause des problèmes de validation
- Utiliser la balise <div> pour styliser l'alerte

Code

// Alerte avec un en-tête
<section class="alert alert-warning">
  <h*>...</h*>
  ...
</section>

// Alerte sans en-tête
<div class="alert alert-warning">
   <p>...</p>
</div>

Alerte de danger

Utilisez cette alerte pour attirer l'attention sur des renseignements qui doivent se distinguer du reste du contenu de la page. Avec l'alerte de danger, le titre apparaît à côté d'une icône de point d'exclamation; l'arrière-plan du contenu est rouge.

Apparence

Alerte avec un en-tête

(Titre)

(Le contenu de l'alerte de danger est indiqué ici.)

Alerte sans en-tête

(Le contenu régulier est indiqué ici.)

(Le contenu de l'alerte de danger est indiqué ici.)

Bonne utilisation

Points de conformité :

Utilisez .alert-danger pour les mesures ou les renseignements très importants, négatifs ou dangereux, par exemple, les systèmes sont en panne, modifications à X en attente, « Êtes-vous sûr que vous voulez supprimer X? »
Placez dans le flux logique d'une page
Assurez-vous qu'il est lié au contenu qui l'entoure immédiatement
Commencez la balise <section> par un en-tête qui est propre au contenu présenté et qui est contenu à l'intérieur de celui-ci
Utilisez un en-tête général uniquement si un en-tête précis n'est pas possible (par exemple, « Avertissement important », « Attention »)

Mauvaise utilisation

Points de conformité :

N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
N'utilisez pas la balise <section> à l'intérieur d'une autre section, cela cause des problèmes de validation
- Utiliser la balise <div> pour styliser l'alerte

Code

// Alerte avec un en-tête
<section class="alert alert-danger">
  <h*>...</h*>
  ...
</section>

// Alerte sans en-tête
<div class="alert alert-danger">
    <p>...</p>
</div>

Utilisation améliorée

Liens d'alerte

Utilisez cette fonction pour contourner l'apparence par défaut d'un lien, utilisez la catégorie utilitaire .alert-link afin de fournir rapidement des liens colorés correspondant dans toute alerte.

Apparence

(Titre)

(Le contenu de l'alerte de réussite est indiqué ici texte du lien.)

(Titre)

(Le contenu de l'alerte d'information est indiqué ici texte du lien.)

(Titre)

(Le contenu de l'alerte avertissement est indiqué ici texte du lien.)

(Titre)

(Le contenu de l'alerte de danger est indiqué ici texte du lien.)

Code

<section class="alert alert-success">
  <p>... <a href="#" class="alert-link">texte du lien</a>.</p>
</section>

<section class="alert alert-info">
  <p>... <a href="#" class="alert-link">texte du lien</a>.</p>
</section>

<section class="alert alert-warning">
 <p>... <a href="#" class="alert-link">texte du lien</a>.</p>
</section>

<section class="alert alert-danger">
  <p>... <a href="#" class="alert-link">texte du lien</a>.</p>
</section>

Fonctions complémentaires

Des fonctions complémentaires et des comportements supplémentaires sont disponibles.

Égaliser (hauteur égale)

Une partie du code et des documents pour cette page provient de Bootstrap (lien externe)

Date de modification:: 2019-04-11