1
00:00:03,580 --> 00:00:09,250
Nella lezione precedente, abbiamo visto diversi modi per rivelare contenuti agli utenti.

2
00:00:09,250 --> 00:00:11,870
Quindi, questa sarebbe una sovrapposizione sulla parte superiore della

3
00:00:11,870 --> 00:00:15,285
tua pagina web per mostrare le informazioni agli utenti.

4
00:00:15,285 --> 00:00:17,880
Quindi, esamineremo due di questi approcci,

5
00:00:17,880 --> 00:00:21,575
Suggerimenti e Modali in questo esercizio.

6
00:00:21,575 --> 00:00:25,300
Innanzitutto, aggiungeremo un suggerimento a questa pagina.

7
00:00:25,300 --> 00:00:29,040
Quindi, andando a index.html e nel Jumbotron,

8
00:00:29,040 --> 00:00:33,305
vediamo questo pulsante nel Jumbotron lì.

9
00:00:33,305 --> 00:00:36,000
A questo pulsante, ho intenzione di aggiungere un suggerimento.

10
00:00:36,000 --> 00:00:38,125
Quindi, andando in questo pulsante,

11
00:00:38,125 --> 00:00:44,380
quello che farò ora è semplicemente andare nella riga successiva in

12
00:00:44,380 --> 00:00:50,420
modo che sia un po 'più chiaro scrivere il codice lì e in questo pulsante,

13
00:00:50,420 --> 00:00:53,535
ho intenzione di introdurre il tooltip qui.

14
00:00:53,535 --> 00:00:57,740
Quindi, dopo l'avviso del pulsante, direi,

15
00:00:58,560 --> 00:01:04,550
data-toggle-tooltip,

16
00:01:04,550 --> 00:01:12,230
in modo da poter vedere che il componente javascript viene utilizzato qui e poi data-html-true.

17
00:01:12,230 --> 00:01:17,630
Quindi, se applichiamo questo attributo HTML dati e lo inviamo a true,

18
00:01:17,630 --> 00:01:21,965
ciò significa che il contenuto tooltip può essere stilato usando

19
00:01:21,965 --> 00:01:27,060
HTML e poi diranno la riga successiva,

20
00:01:27,060 --> 00:01:31,165
darò l'attributo del titolo.

21
00:01:31,165 --> 00:01:35,680
Quindi, questo è dove verrà racchiuso il contenuto del tooltip.

22
00:01:35,680 --> 00:01:42,090
Quindi diremo «o chiamaci a».

23
00:01:45,810 --> 00:01:52,950
Quindi, puoi vedere che sto usando HTML per

24
00:01:52,950 --> 00:02:02,510
formattare il contenuto del tooltip lì.

25
00:02:06,070 --> 00:02:16,315
Quindi con questo, il tooltip viene introdotto nel pulsante lì e anche l'ultimo attributo che

26
00:02:16,315 --> 00:02:26,095
darò è il posizionamento dei dati che darò come in basso qui.

27
00:02:26,095 --> 00:02:32,700
Quindi, il che significa che questo suggerimento verrà mostrato nella parte inferiore di questo pulsante qui.

28
00:02:32,700 --> 00:02:36,815
Dopo aver aggiunto questo nel pulsante,

29
00:02:36,815 --> 00:02:38,610
ora andremo e aggiungeremo

30
00:02:38,610 --> 00:02:45,130
del codice JavaScript in fondo a questa pagina per attivare questo tooltip.

31
00:02:45,130 --> 00:02:47,505
Andando in fondo alla pagina,

32
00:02:47,505 --> 00:02:57,470
lasciami introdurre lo script lì aggiungendo i tag per lo script.

33
00:02:57,470 --> 00:03:04,665
All' interno di questo, definiremo il codice JavaScript attuale qui.

34
00:03:04,665 --> 00:03:07,790
Quindi diremo documenti in dollari.

35
00:03:07,790 --> 00:03:13,910
Quindi, questo script è in uso la sintassi jQuery qui.

36
00:03:15,890 --> 00:03:20,880
Quindi, questo specifica quando il documento è pronto,

37
00:03:20,880 --> 00:03:23,810
quando questo particolare documento HTML è pronto

38
00:03:23,810 --> 00:03:28,775
per il rendering e definire richiamare questa particolare funzione qui.

