Layoutit! herramienta online gratuita de código abierto para generar layouts con Bootstrap 4
Layout = Estructura de filas y columnas que a su vez crean unas celdas de diferentes tamaños donde rellenar con los distintos contenidos.
En el momento de maquetar un contenido, la creación de layouts con Bootstrap puede llegar a ser una tarea tediosa, incluso para las personas que tenemos experiencia con ello.
Layoutit! es una magnífica herramienta que está desarrollada precisamente para quitar esa carga, ya que configurando filas y columnas puedes crear no solo layouts, sino plantillas completas basadas en el framework Bootstrap 4, posiblemente el estándar más utilizado para este propósito.
Este generador de layout con Bootstrap, es una auténtica navaja suiza, puesto que se encuentra al mismo nivel que lo que se conoce como un page builder avanzado:
Crear layouts con filas y columnas arrastrando y soltando, lo que se conoce normalmente como Drag and Drop
la herramienta genera el código HTML y CSS necesario para que solo tengas que copiar y pegar esos códigos en tu sitio y tener una estructura de layouts solo para rellenar con tu contenido.
En principio parece algo básico, pero nada más lejos. Layoutit te ofrece la posibilidad, entre otras cosas, de jugar con la altura y anchura de las celdas, o de dar el espacio que más te convenga entre filas y columnas y poder crear increíbles diseños de estructuras para tus maquetaciones.
Para usarlo es muy intuitivo, lo único que tienes que hacer es decirle al programa el número filas que necesitas y el número de columnas que necesitas en cada fila y él solo te genera un código con la clase CSS y un código HTML con la llamada a esa clase CSS.
Una herramienta muy versátil y práctica que tienes a tu disposición totalmente gratis.
* Esta herramienta es un recurso externo alojado en servidores que nada tienen que ver con sabercrear.com, por lo tanto, no somos responsables de su uso.
Consejo:
Para crear un layout, en vez de utilizar los selectores del número de filas y columnas, es mejor hacerlo seleccionando celda por celda e ir creando la estructura. Esto permite crear filas y columnas de diferentes anchuras y alturas para crear efectos mucho más profesionales.
Generador de layouts