JavaScript - ayuda con bootstrap 3

 
Vista:
Imágen de perfil de vicente
Val: 30
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con bootstrap 3

Publicado por vicente (15 intervenciones) el 16/11/2016 09:36:09
buenos dias aver tengo una duda sobre bootstrap a ver si alguien puede ayudarne.... o aclararme como debo de hacerlo.....
estoy creando una pagina con bootstrap 3 la pagina la he diseñado en full width.......
le he creado el siguiente media qery
1
2
3
@media (min-width:1200px){
aqui el codigo css.......
}
hasta aqui todo bien y se visualiza bien en pantallas con una resolucion de 1320 x 768 px ........
y se visualiza mal en el momento que la resolucion es superior a 1800 px.... no se ve nada en le sitio donde deberia estar.

el tema esta en que ahora quiero crear una media query para pantallas superiores a 1800px , ya que la mayoria de pantallas soportan hdmi y/o las targetas graficas resoluciones de hasta a 1920x1080 px .....
asi que he copiado el media qery anterior con todo el codigo interno y le he cambiado la resolucion minima a 1800px ..... con la intencion de modificar el codigo interno para adaptarlo a esta resolucion...... ejemplo..
1
2
3
@media (min-width:1800px){
aqui el codigo css de anterior media qery, que quiero adaptar a 1920 x 1080 px
}
el problema es que pongo una pantalla con resolucion 1920x1080 por hdmi o por vga, me es igual he provado en ambas conexiones , he configurado la grafica a una resolucion de 1920x1080px y abro el inspector de firefox y siempre me lleva a la primera css de ......
1
2
3
@media (min-width:1200px){
aqui el codigo css......., css a la que me lleva el inspector
}
y no me aparece la seguna css de.....
1
2
3
@media (min-width:1800px){
aqui el codigo css, que no aparece en el inspector
}
con lo cual , si no me lee la segunda css, todo cambio que haga en dicha css no sirve de nada........
alguien puede decirme como solventar este error????
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

ayuda con bootstrap 3

Publicado por Edgar Gutierrez (2 intervenciones) el 16/11/2016 15:25:11
Creo que no has entendido como usar boostrap jejeje, bueno no hay problema, sí la creas full width no tienes porque hacer tus estilos en el media queries, simplemente escribelos fuera de este que en todas las resoluciones se verán igual. Una vez tengas un diseño más o menos "FLUID" empiezas a crear reglas media queries en las distintas resoluciones donde solo pondrás que cambios habrán en las distintas resoluciones, no debes volver y colocar todo el css una y otra vez.

Segundo, puede que el navegador no reconozca el cambio a una resolución mayor a la máxima de tu monitor o que algo este mal escrito, que por lo general siempre es eso.

Y por ultimo, recuerda que la filosofía en boostrap es no estas usando mucho el css propio, sino en lo posible usar las clases que este ya trae y solo preocuparte por el html.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de vicente
Val: 30
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con bootstrap 3

Publicado por vicente (15 intervenciones) el 16/11/2016 16:25:14
Gracias por tu respuesta.......
No se si he entendido bien el bootstrap pero que yo hago es usar en la medida de lo posible todas las clases que lleva el bootstrap.min.css.....
el problema es que tengo que crear una css propia para poder posicionar las cosas donde yo quiero que esten posicionadas......
hasta ahi creo que voy bien...... solo que para posicionarlas, las clases(reglas) esas las meto dentro de un media queries en este caso , en...
1
2
3
4
5
@media (min-width:1200px){
 
aqui las clases de posicionamiento
 
}

si no es asi y no lo estoy haciendo bien...... y lo pongo fuera como hago para que en cada resolucion salga todo centrado????

en cuanto a lo del diseño fluid , antes se usaba el container-fluid pero segun la nueva documentacion es ya lo han eliminado......
ahora toda clase container es fluida......

de todas formas agradeceria que me explicaras de forma un poco mas extensa como seria la forma correcta de usar bootstrap mas correctamente....

te explico lo que yo hago .....todas las imagenes las tengo con clase img-responsive que es una clase que ya lleva el bootstrap.min.css
luego en los div, section o article pongo las clases col-lg-10 col-sm-10 col-md -10 y col-xs-10 para que una imagen me coja casi todo el ancho de pagina, por ejemplo.......
los col-lg-offset y esas clases no las uso para posicionar pq no me dan el resultado deseado.......
asi que creo una css propia y creo las media queries necesarias......

y luego dentro del media queries posiciono la imagen segun el tamaño de pantalla....

si no es asi como se hace, te agradeceria que me explicaras un poco mas detalladamente como se hace correctamente.......
pues en la documentacion del bootstrap 3 habla y explica mucho acerca de las clases que lleva pero muy poco acerca de como usarlo.....
de echo lo unico que creo haber leido en la documentacion sobre como usarlo , creo que es lo de crear una hoja de estilo propia , copiar la propiedad que se quiere modificar en la css propia y modificarla, quedando por asi decirlo anulada la propiedad en la bootstrap.min.css....

gracias y saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de vicente
Val: 30
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ayuda con bootstrap 3

Publicado por vicente (15 intervenciones) el 18/11/2016 11:44:26
he probado poniendo el codigo como me comentaste usando solo la css de bootstrap.....
y bueno el resultado no esta nada mal......

pero se me queda desplazado todo el container a la derecha.....
he probado modificando el padding de 15px , tambien he probado modificando los margin:auto que lleva por defecto bootstrap en la clase container pero nada sin efecto, continua haciendome un desplazamiento a la derecha del contenido.....

cambio resolucion y sopresa el despalzamiento a la derecha es aun mas evidente para que veas a lo que me refiero te voy a subir 2 capturas de pantalla...


1920-x-1080px

captura de pantalla a resolucion 1920 x 1080px


1360-x-786px

captura de pantalla a resolucion 1360 x 768px

como ves de una resolucion a otra hay una diferencia, a la hora de mostrarse la pagina.... ahora mismo no usa mas que las clases que hay
en bootstrap.min.css

y eso que esta pagina no tiene mucho contenido......

encima estando en la resolucion de 1920 x 1080px he tenido que añadirle un overflow-x:hidden a body pq me generaba un espacio vacio de unos 250px a la derecha del cuerpo de la pagina o sea desde que comieza el header hasta que termina el footer , me crea un espacio vacio a la derecha de unos 250px, que he tenido eliminado con un overflow-x:hidden en el body.....

no se pq me hace esas cosas en bootstrap en teoria hasi deberia de funcionar bien, no crear espacio vacio a la derecha , ni desplazarme a la derecha el contenido....

saludos y gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar