1
00:00:03,580 --> 00:00:09,250
En la conferencia anterior, vimos varias maneras de revelar contenido a los usuarios.

2
00:00:09,250 --> 00:00:11,870
Por lo tanto, esto sería una superposición en la parte superior de

3
00:00:11,870 --> 00:00:15,285
su página web para mostrar la información a los usuarios.

4
00:00:15,285 --> 00:00:17,880
Por lo tanto, veremos dos de esos enfoques,

5
00:00:17,880 --> 00:00:21,575
Tooltips y Modals en este ejercicio.

6
00:00:21,575 --> 00:00:25,300
Primero, agregaremos una información sobre herramientas a esta página.

7
00:00:25,300 --> 00:00:29,040
Entonces, yendo a index.html y en el Jumbotron,

8
00:00:29,040 --> 00:00:33,305
vemos este botón en el Jumbotron allí.

9
00:00:33,305 --> 00:00:36,000
A este botón, voy a agregar una descripción emergente.

10
00:00:36,000 --> 00:00:38,125
Así que al entrar en este botón,

11
00:00:38,125 --> 00:00:44,380
lo que haré ahora es simplemente ir a la siguiente línea

12
00:00:44,380 --> 00:00:50,420
para que quede un poco más claro escribir el código allí y en este botón,

13
00:00:50,420 --> 00:00:53,535
voy a introducir la información sobre herramientas aquí.

14
00:00:53,535 --> 00:00:57,740
Entonces, después de la advertencia del botón, diría,

15
00:00:58,560 --> 00:01:04,550
data-toggle-tooltip, para que pueda ver que

16
00:01:04,550 --> 00:01:12,230
el componente javascript entra en uso aquí y luego data-html-true.

17
00:01:12,230 --> 00:01:17,630
Por lo tanto, si aplicamos este atributo HTML de datos y lo enviamos a true,

18
00:01:17,630 --> 00:01:21,965
eso significa que el contenido de la descripción emergente se puede diseñar usando

19
00:01:21,965 --> 00:01:27,060
HTML y luego dirán la siguiente línea,

20
00:01:27,060 --> 00:01:31,165
le daré el atributo de título.

21
00:01:31,165 --> 00:01:35,680
Por lo tanto, aquí es donde se encerrará el contenido de la información sobre herramientas.

22
00:01:35,680 --> 00:01:42,090
Así que diremos «o llámenos al».

23
00:01:45,810 --> 00:01:52,950
Por lo tanto, puede ver que estoy usando HTML para

24
00:01:52,950 --> 00:02:02,510
formatear el contenido de la información sobre herramientas allí.

25
00:02:06,070 --> 00:02:16,315
Entonces, con eso, la información sobre herramientas se introduce en el botón allí y también el último atributo que

26
00:02:16,315 --> 00:02:26,095
daré es la colocación de datos que daré como abajo aquí.

27
00:02:26,095 --> 00:02:32,700
Por lo tanto, lo que significa que esta información sobre herramientas se mostrará en la parte inferior de este botón aquí.

28
00:02:32,700 --> 00:02:36,815
Después de añadir esto en el botón,

29
00:02:36,815 --> 00:02:38,610
vamos a ir y añadir

30
00:02:38,610 --> 00:02:45,130
un código JavaScript al final de esta página para activar esta información.

31
00:02:45,130 --> 00:02:47,505
Ir a la parte inferior de la página,

32
00:02:47,505 --> 00:02:57,470
permítanme introducir el script allí agregando las etiquetas para el script.

33
00:02:57,470 --> 00:03:04,665
Dentro de esto, vamos a definir el código JavaScript real aquí.

34
00:03:04,665 --> 00:03:07,790
Así que vamos a decir documentos en dólares.

35
00:03:07,790 --> 00:03:13,910
Entonces, este script está usando la sintaxis jQuery aquí.

36
00:03:15,890 --> 00:03:20,880
Por lo tanto, esto especifica cuándo el documento está listo,

37
00:03:20,880 --> 00:03:23,810
cuando este documento HTML en particular está listo

38
00:03:23,810 --> 00:03:28,775
para renderizar y definir invocar esta función particular aquí.

39
00:03:28,775 --> 00:03:32,790
Por lo tanto, suministramos la función JavaScript para ser

