Título: Duda con bootstrap 3 Publicado por: xavidenia en 14 Septiembre 2016, 23:44 pm hola aver si alguien me puede aclarar esta duda que tengo.....
estoy creando una pagina web responsive con bootstrap 3 ya la tengo armada y como de normal la he creado con la rejilla col-lg para pantallas grandes ....... pues la pantalla de mi pc es de 22 pulgadas y una resolucion de 1360 x 768px.... con lo cual la media query que entra en trabajo con esta pantalla es la de min-width 1200px pues bien ahora que la tengo montada empiezo a adaptarla para otros dispositivos..... y adapto de la siguiente forma....... media query min-width 768px ---> col-sm esta la adapto para smartphones en horizontal y tablets en vertical nota: adaptando el col-sm para estos dispositivos se me queda la pagina configurada para smartphones y tablets en vertical y horizontal. tambien se me queda configurada para smartphones pequeños, se podria ajustar mas, pero me vale como se ve, si decidiera ajustarla mas, bastaria con ajustar con el col-xs..... media query min-width 992px ---> col-md en teoria esta seria para tablets en horizontal y dispositivos medianos ,pantallas de 10 o 15 pulgadas. el problema viene en que al adaptarla a una resolucion inferior si le ajusto el col-sm , consigo que se vea bien en las pantallas de smartphones y tablets , pero se desajusta el col-lg que es para pantallas grandes... alguien puede decirme si es que estoy haciendo algo mal??? alguien me puede decir si es que tengo que poner los ajustes de la css dentro de cada media query??? por ejemplo : si quiero que el footer tenga un formato, en smartphones y otro en desktops , tengo que poner el ajuste css de cada uno dentro de su respectivo media query??? otra cosa que me he dado cuenta es que la pagina deja algo de scroll horizontal tanto si la veo en smartphone como si la veo en tablet ,tanto en vertical como en horizontal es poco seran unos 20 px pero me gustaria quitarselo. Gracias y saludos Título: Re: Duda con bootstrap 3 Publicado por: Marciano_79 en 16 Septiembre 2016, 21:10 pm La idea es que Bootstrap se adapte a las ideas de uno y no al revés.... mira tu puedes automatizar el código a tu gusto, descargar tu archivo de Bootstrap como lo necesites, verifica en la pagina oficial en ingresa donde dice customize es mejor preparar el css ahí y sacas lo que necesitas a tu medida.. incluso quitando esos 20 px demás que no te gustan... saludos!
Título: Re: Duda con bootstrap 3 Publicado por: Jeferi en 17 Septiembre 2016, 00:58 am Con Bootstrap lo que haces es estructurar el sitio web dependiendo del ancho de la pantalla del dispositivo. Además incluye plugins (opcionales) y componentes listos para ser utilizados.
Normalmente yo siempre escribo reglas CSS propias. Bootstrap lo he utilizado únicamente para darle una estructura inicial. Recuerda además incluir las columnas dentro de una capa tipo container: Código: <div class="container"> Recuerda que yo siempre le doy reglas CSS propias para aplicarle padding u otras reglas CSS. Espero haberme explicado correctamente. Aún así, incluye códigos de ejemplo de tus archivos HTML para saber mejor qué estás intentando. Título: Re: Duda con bootstrap 3 Publicado por: xavidenia en 17 Septiembre 2016, 12:26 pm gracias por vuestras respuestas ......
os entiendo mi duda es que creo la media query del dispositivo le meto un min-width de 960px por ejemplo una medida para tablet y me crea un scroll horizonal con lo cual debo de bajar el width en el media query de dicho dispositivo........ por otro lado bootstrap viene con muchos margenes predefinidos como los que llevan col-xs-push col-xs-pull col-xs-offset y lo mismo con las mismas clases de las variantes sm, md y lg....... debo adaptar dichos margenes al diseño que yo estoy creando o bootstrap deberia por si mismo escalarlo automaticamente, simplemente cambiando por ejemplo : col-xs-11 por col-sm-10,col-md-9,col-lg-8 ??? tambien tengo otro problema y es que cree el header con menu responsive para que cuando reduzca de resolucion me salga el boton collapse para desplegar el menu de la pagina..... lo hice, lo probe , funcionaba luego lo pase , lo hice en php y lo guarde como header. inc.php de forma que solo tengo un mismo menu para todas las paginas, simplemente insertando en cada pagina un .... Código: <?php lo probe en xampp, funcionaba y funciona..... el problema es que subi la pagina a un server gratuito para probarla(hostinger) y el boton que despliega el menu del header no funciona no despliega el menu, lo he revisado todo y no le veo ningun problema...... pero no me abre.... en cambio ese mismo menu lo descargo desde hostinger y lo pruebo en el xampp en server local y si que va..... si que se abre y despliega se os ocurre por donde pueda venir el error??? muchas gracias Título: Re: Duda con bootstrap 3 Publicado por: Jeferi en 17 Septiembre 2016, 13:33 pm ¿Puedes subir el código a Github?
le meto un min-width de 960px por ejemplo una medida para tablet ¿Le metes un max-width también? Sube el código.debo adaptar dichos margenes al diseño que yo estoy creando o bootstrap deberia por si mismo escalarlo automaticamente, simplemente cambiando por ejemplo : col-xs-11 por col-sm-10,col-md-9,col-lg-8 ??? Un elemento puede tener varias clases ^col Código Si no subes código va a ser difícil saber por qué no te funciona qué cosa. Título: Re: Duda con bootstrap 3 Publicado por: xavidenia en 17 Septiembre 2016, 16:34 pm gracias por tu respuesta.......
ya se que un elemento puede tener varias clases col..... cada clase col da un width difrente y hay 12 col de cada clase..... te los describo aqui...... 12 col-xs (cada unos con un width difererente) 12 col-sm (cada unos con un width difererente) 12 col-md (cada unos con un width difererente) 12 col-lg (cada unos con un width difererente) pero estas clases solo dan tamaño al contenedor con el width, no posicionan.... y lo mismo pasa con las clases col-xs-push a col-lg-push (esta da un left que viene preestablecido) col-xs-pull a col-lg-pull (esta da un right que viene preestablecido) col-xs-offset a col-lg-offset (esta clase da un margin-left que viene preestablecido) y todas con valores a % estas clases si que pueden posicionar..... mezclando por ejemplo, col-lg-5 col-lg-push-2.... se que puedo meter varias clases de todas las que detallo arriba en un elemento mi duda es col-xs-push-2 viene con el valor preestablecido a left:16.66666667% pq si el col-xs-push-1 se me queda corto y el col-xs-push-3 demasiado largo... lo logico es poner un col-xs-push-2 que esta entre los dos valores, pero si aun asi el elemento no acaba de quedarse donde yo quiero, tendre que modificar ese valor, no??? eso es lo que preguntaba si habia que modificar esos valores???? o si habia que ir jugando con los valores preestablecidos....... en cuanto a los media query bootstrap ya los lleva preestablecidos tambien..... de normal yo me he creado mi media query para smartphones de 5 o 5,5 pulgadas tanto en vertical como en horizontal....... Código: @media (max-device-width:640px) and (orientation:landscape){ Código: @media (max-device-width:640px) and (orientation:landscape){ entonces, no se si es normal que me cree un scroll horizontal abajo ,si le pongo el width de container correctamente, osea la width real del dispositivo...... si conoces alguna otra forma de hacer los media query que funcione mejor estoy abierto a sugerencias...... en cuanto a lo del boton del header te subo el codigo , seguramente lo veras bien , pues he revisado el codigo 1000 veces y no veo el error, pero puede que tenga un error y no haya dado con el........ Código: $ruta ="/pruebasphp/Pagina final/"; gracias por tu respuesta y saludos Título: Re: Duda con bootstrap 3 Publicado por: Jeferi en 17 Septiembre 2016, 16:45 pm pq si el col-xs-push-1 se me queda corto y el col-xs-push-3 demasiado largo... lo logico es poner un col-xs-push-2 que esta entre los dos valores, pero si aun asi el elemento no acaba de quedarse donde yo quiero, tendre que modificar ese valor, no??? eso es lo que preguntaba si habia que modificar esos valores???? o si habia que ir jugando con los valores preestablecidos....... Ahora he entendido tu pregunta. Sí. Puedes modificar esos valores con tus propias reglas CSS. Ten en cuenta algo: Código
Si el container tiene un width de 538px en pantallas inferiores a 640px, y la pantalla tiene 400px, vas a ver un scroll horizontal porque el ancho del container es mayor que el ancho de la pantalla. ¿Por qué añades también orientation: landscape? Título: Re: Duda con bootstrap 3 Publicado por: xavidenia en 17 Septiembre 2016, 16:55 pm aver no entiendo con mis propias reglas css 3 o vale copiar ese valor a mi css y variarle el valor????
si tengo en cuenta eso de las pantallas inferiores por eso tengo dos media query mas para pantallas inferiores ........ adaptado a pantallas inferiores es mas curro y quiza este mas mal hecho pero funciona..... pongo lo de landscape mas que nada para diferenciar la configuracion horizontal de la vertical(portrait), pq desde luego ambas tienen containers diferentes....... podria poner un comentario , pero he preferido hacerlo asi.... aunque dudo que queden pantallas inferiores a 5 o 5,5 pulgadas en todo caso inferiores.... en teoria esta media query tambien deberia funcionar en pantallas inferiores, de echo lo hace y si me crea algo de scroll horizontal pero solo en horizontal en vertical no.... tendre que ajusta algo mas.. donde no debe funcionar es es mayores de 640px...... aunque creo que no me has entendido...... Código: @media (max-device-width:640px) and (orientation:landscape){ te recuerdo que funciona bien con el xampp cuando no funciona es cuando lo subo a server de hostinger... por cierto sabes de algun javascript con el que hacer un tipo lightbox , pero que en vez de fotos salga texto..... formularios y cosas asi???? saludos nuevamente y gracias por tu rapida respuesta |