39
00:03:28,775 --> 00:03:32,790
Quindi, forniamo la funzione JavaScript da

40
00:03:32,790 --> 00:03:37,780
richiamare a quel punto in modo da specificare la nostra funzione e poi diremo

41
00:03:38,570 --> 00:03:51,510
tra parentesi data-toggle-tooltip e tooltip.

42
00:03:53,240 --> 00:04:01,315
Quindi, questo è il codice che stiamo per introdurre in questa pagina qui.

43
00:04:01,315 --> 00:04:09,255
Questo è nella sintassi jQuery e copriremo jQuery un po 'di più nel modulo successivo.

44
00:04:09,255 --> 00:04:13,995
Per il momento, questo sta specificando che ovunque ci sia un attributo di

45
00:04:13,995 --> 00:04:19,650
questo tipo per quel particolare tag HTML,

46
00:04:19,650 --> 00:04:21,570
attiva il tooltip.

47
00:04:21,570 --> 00:04:25,420
Quindi, ma questa modifica salverà le modifiche e

48
00:04:25,420 --> 00:04:30,510
poi andrà a dare un'occhiata a come appare il tooltip sulla pagina web.

49
00:04:30,510 --> 00:04:32,760
Andando alla pagina web,

50
00:04:32,760 --> 00:04:36,600
ora quando teniamo il puntatore del mouse sul modello qui,

51
00:04:36,600 --> 00:04:40,755
puoi vedere che il tooltip viene visualizzato in basso qui.

52
00:04:40,755 --> 00:04:44,950
Quindi, puoi notare che il contenuto di questo tooltip è

53
00:04:44,950 --> 00:04:50,115
esattamente quello che abbiamo dato come attributo title per quel fondo lì.

54
00:04:50,115 --> 00:04:54,095
Quindi, questo è il modo in cui possiamo aggiungere suggerimenti alla nostra pagina.

55
00:04:54,095 --> 00:04:58,030
Le descrizioni comandi sono un buon modo per fornire alcune informazioni aggiuntive per

56
00:04:58,030 --> 00:05:03,370
l'utente quando l'utente naviga in diverse posizioni della pagina.

57
00:05:03,370 --> 00:05:06,790
Continuando con l'esercizio, nella fase successiva,

58
00:05:06,790 --> 00:05:10,045
ci accingiamo a creare un modale nella nostra pagina web.

59
00:05:10,045 --> 00:05:17,665
Questo modale ospiterà il modulo di login e verrà mostrato utilizzando un link nella loro barra di navigazione.

60
00:05:17,665 --> 00:05:19,720
Quindi, per iniziare,

61
00:05:19,720 --> 00:05:26,700
bootstrap consiglia che tutto il codice modale correlato essere posizionato nella parte superiore della tua pagina.

62
00:05:26,700 --> 00:05:31,530
Quindi, entrerò e scriverò sotto la barra di navigazione qui,

63
00:05:31,530 --> 00:05:34,455
inserirò nel codice per il modale lì.

64
00:05:34,455 --> 00:05:36,080
Quindi, per creare una modale,

65
00:05:36,080 --> 00:05:43,400
inizierò dicendo div ID login modale.

66
00:05:43,400 --> 00:05:48,355
Quindi, diamo un ID a questo modale in modo che possa essere attivato dal

67
00:05:48,355 --> 00:05:53,895
collegamento della barra di navigazione e quindi classe come «dissolvenza modale».

68
00:05:53,895 --> 00:05:56,910
Quindi vedi che la classe è modale e dissolvenza significa

69
00:05:56,910 --> 00:06:00,220
che quando il modale viene portato sullo schermo,

70
00:06:00,220 --> 00:06:07,185
svanirà sullo schermo e il ruolo è come una finestra di dialogo.

71
00:06:07,185 --> 00:06:11,625
Quindi, il che significa che viene visualizzato in cima alla pagina.

72
00:06:11,625 --> 00:06:14,195
Chiudiamo il div della parte.

73
00:06:14,195 --> 00:06:18,415
Quindi qui dentro, creeremo la modale.

74
00:06:18,415 --> 00:06:28,510
Quindi, lì dentro, creerò il secondo div con la classe come modal-dialog e poi

75
00:06:28,510 --> 00:06:32,620
dentro qui definiremo il contenuto