40
00:03:32,790 --> 00:03:37,780
invocada en ese punto, así que especificaremos nuestra función y luego diremos

41
00:03:38,570 --> 00:03:51,510
entre paréntesis data-toggle-tooltip y tooltip.

42
00:03:53,240 --> 00:04:01,315
Por lo tanto, ese es el código que vamos a introducir en esta página aquí.

43
00:04:01,315 --> 00:04:09,255
Esto está en la sintaxis jQuery y cubriremos jQuery un poco más en el siguiente módulo.

44
00:04:09,255 --> 00:04:13,995
Por el momento, esto es especificar que dondequiera que haya un atributo de

45
00:04:13,995 --> 00:04:19,650
este tipo para esa etiqueta HTML en particular,

46
00:04:19,650 --> 00:04:21,570
active la información sobre herramientas.

47
00:04:21,570 --> 00:04:25,420
Por lo tanto, pero este cambio guardará los cambios y

48
00:04:25,420 --> 00:04:30,510
luego ir y echar un vistazo a cómo se ve la descripción emergente en la página web.

49
00:04:30,510 --> 00:04:32,760
Ir a la página web,

50
00:04:32,760 --> 00:04:36,600
ahora cuando mantenemos el puntero del ratón sobre el patrón aquí,

51
00:04:36,600 --> 00:04:40,755
puede ver que la información sobre herramientas se muestra en la parte inferior aquí.

52
00:04:40,755 --> 00:04:44,950
Por lo tanto, puede notar que el contenido de esta información sobre herramientas es

53
00:04:44,950 --> 00:04:50,115
exactamente lo que dimos como el atributo de título para esa parte inferior allí.

54
00:04:50,115 --> 00:04:54,095
Por lo tanto, así es como podemos agregar información sobre herramientas a nuestra página. La información

55
00:04:54,095 --> 00:04:58,030
de herramientas es una buena manera de proporcionar información adicional para

56
00:04:58,030 --> 00:05:03,370
el usuario cuando el usuario navega a diferentes ubicaciones de la página.

57
00:05:03,370 --> 00:05:06,790
Continuando con el ejercicio, en el siguiente paso,

58
00:05:06,790 --> 00:05:10,045
vamos a crear un modal en nuestra página web.

59
00:05:10,045 --> 00:05:17,665
Este modal alojará el formulario de inicio de sesión y se mostrará mediante un enlace en su barra de navegación.

60
00:05:17,665 --> 00:05:19,720
Por lo tanto, para empezar,

61
00:05:19,720 --> 00:05:26,700
bootstrap aconseja que todo el código modal relacionado se coloque en la parte superior de su página.

62
00:05:26,700 --> 00:05:31,530
Entonces, voy a entrar y escribir debajo de la barra de navegación aquí,

63
00:05:31,530 --> 00:05:34,455
voy a colocar en el código para el modal allí.

64
00:05:34,455 --> 00:05:36,080
Entonces, para crear un modal,

65
00:05:36,080 --> 00:05:43,400
comenzaré diciendo div ID login modal.

66
00:05:43,400 --> 00:05:48,355
Por lo tanto, le damos un ID a este modal para que pueda activarse desde

67
00:05:48,355 --> 00:05:53,895
el enlace de la barra de navegación y luego clase como «fundido modal».

68
00:05:53,895 --> 00:05:56,910
Así que ves que la clase es modal y fundido significa

69
00:05:56,910 --> 00:06:00,220
que cuando el modal se lleva a la pantalla,

70
00:06:00,220 --> 00:06:07,185
se desvanecerá en la pantalla y el rol es como un diálogo.

71
00:06:07,185 --> 00:06:11,625
Por lo tanto, lo que significa que se muestra en la parte superior de la página.

72
00:06:11,625 --> 00:06:14,195
Vamos a cerrar el div de la parte.

73
00:06:14,195 --> 00:06:18,415
Así que dentro de aquí, vamos a crear el modal.

74
00:06:18,415 --> 00:06:28,510
Entonces, allí, voy a crear el segundo div con la clase como modal-dialog y luego

75
00:06:28,510 --> 00:06:32,620
dentro de aquí definiremos el contenido

76
00:06:32,620 --> 00:06:39,550
del modal real aquí y cerraremos el div.

