Sommaire

Les alertes COMPOSANTS D’INTERFACE D’ADMINISTRATION:Alertes

1. L’objectif

Les alertes sont plutôt faites pour les interfaces d’administration des CMS, mais vous pouvez les utiliser pour mettre en évidence des propos importants dans votre site Web.

Utilisez le fichier Bootstrap-07-COMP-Admin/01-interface.html pour cet exemple.

2. Les alertes simples

Il vous suffit d’utiliser, par exemple, une boîte <div> avec la classe .alert et une classe supplémentaire selon la couleur de fond voulue.

  • alert-succes : fond vert.

  • alert-info : fond cyan.

  • alert-warning : fond orange.

  • alert-danger : fond rouge.

Exemples :

<div class="alert alert-success"><p>Donec id elit...</p></div> 
<div class="alert alert-info"><p>Donec id elit...</p></div> 
<div class="alert alert-warning"><p>Donec id elit...</p></div> 
<div class="alert alert-danger"><p>Donec id elit...</p></div>

L’affichage obtenu :

images/C13-007.png

Notez que les alertes ont une largeur de 100 % de leur élément parent.

Les sélecteurs CSS utilisés :

.alert-success { 
   background-image: -webkit-gradient(linear,left 0, 
      left 100%,from(#dff0d8),to(#c8e5bc)); 
   (background-image: -webkit-linear-gradient(top,) 
      (#dff0d8,0%,) 
(#c8e5bc,100%);) 
   (background-image: -moz-linear-gradient(top, )
      (#dff0d8 0,#c8e5bc ...