En la conferencia anterior, vimos varias maneras de revelar contenido a los usuarios.
Por lo tanto, esto sería una superposición en la parte superior de
su página web para mostrar la información a los usuarios.
Por lo tanto, veremos dos de esos enfoques,
Tooltips y Modals en este ejercicio.
Primero, agregaremos una información sobre herramientas a esta página.
Entonces, yendo a index.html y en el Jumbotron,
vemos este botón en el Jumbotron allí.
A este botón, voy a agregar una descripción emergente.
Así que al entrar en este botón,
lo que haré ahora es simplemente ir a la siguiente línea
para que quede un poco más claro escribir el código allí y en este botón,
voy a introducir la información sobre herramientas aquí.
Entonces, después de la advertencia del botón, diría,
data-toggle-tooltip, para que pueda ver que
el componente javascript entra en uso aquí y luego data-html-true.
Por lo tanto, si aplicamos este atributo HTML de datos y lo enviamos a true,
eso significa que el contenido de la descripción emergente se puede diseñar usando
HTML y luego dirán la siguiente línea,
le daré el atributo de título.
Por lo tanto, aquí es donde se encerrará el contenido de la información sobre herramientas.
Así que diremos «o llámenos al».
Por lo tanto, puede ver que estoy usando HTML para
formatear el contenido de la información sobre herramientas allí.
Entonces, con eso, la información sobre herramientas se introduce en el botón allí y también el último atributo que
daré es la colocación de datos que daré como abajo aquí.
Por lo tanto, lo que significa que esta información sobre herramientas se mostrará en la parte inferior de este botón aquí.
Después de añadir esto en el botón,
vamos a ir y añadir
un código JavaScript al final de esta página para activar esta información.
Ir a la parte inferior de la página,
permítanme introducir el script allí agregando las etiquetas para el script.
Dentro de esto, vamos a definir el código JavaScript real aquí.
Así que vamos a decir documentos en dólares.
Entonces, este script está usando la sintaxis jQuery aquí.
Por lo tanto, esto especifica cuándo el documento está listo,
cuando este documento HTML en particular está listo
para renderizar y definir invocar esta función particular aquí.
Por lo tanto, suministramos la función JavaScript para ser
invocada en ese punto, así que especificaremos nuestra función y luego diremos
entre paréntesis data-toggle-tooltip y tooltip.
Por lo tanto, ese es el código que vamos a introducir en esta página aquí.
Esto está en la sintaxis jQuery y cubriremos jQuery un poco más en el siguiente módulo.
Por el momento, esto es especificar que dondequiera que haya un atributo de
este tipo para esa etiqueta HTML en particular,
active la información sobre herramientas.
Por lo tanto, pero este cambio guardará los cambios y
luego ir y echar un vistazo a cómo se ve la descripción emergente en la página web.
Ir a la página web,
ahora cuando mantenemos el puntero del ratón sobre el patrón aquí,
puede ver que la información sobre herramientas se muestra en la parte inferior aquí.
Por lo tanto, puede notar que el contenido de esta información sobre herramientas es
exactamente lo que dimos como el atributo de título para esa parte inferior allí.
Por lo tanto, así es como podemos agregar información sobre herramientas a nuestra página. La información
de herramientas es una buena manera de proporcionar información adicional para
el usuario cuando el usuario navega a diferentes ubicaciones de la página.
Continuando con el ejercicio, en el siguiente paso,
vamos a crear un modal en nuestra página web.
Este modal alojará el formulario de inicio de sesión y se mostrará mediante un enlace en su barra de navegación.
Por lo tanto, para empezar,
bootstrap aconseja que todo el código modal relacionado se coloque en la parte superior de su página.
Entonces, voy a entrar y escribir debajo de la barra de navegación aquí,
voy a colocar en el código para el modal allí.
Entonces, para crear un modal,
comenzaré diciendo div ID login modal.
Por lo tanto, le damos un ID a este modal para que pueda activarse desde
el enlace de la barra de navegación y luego clase como «fundido modal».
Así que ves que la clase es modal y fundido significa
que cuando el modal se lleva a la pantalla,
se desvanecerá en la pantalla y el rol es como un diálogo.
Por lo tanto, lo que significa que se muestra en la parte superior de la página.
Vamos a cerrar el div de la parte.
Así que dentro de aquí, vamos a crear el modal.
Entonces, allí, voy a crear el segundo div con la clase como modal-dialog y luego
dentro de aquí definiremos el contenido
del modal real aquí y cerraremos el div.
Y así, esto va a ser el contenido modal se estructurará aquí.
Entonces, dentro de este diálogo modal crearemos otro div con
el contenido modal de clase y
cerraremos el div y un modal típico contendrá un encabezado modal.
Entonces, ahí es donde el próximo div va a alojar.
Y luego un cuerpo modal
que contendrá gran parte del contenido relacionado modal.
Todas estas secciones del modal son opcionales,
pero al menos debería tener una de esas secciones en su modal de
lo contrario no tiene sentido crear el modal allí.
Entonces, con esto, la estructura del modal ahora está lista.
Por lo tanto, vamos a entrar y rellenar el contenido en este modal.
Así que ahora, tenemos que definir lo que entra en el modal.
Ahora, en el encabezado vamos a poner en un botón,
un botón cruzado en el modal que al hacer clic descartará el modal.
Esa es la forma habitual en que se diseñan los modales.
Y el cuerpo modal contendrá la forma.
Ahora, un modal puede contener cualquier cosa que desee, así que por ejemplo,
si hace clic en una imagen en
una galería de imágenes y desea mostrar el tamaño más grande de la imagen,
incluso allí puede usar un modal para mostrar la información.
Ahora en este ejercicio,
vamos a utilizar el modal para alojar un formulario que se muestra para el usuario.
Vale, ahora, en el encabezado modal,
vamos a introducir un botón con
el botón de tipo y cerrar la clase.
Entonces, ves que este es un botón que se usa para cerrar el modal y luego dirás,
descartar datos y luego modal.
Entonces, lo que esto significa es que este botón en particular
cuando se hace clic descartará el modal de la pantalla.
Y este botón, voy a usar los tiempos,
se mostrará como una cruz en los modales aquí.
Así que yo diría veces aquí.
Antes de este botón, vamos a introducir
un encabezado que vamos a mostrar en el encabezado del modal así que
voy a empezar con un h4 con el título modal de la clase.
Y luego dentro de este h4,
incluiré el título del modal,
que es login porque esto va a mostrar el formulario de inicio de sesión.
Ahora que hemos puesto algunos detalles en este modal,
vamos a añadir el enlace a nuestra barra de navegación que
activará este modal y luego vamos a echar
un vistazo rápido a cómo se ve el modal en la pantalla.
Ir a la barra de navegación,
justo después de la UL aquí,
voy a incluir en
un enlace que se puede usar para activar la visualización y ocultación del modal.
Entonces, para hacer eso, entraré y usaré un lapso con la clase navbar-text.
Esto es lo que me permite incluir un enlace en la barra de navegación y mostrarlo como texto.
Entonces, dentro del lapso,
usaré una A con el conmutador de datos,
para que pueda ver el alternador de datos de JavaScript entrando y
el alternador de datos es para un modal y luego data-target.
Recuerdas que habíamos dado el ID como modal de inicio de sesión a nuestro-
Modal que incluimos.
Entonces, voy a usar eso como mi objetivo de datos con el hash delante de eso.
Y dentro de aquí, voy a entrar y usar
un icono impresionante de fuente para un inicio de sesión.
Por lo tanto, esta es una fuente impresionante
icono de «fa- inicio de sesión» y decir iniciar sesión y cerrar la e-tech.
Así que con eso, guardemos los cambios y echemos un vistazo a la página web. Al
ir a nuestra página web en el navegador,
ahora ves que en el borde derecho,
ves este inicio de sesión con este icono creado allí.
Así que este es el enlace que va a desencadenar la visualización del modal.
Entonces, si hago clic en este enlace,
entonces el modal se mostrará en la pantalla.
Así que note que cuando creamos este modal dijimos,
encabezado que contenía el inicio de sesión y luego también este botón y luego el cuerpo
, actualmente vacío, vamos a introducir más código allí.
Ahora, si hace clic en este botón, el modal desaparecerá.
Haga clic en eso de nuevo, se muestra el modal.
Incluso si hace clic fuera del modal, el modal desaparecerá.
Así que este es el comportamiento del modal que hemos llegado a esperar.
Ahora, en el siguiente paso voy a entrar e introducir el formulario aquí.
No voy a explicar los detalles del formulario porque
ya has estudiado formularios en una de las lecciones anteriores.
Así que simplemente voy a entrar y pegar el código del formulario y
luego vamos a echar un vistazo al formulario en el modal aquí.
Volviendo al código,
ahora puedes ver que en el cuerpo modal,
he rellenado un formulario.
Y luego tengo dos grupos de formularios aquí con una entrada con el tipo de correo electrónico
y contraseña de tipo de entrada y luego tengo una casilla de verificación aquí que tengo.
Por lo tanto, esto debería ser fácil para usted descifrar lo que este formulario es EE estructura de código,
a partir de su comprensión de cómo se diseñan los formularios Bootstrap.
He puesto dos botones.
Uno es un botón de envío y otro es un botón de cancelación.
El botón Cancelar tiene el primero.
El botón de cancelación aquí tiene el modelo de despido de datos.
Lo que significa que al hacer clic en el botón de cancelación, el modelo será descartado.
Y el otro es un botón de envío que se utiliza para enviar el formulario.
Así que con estos cambios,
vamos a guardar los cambios y luego ir a echar un vistazo a nuestra página Web.
Volviendo a la página web,
ahora haces clic en el inicio de sesión y verás un formulario para que un usuario inicie sesión.
Así que verás que tienes dos cajas aquí.
Ingrese casillas aquí para ingresar correo electrónico y contraseña,
y luego una casilla de verificación para decir Recordarme.
Y luego tienes un inicio de sesión y una cancelación.
Por lo tanto, si hace clic en cancelar, el modal desaparecerá.
Al igual que cuando haces clic en la cruz allí.
Y luego, si rellena esta información y sigue haciendo clic en el inicio de sesión,
el proceso de inicio de sesión debe iniciarse.
En este momento no tenemos un servidor para que esto funcione,
pero solo te estoy mostrando en Bootstrap cómo crearías un formulario como este.
Estoy seguro de que ha visto cosas como estas en
muchos sitios web donde al hacer clic en un botón de inicio de sesión
algo como esto con el formulario aparece
en la pantalla y espera que escriba la información.
Así que ahora verá cómo puede aprovechar los modelos para mostrar
información superpuesta a su página web.
Con esto completamos este ejercicio.
En este ejercicio, hemos visto el uso de información sobre herramientas
y hemos visto el uso de modelos para mostrar contenido.
Este es un buen momento para que hagas un git-commint con los consejos y modelos de herramientas de mensajes.