77
00:06:39,550 --> 00:06:45,220
Y así, esto va a ser el contenido modal se estructurará aquí.

78
00:06:45,220 --> 00:06:51,370
Entonces, dentro de este diálogo modal crearemos otro div con

79
00:06:51,370 --> 00:07:00,770
el contenido modal de clase y

80
00:07:00,770 --> 00:07:10,350
cerraremos el div y un modal típico contendrá un encabezado modal.

81
00:07:10,350 --> 00:07:14,255
Entonces, ahí es donde el próximo div va a alojar.

82
00:07:14,255 --> 00:07:23,635
Y luego un cuerpo modal

83
00:07:23,635 --> 00:07:28,980
que contendrá gran parte del contenido relacionado modal.

84
00:07:28,980 --> 00:07:34,835
Todas estas secciones del modal son opcionales,

85
00:07:34,835 --> 00:07:38,020
pero al menos debería tener una de esas secciones en su modal de

86
00:07:38,020 --> 00:07:41,645
lo contrario no tiene sentido crear el modal allí.

87
00:07:41,645 --> 00:07:46,455
Entonces, con esto, la estructura del modal ahora está lista.

88
00:07:46,455 --> 00:07:50,550
Por lo tanto, vamos a entrar y rellenar el contenido en este modal.

89
00:07:50,550 --> 00:07:54,005
Así que ahora, tenemos que definir lo que entra en el modal.

90
00:07:54,005 --> 00:07:57,505
Ahora, en el encabezado vamos a poner en un botón,

91
00:07:57,505 --> 00:08:01,770
un botón cruzado en el modal que al hacer clic descartará el modal.

92
00:08:01,770 --> 00:08:05,715
Esa es la forma habitual en que se diseñan los modales.

93
00:08:05,715 --> 00:08:08,805
Y el cuerpo modal contendrá la forma.

94
00:08:08,805 --> 00:08:12,610
Ahora, un modal puede contener cualquier cosa que desee, así que por ejemplo,

95
00:08:12,610 --> 00:08:16,040
si hace clic en una imagen en

96
00:08:16,040 --> 00:08:19,630
una galería de imágenes y desea mostrar el tamaño más grande de la imagen,

97
00:08:19,630 --> 00:08:24,415
incluso allí puede usar un modal para mostrar la información.

98
00:08:24,415 --> 00:08:26,280
Ahora en este ejercicio,

99
00:08:26,280 --> 00:08:31,765
vamos a utilizar el modal para alojar un formulario que se muestra para el usuario.

100
00:08:31,765 --> 00:08:35,695
Vale, ahora, en el encabezado modal,

101
00:08:35,695 --> 00:08:40,175
vamos a introducir un botón con

102
00:08:40,175 --> 00:08:49,170
el botón de tipo y cerrar la clase.

103
00:08:49,170 --> 00:08:59,080
Entonces, ves que este es un botón que se usa para cerrar el modal y luego dirás,

104
00:08:59,080 --> 00:09:04,685
descartar datos y luego modal.

105
00:09:04,685 --> 00:09:07,180
Entonces, lo que esto significa es que este botón en particular

106
00:09:07,180 --> 00:09:09,845
cuando se hace clic descartará el modal de la pantalla.

107
00:09:09,845 --> 00:09:18,700
Y este botón, voy a usar los tiempos,

108
00:09:21,100 --> 00:09:24,900
se mostrará como una cruz en los modales aquí.

109
00:09:24,900 --> 00:09:27,380
Así que yo diría veces aquí.

110
00:09:27,380 --> 00:09:30,549
Antes de este botón, vamos a introducir

111
00:09:30,549 --> 00:09:36,470
un encabezado que vamos a mostrar en el encabezado del modal así que

112
00:09:36,470 --> 00:09:46,180
voy a empezar con un h4 con el título modal de la clase.

113
00:09:46,180 --> 00:09:48,635
Y luego dentro de este h4,

114
00:09:48,635 --> 00:09:52,200
incluiré el título del modal,

115
00:09:52,200 --> 00:09:56,995
que es login porque esto va a mostrar el formulario de inicio de sesión.

116
00:09:56,995 --> 00:10:01,625
Ahora que hemos puesto algunos detalles en este modal,

