Nella lezione precedente, abbiamo visto diversi modi per rivelare contenuti agli utenti.
Quindi, questa sarebbe una sovrapposizione sulla parte superiore della
tua pagina web per mostrare le informazioni agli utenti.
Quindi, esamineremo due di questi approcci,
Suggerimenti e Modali in questo esercizio.
Innanzitutto, aggiungeremo un suggerimento a questa pagina.
Quindi, andando a index.html e nel Jumbotron,
vediamo questo pulsante nel Jumbotron lì.
A questo pulsante, ho intenzione di aggiungere un suggerimento.
Quindi, andando in questo pulsante,
quello che farò ora è semplicemente andare nella riga successiva in
modo che sia un po 'più chiaro scrivere il codice lì e in questo pulsante,
ho intenzione di introdurre il tooltip qui.
Quindi, dopo l'avviso del pulsante, direi,
data-toggle-tooltip,
in modo da poter vedere che il componente javascript viene utilizzato qui e poi data-html-true.
Quindi, se applichiamo questo attributo HTML dati e lo inviamo a true,
ciò significa che il contenuto tooltip può essere stilato usando
HTML e poi diranno la riga successiva,
darò l'attributo del titolo.
Quindi, questo è dove verrà racchiuso il contenuto del tooltip.
Quindi diremo «o chiamaci a».
Quindi, puoi vedere che sto usando HTML per
formattare il contenuto del tooltip lì.
Quindi con questo, il tooltip viene introdotto nel pulsante lì e anche l'ultimo attributo che
darò è il posizionamento dei dati che darò come in basso qui.
Quindi, il che significa che questo suggerimento verrà mostrato nella parte inferiore di questo pulsante qui.
Dopo aver aggiunto questo nel pulsante,
ora andremo e aggiungeremo
del codice JavaScript in fondo a questa pagina per attivare questo tooltip.
Andando in fondo alla pagina,
lasciami introdurre lo script lì aggiungendo i tag per lo script.
All' interno di questo, definiremo il codice JavaScript attuale qui.
Quindi diremo documenti in dollari.
Quindi, questo script è in uso la sintassi jQuery qui.
Quindi, questo specifica quando il documento è pronto,
quando questo particolare documento HTML è pronto
per il rendering e definire richiamare questa particolare funzione qui.
Quindi, forniamo la funzione JavaScript da
richiamare a quel punto in modo da specificare la nostra funzione e poi diremo
tra parentesi data-toggle-tooltip e tooltip.
Quindi, questo è il codice che stiamo per introdurre in questa pagina qui.
Questo è nella sintassi jQuery e copriremo jQuery un po 'di più nel modulo successivo.
Per il momento, questo sta specificando che ovunque ci sia un attributo di
questo tipo per quel particolare tag HTML,
attiva il tooltip.
Quindi, ma questa modifica salverà le modifiche e
poi andrà a dare un'occhiata a come appare il tooltip sulla pagina web.
Andando alla pagina web,
ora quando teniamo il puntatore del mouse sul modello qui,
puoi vedere che il tooltip viene visualizzato in basso qui.
Quindi, puoi notare che il contenuto di questo tooltip è
esattamente quello che abbiamo dato come attributo title per quel fondo lì.
Quindi, questo è il modo in cui possiamo aggiungere suggerimenti alla nostra pagina.
Le descrizioni comandi sono un buon modo per fornire alcune informazioni aggiuntive per
l'utente quando l'utente naviga in diverse posizioni della pagina.
Continuando con l'esercizio, nella fase successiva,
ci accingiamo a creare un modale nella nostra pagina web.
Questo modale ospiterà il modulo di login e verrà mostrato utilizzando un link nella loro barra di navigazione.
Quindi, per iniziare,
bootstrap consiglia che tutto il codice modale correlato essere posizionato nella parte superiore della tua pagina.
Quindi, entrerò e scriverò sotto la barra di navigazione qui,
inserirò nel codice per il modale lì.
Quindi, per creare una modale,
inizierò dicendo div ID login modale.
Quindi, diamo un ID a questo modale in modo che possa essere attivato dal
collegamento della barra di navigazione e quindi classe come «dissolvenza modale».
Quindi vedi che la classe è modale e dissolvenza significa
che quando il modale viene portato sullo schermo,
svanirà sullo schermo e il ruolo è come una finestra di dialogo.
Quindi, il che significa che viene visualizzato in cima alla pagina.
Chiudiamo il div della parte.
Quindi qui dentro, creeremo la modale.
Quindi, lì dentro, creerò il secondo div con la classe come modal-dialog e poi
dentro qui definiremo il contenuto
del modale attuale qui e chiuderemo il div.
E così, questo è quello di essere il contenuto modale sarà strutturato qui.
Quindi, all'interno di questa finestra di dialogo modale creeremo un altro div con
il contenuto modale della classe e
chiuderemo il div e un tipico modale conterrà un'intestazione modale.
Quindi, è lì che ospiterà il prossimo div.
E poi un corpo modale
che conterrà gran parte del contenuto modale correlato.
Tutte queste sezioni del modale sono opzionali,
ma almeno dovresti avere una di queste sezioni nel tuo modale
altrimenti non ha senso creare la modale lì.
Quindi, con questo, la struttura del modale è ora pronta.
Quindi, entreremo e riempiremo il contenuto in questo modale.
Quindi ora, dobbiamo definire cosa va nella modale.
Ora, nell'intestazione inseriremo un pulsante,
un cross-button nella modale che quando cliccato chiuderà la modale.
Questo è il solito modo in cui vengono progettate le modali.
E il corpo modale stesso conterrà la forma.
Ora, una modale può contenere tutto ciò che si desidera, quindi ad esempio,
se si fa clic su un'immagine in
una galleria di immagini e si desidera mostrare la dimensione più grande dell'immagine,
anche lì è possibile utilizzare una modale per visualizzare le informazioni.
Ora in questo esercizio,
ci accingiamo a utilizzare la modale per ospitare un modulo che viene mostrato per l'utente.
Ok, ora, nell'intestazione modale,
introdurremo un pulsante con
il pulsante type e la classe close.
Quindi, vedi che questo è un pulsante che viene utilizzato per chiudere il modale e poi dirai,
licenziare i dati e poi modale.
Quindi, ciò significa che questo particolare pulsante
quando cliccato chiuderà la modale dallo schermo.
E questo pulsante, ho intenzione di usare i tempi,
verrà visualizzato come una croce nelle modali qui.
Quindi direi volte qui.
Prima di questo pulsante, ci
accingiamo a introdurre un'intestazione che mostreremo nell'intestazione del modale quindi
inizierò con un h4 con il titolo modale di classe.
E poi all'interno di questo h4,
includerò il titolo del modale,
che è login perché questo mostrerà il modulo di login.
Ora che abbiamo inserito alcuni dettagli in questa modale,
aggiungiamo il link nella nostra barra di navigazione che
attiverà questa modale e poi avremo
una rapida occhiata a come appare la modale sullo schermo.
Andando alla barra di navigazione,
subito dopo l'UL qui,
includerò in
un link che può essere utilizzato per attivare la visualizzazione e il nascondiglio del modale.
Quindi, per farlo, entrerò e userò uno span con il testo navbar della classe.
Questo è ciò che mi permette di includere un link nella barra di navigazione e mostrarlo come testo.
Quindi, all'interno dello span,
userò un A con l'interruttore dati, in
modo da poter vedere l'interruttore dati JavaScript in arrivo e
l'interruttore dati è per un modale e quindi un target dati.
Ricordi che avevamo dato l'ID come modale di accesso al nostro-
Modal che abbiamo incluso.
Quindi, ho intenzione di usarlo come target di dati con l'hash di fronte a quello.
E qui dentro, entrerò e userò
un'icona impressionante font per un login.
Quindi, questo è un font impressionante
icona «fa- sign-in» e dire login e chiudere l'e-tech.
Quindi, con questo, salviamo le modifiche e diamo un'occhiata alla pagina web.
Andando alla nostra pagina web nel browser,
ora vedi che sul bordo destro,
vedi questo login con questa icona creata lì.
Quindi questo è il link che attiverà la visualizzazione del modale.
Quindi, se clicco su questo link,
il modale verrà visualizzato sullo schermo.
Quindi nota che quando abbiamo creato questo modale abbiamo detto,
intestazione che conteneva il login e poi anche questo pulsante e poi il corpo
, attualmente vuoto, introdurremo più codice lì.
Ora, se si fa clic su questo pulsante, la modale scomparirà.
Cliccate di nuovo su questo, la modale viene mostrata.
Anche se si fa clic al di fuori della modale, la modale scomparirà.
Quindi questo è il comportamento della modale che ci aspettiamo.
Ora, nel prossimo passo entrerò e introdurrò il modulo qui.
Non ho intenzione di spiegare i dettagli del modulo perché hai
già studiato moduli in una delle lezioni precedenti.
Quindi ho intenzione di semplicemente entrare e incollare il codice del modulo e
poi daremo un'occhiata al modulo nella modale qui.
Tornando al codice,
ora puoi vedere che nel corpo modale,
ho compilato un modulo.
E poi ho due gruppi di moduli qui con un input con il tipo email
e la password del tipo di input e poi ho una casella di controllo qui che ho.
Quindi, questo dovrebbe essere facile per te decifrare ciò che questo modulo è la struttura del codice EE,
dalla tua comprensione di come sono progettati i moduli Bootstrap.
Ho messo due bottoni.
Uno è un pulsante di invio e un altro è un pulsante di annullamento.
Il pulsante Annulla ha il primo.
Il pulsante Annulla qui ha il modello di licenziamento dei dati.
Quindi, il che significa che quando si fa clic sul pulsante Annulla il modello verrà respinto.
E l'altro è un pulsante di invio che viene utilizzato per inviare il modulo.
Quindi, con queste modifiche,
salviamo le modifiche e poi andiamo a dare un'occhiata alla nostra pagina Web.
Tornando alla pagina web,
ora fai clic sul login e vedrai un modulo per un utente per accedere.
Quindi vedrai che hai due scatole qui.
Input caselle qui per l'immissione di e-mail e password,
e poi una casella di controllo per dire Ricordati di me.
E poi hai un accesso e un annullamento.
Quindi, se si fa clic su Annulla il modale andrà via.
Proprio come quando si fa clic sulla croce lì.
E poi se si compila queste informazioni e si continua a fare clic su Accedi,
il processo di accesso dovrebbe essere avviato.
In questo momento non abbiamo un server per questo funzionare,
ma ti sto solo mostrando in Bootstrap come creeresti un modulo come questo.
Sono sicuro che hai visto cose come queste su
molti siti web in cui quando fai clic su un pulsante di accesso
qualcosa di simile con il modulo si apre sullo schermo
e si aspetta di digitare le informazioni.
Quindi ora vedrai come puoi sfruttare i modelli per visualizzare
le informazioni che si sovrappongono alla tua pagina Web.
Con questo completiamo questo esercizio.
In questo esercizio, abbiamo visto l'uso di descrizioni comandi
e abbiamo visto l'uso di modelli per visualizzare i contenuti.
Questo è un buon momento per voi per fare un git-commint con i suggerimenti e i modelli del messaggio.