Ejemplos de uso de bootstrap en formularios SIMPLE

Acá podrás visualizar los manuales de ejemplos de de uso de bootstrap en formularios SIMPLE además de ejecutar una demo del flujo y descargar el proceso para importarlo en el ambiente de desarrollo de SIMPLE.


Bootstrap - Carrusel
Descripción de proceso

Slideshow o Carousel es un componente que permite desplegar varios paneles de contenido que se van reemplazando dado x tiempo transcurrido o por la acción del usuario, por ejemplo, en varías páginas web muestras banner que van cambiando en el transcurso del tiempo.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Tooltip
Descripción de proceso

Un tooltip es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Popover
Descripción de proceso

Popover es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico y hacer click sobre el, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra Parecido al Tooltip pero permite mostrar más información.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Modal
Descripción de proceso

Modal es una ventana que aparece superpuesta a toda la página actual. Para cerrarla podemos presionar la "x", disponer un botón de cerrado o presionar en cualquier parte fuera del diálogo.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Media Object
Descripción de proceso

Bootstrap define varios estilos genéricos para crear diferentes tipos de componentes formados por imágenes y texto,

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Responsive Grid, Table
Descripción de proceso

Bootstrap Diseño responsive son las técnicas para que una grid o una table se adapten a cualquier tipo de resolución de pantalla, reestructurando sus elementos y contenidos consiguiendo optimizar el espacio disponible.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Card
Descripción de proceso

Una card en Bootstrap 4 es una contenedor a la cual puedes agregarle componentes, por ejemplos headers, footers, descripción, colores, etc.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Navs
Descripción de proceso

El elemento nav representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o a otros documentos. Ejemplos comunes de secciones de navegación son menús, tablas de contenido e índices.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Alert
Descripción de proceso

Alert se utiliza sobre todo para mostrar información como usuarios finales desean una advertencia o mensaje de confirmación.

Iniciar demo del proceso

Ver manual de digitalización

Ver video del ejemplo

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Buttons
Descripción de proceso

Ejemplo de usar button con Bootstrap.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Dropdown menu
Descripción de proceso

Es un menú expandible que contiene un conjunto de opciones del mismo tipo.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Progress Bar
Descripción de proceso

En este manual se explica cómo crear una barra de progreso con bootstrap.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Table Light
Descripción de proceso

En este manual se explica cómo crear diferentes tipos de tablas con bootstrap.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Filtros con jQuery: Tabla
Descripción de proceso

Bootstrap no tiene un componente para realizar filtros. Sin embargo, podemos usar jQuery para filtrar una tabla.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Filtros con jQuery: Lista
Descripción de proceso

Bootstrap no tiene un componente para realizar filtros. Sin embargo, podemos usar jQuery para filtrar una lista.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Bootstrap - Filtros con jQuery: Elemento
Descripción de proceso

Bootstrap no tiene un componente para realizar filtros. Sin embargo, podemos usar jQuery para filtrar un elemento.

Iniciar demo del proceso

Ver manual de digitalización

Descargar proceso para importar

Nota: Al descargar e importar el proceso, se debe desactivar la opción "Ocultar tarjeta de inicio de solicitud en frontend.", para que sea visualizado en el frontend

Volver al home