117
00:10:01,625 --> 00:10:06,110
vamos a añadir el enlace a nuestra barra de navegación que

118
00:10:06,110 --> 00:10:07,770
activará este modal y luego vamos a echar

119
00:10:07,770 --> 00:10:11,515
un vistazo rápido a cómo se ve el modal en la pantalla.

120
00:10:11,515 --> 00:10:14,280
Ir a la barra de navegación,

121
00:10:14,280 --> 00:10:16,095
justo después de la UL aquí,

122
00:10:16,095 --> 00:10:17,845
voy a incluir en

123
00:10:17,845 --> 00:10:22,910
un enlace que se puede usar para activar la visualización y ocultación del modal.

124
00:10:22,910 --> 00:10:31,080
Entonces, para hacer eso, entraré y usaré un lapso con la clase navbar-text.

125
00:10:31,080 --> 00:10:37,950
Esto es lo que me permite incluir un enlace en la barra de navegación y mostrarlo como texto.

126
00:10:37,950 --> 00:10:39,995
Entonces, dentro del lapso,

127
00:10:39,995 --> 00:10:45,345
usaré una A con el conmutador de datos,

128
00:10:45,345 --> 00:10:50,010
para que pueda ver el alternador de datos de JavaScript entrando y

129
00:10:50,010 --> 00:10:55,400
el alternador de datos es para un modal y luego data-target.

130
00:10:55,400 --> 00:11:03,940
Recuerdas que habíamos dado el ID como modal de inicio de sesión a nuestro-

131
00:11:04,170 --> 00:11:06,460
Modal que incluimos.

132
00:11:06,460 --> 00:11:11,950
Entonces, voy a usar eso como mi objetivo de datos con el hash delante de eso.

133
00:11:11,950 --> 00:11:15,815
Y dentro de aquí, voy a entrar y usar

134
00:11:15,815 --> 00:11:24,520
un icono impresionante de fuente para un inicio de sesión.

135
00:11:24,520 --> 00:11:28,710
Por lo tanto, esta es una fuente impresionante

136
00:11:28,800 --> 00:11:37,945
icono de «fa- inicio de sesión» y decir iniciar sesión y cerrar la e-tech.

137
00:11:37,945 --> 00:11:43,975
Así que con eso, guardemos los cambios y echemos un vistazo a la página web. Al

138
00:11:43,975 --> 00:11:47,265
ir a nuestra página web en el navegador,

139
00:11:47,265 --> 00:11:50,530
ahora ves que en el borde derecho,

140
00:11:50,530 --> 00:11:56,680
ves este inicio de sesión con este icono creado allí.

141
00:11:56,680 --> 00:12:00,850
Así que este es el enlace que va a desencadenar la visualización del modal.

142
00:12:00,850 --> 00:12:02,530
Entonces, si hago clic en este enlace,

143
00:12:02,530 --> 00:12:05,015
entonces el modal se mostrará en la pantalla.

144
00:12:05,015 --> 00:12:08,500
Así que note que cuando creamos este modal dijimos,

145
00:12:08,500 --> 00:12:14,565
encabezado que contenía el inicio de sesión y luego también este botón y luego el cuerpo

146
00:12:14,565 --> 00:12:17,605
, actualmente vacío, vamos a introducir más código allí.

147
00:12:17,605 --> 00:12:20,860
Ahora, si hace clic en este botón, el modal desaparecerá.

148
00:12:20,860 --> 00:12:23,170
Haga clic en eso de nuevo, se muestra el modal.

149
00:12:23,170 --> 00:12:25,470
Incluso si hace clic fuera del modal, el modal desaparecerá.

150
00:12:25,470 --> 00:12:30,985
Así que este es el comportamiento del modal que hemos llegado a esperar.

151
00:12:30,985 --> 00:12:36,275
Ahora, en el siguiente paso voy a entrar e introducir el formulario aquí.

152
00:12:36,275 --> 00:12:39,990
No voy a explicar los detalles del formulario porque

153
00:12:39,990 --> 00:12:43,924
ya has estudiado formularios en una de las lecciones anteriores.

154
00:12:43,924 --> 00:12:47,830
Así que simplemente voy a entrar y pegar el código del formulario y

