Visualneo web y bootstrap
Quote from Ivanes82 on December 25, 2021, 3:52 amMuy buenas @luishp. Ante todo desearle Feliz Navidad.
Estoy jugueteando con mi nuevo regalo de navidad, visualneo web :), y ya empiezo a entender un poquito el funcionamiento del programa, pero hay algunas cosas que se me escapan.
He empezado aprendiendo a crear pantallas responsivas, y entiendo que esto se hace mediante clases de bootstrap 3. He estado viendo su video-tutorial sobre app responsivas, y lo entiendo perfectamente. El problema ha venido al empezar a querer hacer cosas que no vienen explicadas. Me he puesto a probar clases que vienen en CSS · Bootstrap (getbootstrap.com), y concretamente las que necesitaba no me han funcionado. No se si yo estoy haciendo algo mal, o es que hay cosas que no funcionan del todo.
Por ejemplo para espaciar las columnas utilizo estas clases en un contendor pero no me funciona:
col-md-4 col-md-offset-4O para que todas las columnas de vean iguales este otro, pero tampoco me funciona:clearfix visible-xs-blockEl documento al que hace la referencia la ayuda de visualneo de bootstrap, no explica como aplicar esas clases en visualneo. Te agradecía enormemente que me orientaras un poco.
Muy buenas @luishp. Ante todo desearle Feliz Navidad.
Estoy jugueteando con mi nuevo regalo de navidad, visualneo web :), y ya empiezo a entender un poquito el funcionamiento del programa, pero hay algunas cosas que se me escapan.
He empezado aprendiendo a crear pantallas responsivas, y entiendo que esto se hace mediante clases de bootstrap 3. He estado viendo su video-tutorial sobre app responsivas, y lo entiendo perfectamente. El problema ha venido al empezar a querer hacer cosas que no vienen explicadas. Me he puesto a probar clases que vienen en CSS · Bootstrap (getbootstrap.com), y concretamente las que necesitaba no me han funcionado. No se si yo estoy haciendo algo mal, o es que hay cosas que no funcionan del todo.
Por ejemplo para espaciar las columnas utilizo estas clases en un contendor pero no me funciona:
col-md-4 col-md-offset-4
O para que todas las columnas de vean iguales este otro, pero tampoco me funciona:clearfix visible-xs-block
El documento al que hace la referencia la ayuda de visualneo de bootstrap, no explica como aplicar esas clases en visualneo.
Te agradecía enormemente que me orientaras un poco.
Quote from luishp on December 25, 2021, 12:45 pmHola @ivanes82.
VisualNEO Web se diseñó originalmente para que todo el diseño se realizase mediante posicionamiento absoluto. Me llevó tiempo descubrir como adaptar el código original para que pudiesemos utilizar diseño responsive, pero es posible que aun haya que hacer ajustes.
Si creas un Container, le aplicas la clase row y le añades este código HTML:
<div class="col-md-4" style="border:1px solid red">.col-md-4</div> <div style="border:1px solid red" class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>Verás que funciona correctamente.
El problema es cuando queremos hacer lo mismo con Containers situados dentro a los que aplicamos directamente las clases col-md-4 y col-md-offset-4. Entonces no funciona, probablemente porque interfieren con otro CSS que los Containers ya tienen.
Para hacer que las clases .col-* fueran utilizbles dentro de VisualNEO Web, tuve que incluir este código CSS:/*Bootstrap columns*/ .col,[class*="col-"] { position:relative!important; min-height:30px; height:auto!important; top:auto!important; left:auto!important; padding:5px; }Así que seguramente haya que adaptarlo para que gestione correctamente los offset.
Las clases visible-* y hidden-* , al menos en las pruebas que he realizado, funcionan correctamente.
Como digo, tocará investigar un poco a ver si damos con la tecla :)
Mientras tanto, siempre es posible incluir el código HTML directamente dentro del Container row.Gracias!!!
Hola @ivanes82.
VisualNEO Web se diseñó originalmente para que todo el diseño se realizase mediante posicionamiento absoluto. Me llevó tiempo descubrir como adaptar el código original para que pudiesemos utilizar diseño responsive, pero es posible que aun haya que hacer ajustes.
Si creas un Container, le aplicas la clase row y le añades este código HTML:
<div class="col-md-4" style="border:1px solid red">.col-md-4</div> <div style="border:1px solid red" class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
Verás que funciona correctamente.
El problema es cuando queremos hacer lo mismo con Containers situados dentro a los que aplicamos directamente las clases col-md-4 y col-md-offset-4. Entonces no funciona, probablemente porque interfieren con otro CSS que los Containers ya tienen.
Para hacer que las clases .col-* fueran utilizbles dentro de VisualNEO Web, tuve que incluir este código CSS:
/*Bootstrap columns*/
.col,[class*="col-"] {
position:relative!important;
min-height:30px;
height:auto!important;
top:auto!important;
left:auto!important;
padding:5px;
}
Así que seguramente haya que adaptarlo para que gestione correctamente los offset.
Las clases visible-* y hidden-* , al menos en las pruebas que he realizado, funcionan correctamente.
Como digo, tocará investigar un poco a ver si damos con la tecla :)
Mientras tanto, siempre es posible incluir el código HTML directamente dentro del Container row.
Gracias!!!
Quote from luishp on December 25, 2021, 4:19 pmEstoy haciendo algunas pruebas utilizando flex-box en lugar de BootStrap y está dando muy buenos resultados.
Creo que ya tenemos algo importante para la próxima actualización... :)
Estoy haciendo algunas pruebas utilizando flex-box en lugar de BootStrap y está dando muy buenos resultados.
Creo que ya tenemos algo importante para la próxima actualización... :)
Quote from Ivanes82 on December 26, 2021, 1:20 amHola Luis, si hice eso mismo que me dices, de crear un container con la clase row y probé a añadir el html, y funcionaba perfecto, pero de esa manera pierde todo el sentido visualneo.
He mirado un poco sobre flex-box (no lo conocía) y tiene una pinta espectacular. Integrándolo con visualneo le daría una potencia al software increíble.
Espero con muchísimas ganas esa actualización, mientras tanto voy a aprovechar para estudiar css y flex-box.
Un saludo, y muchas gracias por todo.
Hola Luis, si hice eso mismo que me dices, de crear un container con la clase row y probé a añadir el html, y funcionaba perfecto, pero de esa manera pierde todo el sentido visualneo.
He mirado un poco sobre flex-box (no lo conocía) y tiene una pinta espectacular. Integrándolo con visualneo le daría una potencia al software increíble.
Espero con muchísimas ganas esa actualización, mientras tanto voy a aprovechar para estudiar css y flex-box.
Un saludo, y muchas gracias por todo.
Quote from Ivanes82 on December 26, 2021, 1:33 amHe encontrado en udemy estos cursos sobre flexbox y css:
Tutorial gratuito sobre CSS Flexbox - Curso de FlexBox desde 0 | Udemy.
Tutorial gratuito sobre CSS Flexbox - FLEXBOX (CSS3) | Aprende FLEXBOX DESDE CERO | Udemy
Tutorial gratuito sobre CSS - CSS Básico + Introduccion a Flexbox | Udemy
Por si a alguien le interesa, los cursos están en español, y son gratuitos, no se si será por tiempo limitado o es gratis siempre.
He encontrado en udemy estos cursos sobre flexbox y css:
Tutorial gratuito sobre CSS Flexbox - Curso de FlexBox desde 0 | Udemy.
Tutorial gratuito sobre CSS Flexbox - FLEXBOX (CSS3) | Aprende FLEXBOX DESDE CERO | Udemy
Tutorial gratuito sobre CSS - CSS Básico + Introduccion a Flexbox | Udemy
Por si a alguien le interesa, los cursos están en español, y son gratuitos, no se si será por tiempo limitado o es gratis siempre.