Desarrollo y diseño

HTML, bootstrap y collapse

B
[Borrado] #1 Ene '19

Buenas, ando intentado hacer una web del estilo empresa con Bootstrap carousel, collapse y algún elemento más.

Tengo un montón de problemas que no entiendo con el collapse igual estoy cegato o no se enfoca el problema como lo enfoco yo pero por mas vueltas que de en la documentación o w3school no veo nada.
La idea es que la web se vea tal cual está ahora y en resoluciones bajas haga collapse sobre los 3 títulos de los apartados. Entonces no es que no me salga, es que ni siquiera se como intentar hacerlo...

Segundo problema, quiero un desplegable en alguno de los links del nav, he intentado con Dropdown y funciona correcto, pero desentona un montón, no he encontrado forma de darle estilo oscuro o similar, con un collapse asumo que no es posible porque me alargaría la caja que contiene el nav hasta el final de la lista. Esto no es tan importante, pero... alguna idea?

Adjunto fotos en pequeñas resoluciones:

spoiler

Y el codigo:

spoiler
Pinchejotron
Pinchejotron #2 Ene '19

porque no usas wp

1 respuesta
B
[Borrado] #3 Ene '19

#2 wp = wordpress?
Si es que si, porque estoy estudiando DAW y ahora en concreto estamos practicando esto.

https://astorabro.github.io/TestWeb/empresa.html#

Camp1
Camp1 #4 Ene '19

A qué te refieres con

La idea es que la web se vea tal cual está ahora y en resoluciones bajas haga collapse sobre los 3 títulos de los apartados.

Si tienes 3 elementos y quieres que siempre usen el mismo porcentaje de la pantalla pues usa el grid de boostrap y lo divides en 3 columnas de tamaño 4. Échale un ojo a la docu https://getbootstrap.com/docs/4.0/layout/grid/ no sé si te refieres a eso.

En cuanto al dropdown, si estás usando boostrap pues usa el que trae el framework por defecto, https://getbootstrap.com/docs/4.0/components/dropdowns/ si no te gusta algo pues editas el estilo a tu gusto y yasta.

1 respuesta
B
[Borrado] #5 Ene '19

#4 Igual me he explicado mal pero no es eso. Creo que se me ocurrió la solución pero ya apagué el pc. Mañana si lo consigo lo pongo, sino me intento explicar mejor.

1 respuesta
Camp1
Camp1 #6 Ene '19

#5 creo que te acabo de entender, te refieres a que 3 opciones del menú se conviertan en el desplegable de otra?

privet
privet #7 Ene '19

Y usais bootstrap en clase?

1 respuesta
B
[Borrado] #8 Ene '19

#7 Si, por?

1 respuesta
privet
privet #9 Ene '19

#8 ФQue suerte xD, nosotros dimos por encima css y ya xD!

2 respuestas
B
[Borrado] #10 Ene '19

#9 Y que más disteis en Lenguaje de Marcas?

Se que en el temario aparecen más cosas pero la profesora nos comentó que quería enseñarnos cosas útiles de verdad. El primer trimestre fue html y css a muerte, lo pasé incluso mal porque menudos dolores de cabeza.
Ahora el 2° trimestre hemos empezado con flexbox y de ahí a bootstrap ahora siempre pegandonos con la documentación y con ayuda de la profesora en momentos puntuales.

2 respuestas
privet
privet #11 Ene '19

#10 este segundo trimestre parece que es xml, que no sé ni para que sirve la verdad xD

1 respuesta
B
[Borrado] #12 Ene '19

#11 Eso creo que lo quiere dejar para final de curso cuandl ya esté todo decidido darlo de prisa y corriendo (por que está en el temario que si no...)

1
sh31k
sh31k #13 Ene '19

Lo mas sencillo es tener aparte un div con collapse y lo que tienes que hacer es que cuando la reso sea pequeña mostrar este div y ocultar el otro y vivecersa.

bs tiene varias formas de hacer eso.

Y ole por tu profesora que se sale del temario que está bastante anticuado para enseñar cosas útiles

