Bootstrap es un framework front-end CSS de código abierto desarrollador por Twitter en 2010, es utilizado para desarrollar aplicaciones Web y sitios móviles ya que cuenta con un layout que se adapta a las pantallas de diferentes dispositivos.
Ver el funcionamiento en video:
Podemos descargar los archivos y copiarlos a nuestro proyecto o utilizar los link CDN.
Un link CDN es una red de servidores que distribuye los enlaces contenido de un servidor de "origen" a todo el mundo, almacenando ese contenido en caché en un lugar más cercano al de cada usuario final que accede a Internet con un dispositivo habilitado para la Web.
Utilizaremos la versión 4.5 de Bootstrap para el ejercicio.
Creamos un Webform con la siguiente estructura.
Al presionar el primer botón se visualizara el mensaje "El registro ha sido grabado", en el segundo botón el "El registro ha sido borrado" y en el tercer botón "Debes realizar alguna acción".
Crearemos una carpeta y copiaremos las imágenes que deseamos se visualicen al seleccionar cada mensaje, el tamaño de cada imagen es de 64x64 pixeles.
Ingresaremos : https://getbootstrap.com/docs/4.5/getting-started/introduction/
y copiaremos los siguientes link:
Los copiaremos a nuestro Webform.
Ingresaremos a: https://getbootstrap.com/docs/4.0/components/modal/
seleccionaremos el apartado Modal y podremos copiar cualquier código de ejemplo que visualiza la ventana modal.
Copiaremos el código entre las etiquetas <form> </form> y realizaremos las siguientes modificaciones:
Dentro del código de evento de cada botón copiaremos el siguiente código:
En el Label_mensaje_encabezado teclearemos el titulo que aparecerá en la ventana, en el Label_mensaje_detalle el mensaje que indica la acción y en Image_mensaje_logo llamaremos una de las imágenes dependiendo la acción que se haya realizado.
Ejecutamos la Webform y presionamos cada uno de los botones visualizando el mensaje personalizado.
0 Comentarios