76
00:06:32,620 --> 00:06:39,550
del modale attuale qui e chiuderemo il div.

77
00:06:39,550 --> 00:06:45,220
E così, questo è quello di essere il contenuto modale sarà strutturato qui.

78
00:06:45,220 --> 00:06:51,370
Quindi, all'interno di questa finestra di dialogo modale creeremo un altro div con

79
00:06:51,370 --> 00:07:00,770
il contenuto modale della classe e

80
00:07:00,770 --> 00:07:10,350
chiuderemo il div e un tipico modale conterrà un'intestazione modale.

81
00:07:10,350 --> 00:07:14,255
Quindi, è lì che ospiterà il prossimo div.

82
00:07:14,255 --> 00:07:23,635
E poi un corpo modale

83
00:07:23,635 --> 00:07:28,980
che conterrà gran parte del contenuto modale correlato.

84
00:07:28,980 --> 00:07:34,835
Tutte queste sezioni del modale sono opzionali,

85
00:07:34,835 --> 00:07:38,020
ma almeno dovresti avere una di queste sezioni nel tuo modale

86
00:07:38,020 --> 00:07:41,645
altrimenti non ha senso creare la modale lì.

87
00:07:41,645 --> 00:07:46,455
Quindi, con questo, la struttura del modale è ora pronta.

88
00:07:46,455 --> 00:07:50,550
Quindi, entreremo e riempiremo il contenuto in questo modale.

89
00:07:50,550 --> 00:07:54,005
Quindi ora, dobbiamo definire cosa va nella modale.

90
00:07:54,005 --> 00:07:57,505
Ora, nell'intestazione inseriremo un pulsante,

91
00:07:57,505 --> 00:08:01,770
un cross-button nella modale che quando cliccato chiuderà la modale.

92
00:08:01,770 --> 00:08:05,715
Questo è il solito modo in cui vengono progettate le modali.

93
00:08:05,715 --> 00:08:08,805
E il corpo modale stesso conterrà la forma.

94
00:08:08,805 --> 00:08:12,610
Ora, una modale può contenere tutto ciò che si desidera, quindi ad esempio,

95
00:08:12,610 --> 00:08:16,040
se si fa clic su un'immagine in

96
00:08:16,040 --> 00:08:19,630
una galleria di immagini e si desidera mostrare la dimensione più grande dell'immagine,

97
00:08:19,630 --> 00:08:24,415
anche lì è possibile utilizzare una modale per visualizzare le informazioni.

98
00:08:24,415 --> 00:08:26,280
Ora in questo esercizio,

99
00:08:26,280 --> 00:08:31,765
ci accingiamo a utilizzare la modale per ospitare un modulo che viene mostrato per l'utente.

100
00:08:31,765 --> 00:08:35,695
Ok, ora, nell'intestazione modale,

101
00:08:35,695 --> 00:08:40,175
introdurremo un pulsante con

102
00:08:40,175 --> 00:08:49,170
il pulsante type e la classe close.

103
00:08:49,170 --> 00:08:59,080
Quindi, vedi che questo è un pulsante che viene utilizzato per chiudere il modale e poi dirai,

104
00:08:59,080 --> 00:09:04,685
licenziare i dati e poi modale.

105
00:09:04,685 --> 00:09:07,180
Quindi, ciò significa che questo particolare pulsante

106
00:09:07,180 --> 00:09:09,845
quando cliccato chiuderà la modale dallo schermo.

107
00:09:09,845 --> 00:09:18,700
E questo pulsante, ho intenzione di usare i tempi,

108
00:09:21,100 --> 00:09:24,900
verrà visualizzato come una croce nelle modali qui.

109
00:09:24,900 --> 00:09:27,380
Quindi direi volte qui.

110
00:09:27,380 --> 00:09:30,549
Prima di questo pulsante, ci

111
00:09:30,549 --> 00:09:36,470
accingiamo a introdurre un'intestazione che mostreremo nell'intestazione del modale quindi

112
00:09:36,470 --> 00:09:46,180
inizierò con un h4 con il titolo modale di classe.

113
00:09:46,180 --> 00:09:48,635
E poi all'interno di questo h4,

114
00:09:48,635 --> 00:09:52,200
includerò il titolo del modale,

115
00:09:52,200 --> 00:09:56,995
che è login perché questo mostrerà il modulo di login.

