[MUSIC]
Cerchiamo ora di capire diversi meccanismi per permetterci di
visualizzare informazioni agli utenti che sovrappongono il contenuto della tua pagina web.
Quindi qui vedremo tre diversi costrutti che sono disponibili in Bootstrap
chiamati tooltips, popover e modali.
Quindi quali sono i suggerimenti, i popover e i modali e come sono utili?
Vedremo prima alcune idee di base, e poi andremo a guardare alcuni esempi.
Nell' esercizio che segue, useremo descrizioni comandi e
modali nella nostra pagina web e vedremo un esempio di popover.
Quindi, come ho detto, descrizioni comandi, popover e modali sono un modo per rivelare contenuti
agli utenti, quando l'utente interagisce con determinati elementi della tua pagina web.
Ad esempio, quando il mouse dell'utente
fa clic su un pulsante, o passa il mouse su un pulsante, o fa clic su un link,
o raggiunge un certo punto della tua pagina web.
Quindi tutti questi attiveranno le informazioni da visualizzare agli utenti.
Quindi, in questo caso,
le informazioni vengono visualizzate come una sovrapposizione sopra la tua pagina web.
Quindi il contenuto sottostante della pagina web è ancora lì, ma
questo è disposto sopra il contenuto sottostante.
Quindi, in termini di flessibilità, le descrizioni comandi sono le più semplici da implementare, ma
allo stesso tempo hanno una flessibilità limitata nel modo in cui possono visualizzare le informazioni. I
popover sono più flessibili delle descrizioni comandi, ma hanno anche le loro limitazioni.
Modals ti offre il supporto più esteso per la
visualizzazione dei contenuti in un'ampia varietà di modi.
Ad esempio, andiamo alla nostra pagina web su cui abbiamo lavorato.
Lo vedi quando passiamo il puntatore del mouse su questo pulsante.
Questo messaggio viene visualizzato sullo schermo qui,
con alcune informazioni aggiuntive.
Questo è un esempio di descrizione comando.
Ciò consente di visualizzare piccole quantità di informazioni per gli utenti.
Quindi, per esempio, se stai cercando di guidare gli utenti attraverso il tuo sito web e
vuoi che sappiano cosa succede quando fai clic su varie posizioni qualsiasi pagina web,
questi forse un buon modo per ricordare loro ciò che è previsto.
Così si potrebbe facilmente progettare, ad esempio, le
procedure dettagliate del vostro sito Web utilizzando questi suggerimenti per indicare agli utenti.
Se vuoi informazioni un po 'più dettagliate,
allora i popover sarebbero più utili.
Lo stesso esempio, implementare e utilizzare un popover sarebbe simile a questo.
Ora, in questo caso,
dovrai fare clic esplicitamente sul pulsante per mostrare il popover.
Quindi, in tal caso, il popover viene mostrato con alcune informazioni sul titolo e
quindi il contenuto effettivo nella parte inferiore di quel popover.
Ora, respingendo il popover richiederà di nuovo di fare clic sul fondo lì.
Quindi questo è il comportamento di un popover.
In alcune circostanze, i popover sono più utili delle descrizioni comandi.
Il nostro terzo tipo di overlay di dati è il modale.
Un modale consente di presentare
informazioni più dettagliate agli utenti rispetto a un tooltip e popover.
Il contenuto della modale è a sua volta diviso in un'intestazione, corpo e piè di pagina.
E il modale stesso può contenere informazioni molto più dettagliate.
E puoi usare l'intera griglia Bootstrap,
all'interno del corpo modale, per organizzare il contenuto effettivo.
Guardiamo un paio di esempi dell'uso di modali prossimo.
Andando alla nostra pagina web, vedrete che sul lato destro,
qui abbiamo un link qui chiamato Login.
Quindi, quando fai clic su quel link, noterai che questo modale
con il loro modulo di login è spuntato sullo schermo.
Quindi questo è il comportamento tipico di un modale.
E così qui è possibile digitare le informazioni, e
quindi fare clic sul pulsante Accedi per accedere al tuo sito web.
Andando alla tua pagina Coursera, ecco un esempio di vita reale dell'uso di un modale.
Ad esempio, se fai clic sul pulsante Accedi qui,
puoi vedere che su Coursera, appare un modulo sullo schermo.
Quindi questo è un altro uso di un modale nella tua pagina web.
Ora che avete visto esempi di descrizioni comandi, popover e modali,
andiamo al prossimo esercizio, dove creeremo un suggerimento sulla nostra pagina index.html.
Creeremo anche una modale che permette all'utente di digitare le informazioni per
accedere alla nostra pagina web.
[ MUSIC]