1 00:00:03,650 --> 00:00:08,240 Potresti avere diversi motivi per attirare l'attenzione dei visitatori su 2 00:00:08,240 --> 00:00:11,890 alcune parti del tuo sito web o forse vuoi avvisare 3 00:00:11,890 --> 00:00:16,370 gli utenti di alcune informazioni o potresti voler tenere 4 00:00:16,370 --> 00:00:22,150 gli utenti informati sullo stato di avanzamento di un'operazione che avviano sul tuo sito web. 5 00:00:22,150 --> 00:00:25,840 Diamo un'occhiata ad alcuni diversi meccanismi che 6 00:00:25,840 --> 00:00:30,750 bootstrap fornisce per questo tipo di operazioni. 7 00:00:30,750 --> 00:00:38,810 Bootstrap ha molti componenti diversi che ci permettono di tenere informati gli utenti. 8 00:00:38,810 --> 00:00:42,440 Abbiamo dei badge che ci permettono di attirare l'attenzione degli 9 00:00:42,440 --> 00:00:46,550 utenti sui recenti aggiornamenti della nostra pagina web. 10 00:00:46,550 --> 00:00:48,365 Microsoft dispone di 11 00:00:48,365 --> 00:00:52,010 messaggi di avviso, errore e avviso che possono essere recapitati agli utenti nel caso in 12 00:00:52,010 --> 00:00:56,470 cui questi eseguano operazioni non consentite. 13 00:00:56,470 --> 00:01:01,870 Inoltre, possiamo utilizzare le barre di avanzamento per mantenere gli utenti informati 14 00:01:01,870 --> 00:01:08,135 sullo stato di avanzamento delle operazioni che avviano sul nostro sito web. 15 00:01:08,135 --> 00:01:11,455 Diamo un'occhiata a questo in un po 'più in dettaglio dopo. 16 00:01:11,455 --> 00:01:15,800 I badge sono un modo semplice per aggiungere piccole quantità di 17 00:01:15,800 --> 00:01:21,085 informazioni al tuo sito web per attirare l'attenzione dei visitatori. 18 00:01:21,085 --> 00:01:24,710 Ad esempio, si può vedere che abbiamo aggiunto un paio di badge a 19 00:01:24,710 --> 00:01:30,890 questa descrizione del piatto qui sulla nostra pagina principale in modo da 20 00:01:30,890 --> 00:01:37,480 poter vedere che abbiamo il badge di colore rosso che attira l'attenzione degli utenti 21 00:01:37,480 --> 00:01:40,495 sul fatto che questo è un elemento caldo nel menu 22 00:01:40,495 --> 00:01:44,605 e forse anche informarli su il prezzo del menu. 23 00:01:44,605 --> 00:01:51,455 Questo tipo di piccole informazioni può essere aggiunto al tuo sito web utilizzando un badge. 24 00:01:51,455 --> 00:01:52,960 Un badge per esempio, 25 00:01:52,960 --> 00:02:00,400 quello rosso qui viene creato utilizzando uno span con il distintivo classi e distintivo pericolo-distintivo. 26 00:02:00,400 --> 00:02:04,495 È possibile utilizzare i vari altri colori che sono incorporati 27 00:02:04,495 --> 00:02:11,945 nel framework bootstrap per creare badge di diversi colori. 28 00:02:11,945 --> 00:02:18,075 Allo stesso modo, è possibile utilizzare un badge pillola che crea un rettangolo arrotondato come si vede qui, 29 00:02:18,075 --> 00:02:21,700 e che può essere fatto applicando il 30 00:02:21,700 --> 00:02:26,000 badge, classe badge-pillola ad esso insieme alla classe badge. 31 00:02:26,000 --> 00:02:30,655 Gli avvisi sono un altro modo per informare gli utenti sulle informazioni. 32 00:02:30,655 --> 00:02:37,245 Così, ad esempio, un avviso può essere creato utilizzando il componente di avviso 33 00:02:37,245 --> 00:02:45,370 che può semplicemente essere creato applicando l'avviso con avviso di avviso, ad esempio, 34 00:02:45,370 --> 00:02:50,285 in questo esempio viene visualizzato avviso che crea un avviso di colore giallo. 35 00:02:50,285 --> 00:02:57,075 È possibile applicare nuovamente il pericolo primario e altri colori bootstrap lì. 36 00:02:57,075 --> 00:02:59,955 E poi la classe alert-dismissibile, 37 00:02:59,955 --> 00:03:06,190 consente di includere una classe lì che l'utente può fare clic per chiudere un avviso. 38 00:03:06,190 --> 00:03:08,140 Per supportare tale operazione, 39 00:03:08,140 --> 00:03:14,625 è necessario includere anche un pulsante nel tuo avviso come puoi vedere all'interno di questo div, 40 00:03:14,625 --> 00:03:16,740 abbiamo incluso questo pulsante qui. 41 00:03:16,740 --> 00:03:23,505 E il contenuto dell'avviso può essere formattato utilizzando HTML standard come potete vedere qui. 42 00:03:23,505 --> 00:03:27,490 Quindi, questo ci permette di creare un avviso sulla nostra pagina web. 43 00:03:27,490 --> 00:03:32,320 Così, per riassumere, l'avviso può essere creato da un applicando la classe di avviso 44 00:03:32,320 --> 00:03:37,585 insieme con ulteriori classi di avviso qualificanti, 45 00:03:37,585 --> 00:03:40,560 che consentono di creare avvisi in diversi colori. 46 00:03:40,560 --> 00:03:43,145 Possiamo anche includere link nei nostri avvisi. 47 00:03:43,145 --> 00:03:46,110 Possiamo anche rendere l'avviso non ammissibile utilizzando 48 00:03:46,110 --> 00:03:51,260 la classe di allerta non ammissibile e includendo un pulsante a croce all'interno del nostro avviso. 49 00:03:51,260 --> 00:03:55,360 Allo stesso modo, le barre di avanzamento sono incluse nei siti web per tenere 50 00:03:55,360 --> 00:03:59,680 gli utenti informati sui progressi di tutto ciò che abbiamo iniziato sul sito web. 51 00:03:59,680 --> 00:04:04,100 Quindi, ad esempio, se stai caricando un file su un sito web, 52 00:04:04,100 --> 00:04:08,105 allora potresti voler tenere informato l'utente su quanto del file ha 53 00:04:08,105 --> 00:04:12,780 completato il caricamento mostrando una barra di avanzamento sul sito web. 54 00:04:12,780 --> 00:04:16,780 Quindi, la creazione di una barra di avanzamento in bootstrap viene 55 00:04:16,780 --> 00:04:22,155 eseguita applicando la classe progress a un div e al suo interno possiamo applicare 56 00:04:22,155 --> 00:04:26,265 un altro div interno con la barra di avanzamento della classe e 57 00:04:26,265 --> 00:04:30,695 consentire anche che venga ulteriormente stilato usando cose come la 58 00:04:30,695 --> 00:04:34,890 barra di avanzamento a strisce e quindi è possibile applicare il colore per 59 00:04:34,890 --> 00:04:40,180 la barra di avanzamento specificando il colore come trattino BG e il colore. 60 00:04:40,180 --> 00:04:44,910 Quindi, in questo caso il bg-pericolo viene applicato a questa barra di avanzamento. 61 00:04:44,910 --> 00:04:47,150 Possiamo anche rendere la parte di avanzamento striping, 62 00:04:47,150 --> 00:04:49,395 possiamo anche animare la barra di avanzamento, 63 00:04:49,395 --> 00:04:54,100 e anche specificare quanto di quella barra di avanzamento deve essere in forma. 64 00:04:54,100 --> 00:04:58,015 Quindi, cambiando 65 00:04:58,015 --> 00:05:04,925 dinamicamente questo valore di larghezza è possibile creare una barra di avanzamento che continuerà ad aggiornarsi sulla pagina web. 66 00:05:04,925 --> 00:05:08,350 Quindi, per riassumere, una barra di avanzamento può essere creata 67 00:05:08,350 --> 00:05:12,030 applicando una classe di progresso al div e dentro 68 00:05:12,030 --> 00:05:14,260 c'è un div interno a cui si applica 69 00:05:14,260 --> 00:05:18,800 la classe barra di avanzamento ti permetterà di creare barra di avanzamento. 70 00:05:18,800 --> 00:05:22,450 È anche possibile impilare più barre di avanzamento insieme per creare 71 00:05:22,450 --> 00:05:28,325 una barra di avanzamento impilata e anche applicare colori diversi alla barra di avanzamento e 72 00:05:28,325 --> 00:05:32,865 può anche avere un aspetto diverso per la barra di avanzamento utilizzando 73 00:05:32,865 --> 00:05:36,570 la classe a strisce della barra di avanzamento e anche la 74 00:05:36,570 --> 00:05:41,375 classe animata della barra di avanzamento per animare il strisce sulla nostra barra di avanzamento. 75 00:05:41,375 --> 00:05:45,515 Ora che abbiamo esaminato vari modi di allertare gli utenti, 76 00:05:45,515 --> 00:05:50,925 facciamo un semplice esercizio successivo e usiamo i badge 77 00:05:50,925 --> 00:05:58,090 nella nostra pagina web per attirare l'attenzione degli utenti.