Layout
La construcción de la interfaz fue basada en contemplanto las funcionalidades responsivas de 3 cortes o breakpoints basados en Mobile first (de la pantalla más pequeña hacia arriba) ofrecidas por la herramienta
( ≥ 768 para Teléfonos, ≥ 992px para Tablets y ≥ 1200px para Equipos de Escritorio).
La grilla base utilizada en el framework es de 12 columnas agrupadas dentro de contenedores.
Para mayor información visitar Boostrap 4.3.1
Contenedores principales
Para el ingreso de contenido se utilizan 3 tipos de contenedores:
container-fluidEste contenedor se usa para que la sección quede al 100% de la pantalla. En general, se usa a nivel de desarrollo y de ser utilizada debe ir fuera de .container.content y de .container-narrow.
container contentEste contenedor agrupa el contenido general. Siempre debe ser aplicado.
container-narrowEste contenedor se usa dentro de .container.content para angostar el contenido con el fin de evitar el agotamiento visual que podría producir una sábana de información extensa.
Grilla
Como se menciona anteriormente, se utiliza el sistema de grillas de 12 columnas que entrega Bootstrap.
col-12 Cubre el 12 de 12 columnas, por lo tanto el 100% del contenido
col-8 Cubre 8 de 12
col Cubre el resto
col-8 Cubre 8 de 12
col Cubre el resto
col-8 Cubre 8 de 12
col Cubre el resto que falte cubrir, indiferente del tamaño
col-8 Cubre 8 de 12
col-4 Cubre 4 de 12
col-7 Cubre 7 de 12
col-5 Cubre 5 de 12
col-6 Cubre 6 de 12, o sea el 50% del contenido
col-6 Cubre 6 de 12, o sea el 50% del contenido
col-5 Cubre 5 de 12
col-5 Cubre 5 de 12
col-2 Cubre 2 de 12
col-4 Cubre 4 de 12
col-4 Cubre 4 de 12
col-2 Cubre 2 de 12
col-2 Cubre 2 de 12
col-3 Cubre 3 de 12
col-3 Cubre 3 de 12
col-3 Cubre 3 de 12
col-3 Cubre 3 de 12
col-2 Cubre 2 de 12
col-2 Cubre 2 de 12
col-2 Cubre 2 de 12
col-2 Cubre 2 de 12
col-2 Cubre 2 de 12
col-2 Cubre 2 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
col-1 Cubre 1 de 12
Para más especificaciones revisar documentación de BootstrapVer grillas de Bootsrap