Avvisi in Bootstrap 5 | Spiegato
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.