155
00:12:47,830 --> 00:12:52,370
luego vamos a echar un vistazo al formulario en el modal aquí.

156
00:12:52,370 --> 00:12:54,505
Volviendo al código,

157
00:12:54,505 --> 00:12:57,640
ahora puedes ver que en el cuerpo modal,

158
00:12:57,640 --> 00:13:01,115
he rellenado un formulario.

159
00:13:01,115 --> 00:13:07,850
Y luego tengo dos grupos de formularios aquí con una entrada con el tipo de correo electrónico

160
00:13:07,850 --> 00:13:14,795
y contraseña de tipo de entrada y luego tengo una casilla de verificación aquí que tengo.

161
00:13:14,795 --> 00:13:21,970
Por lo tanto, esto debería ser fácil para usted descifrar lo que este formulario es EE estructura de código,

162
00:13:21,970 --> 00:13:26,505
a partir de su comprensión de cómo se diseñan los formularios Bootstrap.

163
00:13:26,505 --> 00:13:28,250
He puesto dos botones.

164
00:13:28,250 --> 00:13:33,060
Uno es un botón de envío y otro es un botón de cancelación.

165
00:13:33,060 --> 00:13:36,440
El botón Cancelar tiene el primero.

166
00:13:36,440 --> 00:13:41,580
El botón de cancelación aquí tiene el modelo de despido de datos.

167
00:13:41,580 --> 00:13:45,215
Lo que significa que al hacer clic en el botón de cancelación, el modelo será descartado.

168
00:13:45,215 --> 00:13:50,170
Y el otro es un botón de envío que se utiliza para enviar el formulario.

169
00:13:50,170 --> 00:13:51,480
Así que con estos cambios,

170
00:13:51,480 --> 00:13:55,550
vamos a guardar los cambios y luego ir a echar un vistazo a nuestra página Web.

171
00:13:55,550 --> 00:13:57,205
Volviendo a la página web,

172
00:13:57,205 --> 00:14:04,045
ahora haces clic en el inicio de sesión y verás un formulario para que un usuario inicie sesión.

173
00:14:04,045 --> 00:14:07,025
Así que verás que tienes dos cajas aquí.

174
00:14:07,025 --> 00:14:09,850
Ingrese casillas aquí para ingresar correo electrónico y contraseña,

175
00:14:09,850 --> 00:14:12,870
y luego una casilla de verificación para decir Recordarme.

176
00:14:12,870 --> 00:14:15,320
Y luego tienes un inicio de sesión y una cancelación.

177
00:14:15,320 --> 00:14:17,860
Por lo tanto, si hace clic en cancelar, el modal desaparecerá.

178
00:14:17,860 --> 00:14:20,710
Al igual que cuando haces clic en la cruz allí.

179
00:14:20,710 --> 00:14:23,915
Y luego, si rellena esta información y sigue haciendo clic en el inicio de sesión,

180
00:14:23,915 --> 00:14:26,120
el proceso de inicio de sesión debe iniciarse.

181
00:14:26,120 --> 00:14:29,885
En este momento no tenemos un servidor para que esto funcione,

182
00:14:29,885 --> 00:14:34,640
pero solo te estoy mostrando en Bootstrap cómo crearías un formulario como este.

183
00:14:34,640 --> 00:14:37,240
Estoy seguro de que ha visto cosas como estas en

184
00:14:37,240 --> 00:14:40,610
muchos sitios web donde al hacer clic en un botón de inicio de sesión

185
00:14:40,610 --> 00:14:43,220
algo como esto con el formulario aparece

186
00:14:43,220 --> 00:14:46,585
en la pantalla y espera que escriba la información.

187
00:14:46,585 --> 00:14:50,160
Así que ahora verá cómo puede aprovechar los modelos para mostrar

188
00:14:50,160 --> 00:14:54,740
información superpuesta a su página web.

189
00:14:54,740 --> 00:14:57,910
Con esto completamos este ejercicio.

190
00:14:57,910 --> 00:15:01,950
En este ejercicio, hemos visto el uso de información sobre herramientas

191
00:15:01,950 --> 00:15:06,835
y hemos visto el uso de modelos para mostrar contenido.

192
00:15:06,835 --> 00:15:14,200
Este es un buen momento para que hagas un git-commint con los consejos y modelos de herramientas de mensajes.