116
00:09:56,995 --> 00:10:01,625
Ora che abbiamo inserito alcuni dettagli in questa modale,

117
00:10:01,625 --> 00:10:06,110
aggiungiamo il link nella nostra barra di navigazione che

118
00:10:06,110 --> 00:10:07,770
attiverà questa modale e poi avremo

119
00:10:07,770 --> 00:10:11,515
una rapida occhiata a come appare la modale sullo schermo.

120
00:10:11,515 --> 00:10:14,280
Andando alla barra di navigazione,

121
00:10:14,280 --> 00:10:16,095
subito dopo l'UL qui,

122
00:10:16,095 --> 00:10:17,845
includerò in

123
00:10:17,845 --> 00:10:22,910
un link che può essere utilizzato per attivare la visualizzazione e il nascondiglio del modale.

124
00:10:22,910 --> 00:10:31,080
Quindi, per farlo, entrerò e userò uno span con il testo navbar della classe.

125
00:10:31,080 --> 00:10:37,950
Questo è ciò che mi permette di includere un link nella barra di navigazione e mostrarlo come testo.

126
00:10:37,950 --> 00:10:39,995
Quindi, all'interno dello span,

127
00:10:39,995 --> 00:10:45,345
userò un A con l'interruttore dati, in

128
00:10:45,345 --> 00:10:50,010
modo da poter vedere l'interruttore dati JavaScript in arrivo e

129
00:10:50,010 --> 00:10:55,400
l'interruttore dati è per un modale e quindi un target dati.

130
00:10:55,400 --> 00:11:03,940
Ricordi che avevamo dato l'ID come modale di accesso al nostro-

131
00:11:04,170 --> 00:11:06,460
Modal che abbiamo incluso.

132
00:11:06,460 --> 00:11:11,950
Quindi, ho intenzione di usarlo come target di dati con l'hash di fronte a quello.

133
00:11:11,950 --> 00:11:15,815
E qui dentro, entrerò e userò

134
00:11:15,815 --> 00:11:24,520
un'icona impressionante font per un login.

135
00:11:24,520 --> 00:11:28,710
Quindi, questo è un font impressionante

136
00:11:28,800 --> 00:11:37,945
icona «fa- sign-in» e dire login e chiudere l'e-tech.

137
00:11:37,945 --> 00:11:43,975
Quindi, con questo, salviamo le modifiche e diamo un'occhiata alla pagina web.

138
00:11:43,975 --> 00:11:47,265
Andando alla nostra pagina web nel browser,

139
00:11:47,265 --> 00:11:50,530
ora vedi che sul bordo destro,

140
00:11:50,530 --> 00:11:56,680
vedi questo login con questa icona creata lì.

141
00:11:56,680 --> 00:12:00,850
Quindi questo è il link che attiverà la visualizzazione del modale.

142
00:12:00,850 --> 00:12:02,530
Quindi, se clicco su questo link,

143
00:12:02,530 --> 00:12:05,015
il modale verrà visualizzato sullo schermo.

144
00:12:05,015 --> 00:12:08,500
Quindi nota che quando abbiamo creato questo modale abbiamo detto,

145
00:12:08,500 --> 00:12:14,565
intestazione che conteneva il login e poi anche questo pulsante e poi il corpo

146
00:12:14,565 --> 00:12:17,605
, attualmente vuoto, introdurremo più codice lì.

147
00:12:17,605 --> 00:12:20,860
Ora, se si fa clic su questo pulsante, la modale scomparirà.

148
00:12:20,860 --> 00:12:23,170
Cliccate di nuovo su questo, la modale viene mostrata.

149
00:12:23,170 --> 00:12:25,470
Anche se si fa clic al di fuori della modale, la modale scomparirà.

150
00:12:25,470 --> 00:12:30,985
Quindi questo è il comportamento della modale che ci aspettiamo.

151
00:12:30,985 --> 00:12:36,275
Ora, nel prossimo passo entrerò e introdurrò il modulo qui.

152
00:12:36,275 --> 00:12:39,990
Non ho intenzione di spiegare i dettagli del modulo perché hai

153
00:12:39,990 --> 00:12:43,924
già studiato moduli in una delle lezioni precedenti.

154
00:12:43,924 --> 00:12:47,830
Quindi ho intenzione di semplicemente entrare e incollare il codice del modulo e

