Avvisi in Bootstrap 5 | Spiegato

Gli avvisi sono fondamentalmente messaggi o pezzi di determinate informazioni che richiedono immediatamente l'attenzione di un utente. Questi possono essere messaggi di conferma che vengono visualizzati quando viene elaborata una richiesta dell'utente o viene completata una determinata attività, avvisi che avvisano gli utenti di determinate attività che richiedono attenzione o messaggi di errore che si verificano a seguito di un errore.

Dare a questi messaggi di allerta un certo stile è importante anche perché quello stile gioca un ruolo importante nel trasmettere il significato dietro il messaggio. In Bootstrap 5 puoi eseguire questa attività utilizzando varie classi che sono state discusse in questo rapporto.

Realizzare messaggi di avviso usando Bootstrap 5

Per creare un messaggio di avviso in bootstrap 5 usa il .mettere in guardia classe in combinazione con le classi di colore fornite per rappresentare il significato del messaggio di allerta. Le classi di colore che possono essere utilizzate insieme a .La classe di allerta è elencata di seguito.

1 ... Avviso-primario

Fornisce un colore blu che rappresenta un compito importante.

2… Avviso

Fornisce un colore verde che rappresenta il successo.

3… Alert-Info

Fornisce un colore blu chiaro che indica alcune informazioni.

4 ... avviso

Fornisce un colore giallo che rappresenta un avvertimento.

5… Avvisi

Dà un colore rosso che indica il pericolo.

6 ... Avviso-secondario

Fornisce un colore grigio che rappresenta un compito meno importante.

7 ... Light di allerta

Dà un colore grigio chiaro al messaggio.

8 ... Avviso-buio

Fornisce un colore grigio scuro al messaggio.

Creiamo un messaggio di avviso usando Bootstrap 5.

Come generare un avviso di messaggi di conferma usando bootstrap 5

Supponiamo di voler generare un messaggio di conferma quando una richiesta utente viene elaborata correttamente.

Html

Elaborato con successo! La tua richiesta è stata elaborata con successo.

Il codice sopra genererà un avviso di conferma che informa l'utente che la richiesta presentata è stata elaborata correttamente.

Produzione

Un messaggio di conferma è stato generato con successo.

Come generare un avviso di messaggio di errore usando bootstrap 5

Supponiamo di voler generare un messaggio di errore quando viene negata una richiesta dell'utente.

Html

Non valido! La tua richiesta è stata negata.

Nel frammento del codice, notare che oltre ad assegnare il messaggio il .Classe per cantaghi di avviso stiamo anche assegnando il .Classe dismissibile allalerta insieme a un pulsante con classe .BTN-Close e Data-BS-Dismiss = "Avviso". Tutte e tre queste entità contribuiscono a fare un messaggio di avviso che può essere chiuso dall'utente.

Produzione

È stato generato un messaggio di errore respintibile.

Creazione di avvisi come collegamenti

Se desideri effettuare i tuoi messaggi di avviso come collegamenti e indirizzare i tuoi utenti a un'altra pagina o fonte tramite tali collegamenti, usa il .Link di avviso classe per farlo.

Esempio

Supponiamo di voler reindirizzare il tuo utente a un'altra pagina Web, quindi seguire lo snippet di codice di seguito.

Html

Dai un'occhiata al nostro altra offerta.

Qui stiamo usando il .Classe Alert-Info per indicare alcune informazioni contenute nel messaggio di avviso. Inoltre, come puoi notare che stiamo collegando un pezzo del messaggio a un'altra pagina Web assegnando il .Classe di allerta del tag di ancoraggio.

Produzione

Un messaggio di avviso è stato collegato a un'altra fonte.

Avvisi d'animazione

Puoi anche aggiungere animazioni ai tuoi messaggi di avviso come includere un effetto di sbiadimento usando il .dissolvenza E .spettacolo classi.

Esempio

Ecco come puoi aggiungere un effetto di sbiadimento ai tuoi messaggi di avviso.

Html

Non fare clic sul collegamento mentre la richiesta è elaborazione

Il codice sopra afferma che il messaggio di avviso sarà un avvertimento e sarà sprecato. Inoltre, quando l'utente chiude il messaggio, avrà un effetto di sbiadimento.

Produzione

L'allerta è stato animato con successo.

Conclusione

Gli avvisi sono fondamentalmente messaggi o pezzi di determinate informazioni che richiedono immediatamente l'attenzione di un utente. In Bootstrap 5, è possibile creare avvisi utilizzando il .mettere in guardia classe, inoltre, per trasmettere il suo significato attraverso i colori usando le classi di colore disponibili. Inoltre, utilizzando le classi fornite da Bootstrap 5 puoi rendere gli avvisi respinti o animarli. Questo rapporto discute gli avvisi in Bootstrap 5 in dettaglio.