Hopper
Hopper #14 Ene '19

#9 ¿Suerte? Yo en DAW solo dí Bootstrap y me parece muy mala idea, CSS tiene muchas cosas bonitas y feas, y está bien aprender sobre ellas y saber aplicarlas, hay muchos trucos para mil movidas, aprendiendo Bootstrap no sacas nada más que hacer webs genéricas sin tener prácticamente ni idea de CSS, y a la mínima que quieras hacer algo custom, a darte cabezazos contra una pared.

#10 Nosotros en lenguaje de marcas hicimos demasiado XML innecesario entre otras basuras derivadas de XML que no se usan a ida de hoy (ni desde los últimos 10 años) y no hablemos de HTML 5, que apenas vimos nada, el profesor nos ponía PDFs de hace siglos de HTML 4, XHTML y demás...

He he decir que llevo mas de 10 años de CSS y HTML a mis espaldas, para mi DAW no me sirvió más que para aprender a programar mejor y bases de datos, sobre todo lo demás ya tenia conocimientos previos y la verdad es que fueron un chorro de horas perdidas.

2 respuestas
sh31k
sh31k #15 Ene '19

#14 El tema es que ha dicho que su profesora aparte de bootstrap (que aprendiendo veo algo básico de saber usar, ya luego en la calle se encontrará problemas que no podrá resolver con BS), les ha dado flexbox por ejemplo.

Sinceramente veo bien que se imparta en las clases

privet
privet #16 Ene '19

#14 Mas que nada, por lo segundo que dices. Por que yo ahora llevo 1 mes y pico haciendo xml, y la verdad es que todavía no nos ha enseñado que sentido tiene esto. Y la verdad que me aburre mucho, no me gusta nada

1 respuesta
B
[Borrado] #17 Ene '19

#16 Yo he empezado a ver la luz ahora aprendiendo tecnologías nuevas, porque el primer trimestre con html y css puro no me podía creer que nadoe hiciera las webs así JAJAJJAA

B
[Borrado] #18 Ene '19

Vale, mierda, no era lo que tenia pensado ayer. A ver si me explico:

  • Tener un footer así a resoluciones altas (md en adelante), que se vean todas las opciones debajo del titulo Lorem Ipsum:

  • Que al bajar a resoluciones sm hacia abajo, las opciones secundarias pasen a collapse dentro de los titulos Lorem Ipsum y así no queda un footer tan grande a no ser que el usuario quiera ver lo que hay dentro:

  • Para hacer un collapse mi código sería tal que así:

    <div class="col-sm-12 col-md-3 col-lg-3 col-xl-3 menu-footer">
                            <a data-toggle="collapse" data-target="#subfooter1">
                                <h2>Lorem Ipsum</h2>
                            </a>
                            <div id="subfooter1" class="collapse">
                                <h6>Cosas importantes</h6>
                                <h6>Cosas importantes</h6>
                                <h6>Cosas importantes</h6>
                                <h6>Cosas importantes</h6>
                                <h6>Cosas importantes</h6>
                            </div>
                        </div>

  • Así tal cual está la ventana inicia con el collapse activado (los h6 ocultos), busco que en resolución md hacia arriba inicie la ventana con el collapse desactivado, se vean como mi primera captura y de md hacia abajo el collapse este oculto.

1 respuesta
DaRkViRuZ
DaRkViRuZ #19 Ene '19

#18 creo que tendrás que tirar de js y meterle la clase encargada de plegar el collapse cuando estés en una resolución de movil

1 respuesta
B
[Borrado] #20 Ene '19

#19 Eso me estaba empezando a temer con la información que encuentro por internet...

Camp1
Camp1 #21 Ene '19

Pues tienes dos opciones:

  • Sería replicar el bloque del footer pero con el collapse, esta la pones visible sólo en xs y pones el otro bloque visible sólo a partir de md. Esta no es la mejor opción ya que aunque no sea visible, tienes contenido duplicado.

  • Mediante JS, cambiar el menú cuando esté en la resolución que quieras.

Usuarios habituales

Tags