155
00:12:47,830 --> 00:12:52,370
poi daremo un'occhiata al modulo nella modale qui.

156
00:12:52,370 --> 00:12:54,505
Tornando al codice,

157
00:12:54,505 --> 00:12:57,640
ora puoi vedere che nel corpo modale,

158
00:12:57,640 --> 00:13:01,115
ho compilato un modulo.

159
00:13:01,115 --> 00:13:07,850
E poi ho due gruppi di moduli qui con un input con il tipo email

160
00:13:07,850 --> 00:13:14,795
e la password del tipo di input e poi ho una casella di controllo qui che ho.

161
00:13:14,795 --> 00:13:21,970
Quindi, questo dovrebbe essere facile per te decifrare ciò che questo modulo è la struttura del codice EE,

162
00:13:21,970 --> 00:13:26,505
dalla tua comprensione di come sono progettati i moduli Bootstrap.

163
00:13:26,505 --> 00:13:28,250
Ho messo due bottoni.

164
00:13:28,250 --> 00:13:33,060
Uno è un pulsante di invio e un altro è un pulsante di annullamento.

165
00:13:33,060 --> 00:13:36,440
Il pulsante Annulla ha il primo.

166
00:13:36,440 --> 00:13:41,580
Il pulsante Annulla qui ha il modello di licenziamento dei dati.

167
00:13:41,580 --> 00:13:45,215
Quindi, il che significa che quando si fa clic sul pulsante Annulla il modello verrà respinto.

168
00:13:45,215 --> 00:13:50,170
E l'altro è un pulsante di invio che viene utilizzato per inviare il modulo.

169
00:13:50,170 --> 00:13:51,480
Quindi, con queste modifiche,

170
00:13:51,480 --> 00:13:55,550
salviamo le modifiche e poi andiamo a dare un'occhiata alla nostra pagina Web.

171
00:13:55,550 --> 00:13:57,205
Tornando alla pagina web,

172
00:13:57,205 --> 00:14:04,045
ora fai clic sul login e vedrai un modulo per un utente per accedere.

173
00:14:04,045 --> 00:14:07,025
Quindi vedrai che hai due scatole qui.

174
00:14:07,025 --> 00:14:09,850
Input caselle qui per l'immissione di e-mail e password,

175
00:14:09,850 --> 00:14:12,870
e poi una casella di controllo per dire Ricordati di me.

176
00:14:12,870 --> 00:14:15,320
E poi hai un accesso e un annullamento.

177
00:14:15,320 --> 00:14:17,860
Quindi, se si fa clic su Annulla il modale andrà via.

178
00:14:17,860 --> 00:14:20,710
Proprio come quando si fa clic sulla croce lì.

179
00:14:20,710 --> 00:14:23,915
E poi se si compila queste informazioni e si continua a fare clic su Accedi,

180
00:14:23,915 --> 00:14:26,120
il processo di accesso dovrebbe essere avviato.

181
00:14:26,120 --> 00:14:29,885
In questo momento non abbiamo un server per questo funzionare,

182
00:14:29,885 --> 00:14:34,640
ma ti sto solo mostrando in Bootstrap come creeresti un modulo come questo.

183
00:14:34,640 --> 00:14:37,240
Sono sicuro che hai visto cose come queste su

184
00:14:37,240 --> 00:14:40,610
molti siti web in cui quando fai clic su un pulsante di accesso

185
00:14:40,610 --> 00:14:43,220
qualcosa di simile con il modulo si apre sullo schermo

186
00:14:43,220 --> 00:14:46,585
e si aspetta di digitare le informazioni.

187
00:14:46,585 --> 00:14:50,160
Quindi ora vedrai come puoi sfruttare i modelli per visualizzare

188
00:14:50,160 --> 00:14:54,740
le informazioni che si sovrappongono alla tua pagina Web.

189
00:14:54,740 --> 00:14:57,910
Con questo completiamo questo esercizio.

190
00:14:57,910 --> 00:15:01,950
In questo esercizio, abbiamo visto l'uso di descrizioni comandi

191
00:15:01,950 --> 00:15:06,835
e abbiamo visto l'uso di modelli per visualizzare i contenuti.

192
00:15:06,835 --> 00:15:14,200
Questo è un buon momento per voi per fare un git-commint con i suggerimenti e i modelli del messaggio.