Corso raccomandato:

Avviso Bootstrap 5

Avviso

Bootstrap 5 fornisce un metodo semplice per creare messaggi di avviso predefiniti:

  • I pannelli di avviso sono creati utilizzando la classe .alert, seguita da una delle classi di contesto:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Esempio

<div class="alert alert-success">
  <strong>Successo!</strong> Questo pannello di avviso indica un'azione di successo o positiva.
</div>

Prova da solo

.alert-dark

Link di avviso .alert-link Aggiungi la classe a qualsiasi link all'interno del pannello di avviso per creare un "link colorato corrispondente":

Esempio

<div class="alert alert-success">
  <strong>Successo!</strong> Dovresti <a href="#" class="alert-link">leggere questo messaggio</a>.
</div>

Prova da solo

Chiudi avviso

Per chiudere il messaggio di avviso, aggiungi .alert-dismissible Aggiungi la classe al contenitore di avviso. Poi class="btn-close" e data-bs-dismiss="alert" Aggiungi al link o all'elemento pulsante (quando fai clic, il pannello di avviso scompare).

Esempio

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Successo!</strong> Questo pannello di avviso indica un'azione di successo o positiva.
</div>

Prova da solo

Animazione del pannello di avviso

.fade e .show Aggiungi un effetto di dissolvenza all'apertura del messaggio di avviso:

Esempio

<div class="alert alert-danger alert-dismissible fade show">

Prova da solo