Potresti avere diversi motivi per attirare l'attenzione dei visitatori su
alcune parti del tuo sito web o forse vuoi avvisare
gli utenti di alcune informazioni o potresti voler tenere
gli utenti informati sullo stato di avanzamento di un'operazione che avviano sul tuo sito web.
Diamo un'occhiata ad alcuni diversi meccanismi che
bootstrap fornisce per questo tipo di operazioni.
Bootstrap ha molti componenti diversi che ci permettono di tenere informati gli utenti.
Abbiamo dei badge che ci permettono di attirare l'attenzione degli
utenti sui recenti aggiornamenti della nostra pagina web.
Microsoft dispone di
messaggi di avviso, errore e avviso che possono essere recapitati agli utenti nel caso in
cui questi eseguano operazioni non consentite.
Inoltre, possiamo utilizzare le barre di avanzamento per mantenere gli utenti informati
sullo stato di avanzamento delle operazioni che avviano sul nostro sito web.
Diamo un'occhiata a questo in un po 'più in dettaglio dopo.
I badge sono un modo semplice per aggiungere piccole quantità di
informazioni al tuo sito web per attirare l'attenzione dei visitatori.
Ad esempio, si può vedere che abbiamo aggiunto un paio di badge a
questa descrizione del piatto qui sulla nostra pagina principale in modo da
poter vedere che abbiamo il badge di colore rosso che attira l'attenzione degli utenti
sul fatto che questo è un elemento caldo nel menu
e forse anche informarli su il prezzo del menu.
Questo tipo di piccole informazioni può essere aggiunto al tuo sito web utilizzando un badge.
Un badge per esempio,
quello rosso qui viene creato utilizzando uno span con il distintivo classi e distintivo pericolo-distintivo.
È possibile utilizzare i vari altri colori che sono incorporati
nel framework bootstrap per creare badge di diversi colori.
Allo stesso modo, è possibile utilizzare un badge pillola che crea un rettangolo arrotondato come si vede qui,
e che può essere fatto applicando il
badge, classe badge-pillola ad esso insieme alla classe badge.
Gli avvisi sono un altro modo per informare gli utenti sulle informazioni.
Così, ad esempio, un avviso può essere creato utilizzando il componente di avviso
che può semplicemente essere creato applicando l'avviso con avviso di avviso, ad esempio,
in questo esempio viene visualizzato avviso che crea un avviso di colore giallo.
È possibile applicare nuovamente il pericolo primario e altri colori bootstrap lì.
E poi la classe alert-dismissibile,
consente di includere una classe lì che l'utente può fare clic per chiudere un avviso.
Per supportare tale operazione,
è necessario includere anche un pulsante nel tuo avviso come puoi vedere all'interno di questo div,
abbiamo incluso questo pulsante qui.
E il contenuto dell'avviso può essere formattato utilizzando HTML standard come potete vedere qui.
Quindi, questo ci permette di creare un avviso sulla nostra pagina web.
Così, per riassumere, l'avviso può essere creato da un applicando la classe di avviso
insieme con ulteriori classi di avviso qualificanti,
che consentono di creare avvisi in diversi colori.
Possiamo anche includere link nei nostri avvisi.
Possiamo anche rendere l'avviso non ammissibile utilizzando
la classe di allerta non ammissibile e includendo un pulsante a croce all'interno del nostro avviso.
Allo stesso modo, le barre di avanzamento sono incluse nei siti web per tenere
gli utenti informati sui progressi di tutto ciò che abbiamo iniziato sul sito web.
Quindi, ad esempio, se stai caricando un file su un sito web,
allora potresti voler tenere informato l'utente su quanto del file ha
completato il caricamento mostrando una barra di avanzamento sul sito web.
Quindi, la creazione di una barra di avanzamento in bootstrap viene
eseguita applicando la classe progress a un div e al suo interno possiamo applicare
un altro div interno con la barra di avanzamento della classe e
consentire anche che venga ulteriormente stilato usando cose come la
barra di avanzamento a strisce e quindi è possibile applicare il colore per
la barra di avanzamento specificando il colore come trattino BG e il colore.
Quindi, in questo caso il bg-pericolo viene applicato a questa barra di avanzamento.
Possiamo anche rendere la parte di avanzamento striping,
possiamo anche animare la barra di avanzamento,
e anche specificare quanto di quella barra di avanzamento deve essere in forma.
Quindi, cambiando
dinamicamente questo valore di larghezza è possibile creare una barra di avanzamento che continuerà ad aggiornarsi sulla pagina web.
Quindi, per riassumere, una barra di avanzamento può essere creata
applicando una classe di progresso al div e dentro
c'è un div interno a cui si applica
la classe barra di avanzamento ti permetterà di creare barra di avanzamento.
È anche possibile impilare più barre di avanzamento insieme per creare
una barra di avanzamento impilata e anche applicare colori diversi alla barra di avanzamento e
può anche avere un aspetto diverso per la barra di avanzamento utilizzando
la classe a strisce della barra di avanzamento e anche la
classe animata della barra di avanzamento per animare il strisce sulla nostra barra di avanzamento.
Ora che abbiamo esaminato vari modi di allertare gli utenti,
facciamo un semplice esercizio successivo e usiamo i badge
nella nostra pagina web per attirare l'attenzione degli utenti.