Título: Ayuda con bootstrap Publicado por: xavidenia en 31 Agosto 2016, 10:07 am Hola estoy creando una pagina web responsive , con bootstrap V2.0.4....
ya se que la ultima version es la 3.3.7, pero me he acogido a esta version pq de la version 2.0.4 si habian ejemplos sobre como crear los contenedores y todo eso , pero para la 3.3.7 no he encontrado ningun ejemplo sobre como crear los contenedores......la cuestion es que una vez creada la pagina, la tengo respònsive y la puedo ver en casi todos los navegadores , y con distintas resoluciones , el problema viene a que no se me acaban de adaptar todo lo bien que me gustaria a las distintas resoluciones........ he estado leyendo por la web que apartir de la version 3 de bootstrap se adapta mejor a las distintas resoluciones..... y mi duda es que no encuentro o no se que scripts he de meter en la pagina para hacerla funcionar en bootstrap 3, ni que etiquetas de la version 2 he de cambiar a las de la version 3...... o en su defecto como hacer para que la version 2 se adapte bien a todas las resoluciones... aver en mi pagina con la version 2 tengo estos scripts intergrados: Código: <script src="js/jquery-1.7.1.min.js"></script> bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js │ └── npm.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 tambien lleva un archivo npm.js que no se si he de incluirlo o incluir los scripts a los que apunta: Código: //contenido npm.js Por otro lado la pagina creada con la version 2.0.4 esta toda creada apartir de containers con clase row y dentro de los container de clase row, div´s con span1,2,3,4....... y cada span con unas medidas ya predeterminadas para bootstrap que yo he ido eligiendo cada span segun la medida que tenia asignada y que me convenia o necesitaba..... para la visualizacion de mi pagina. ejemplo: Código: <div class="row"> Código: <div class="row"> y luego hay unas de esas rejillas que estan preparadas para dispositivos pequeños, otras para dispositivos grandes , y otras para dispositivos grandes y pequeños , supongo que esta es la que deberia elegir para mi pagina... Alguien me podria aclarar estas dudas lo agradeceria mucho.... yperdon por el ladrillo pero sin exponer dudo que alguien me entienda..... Saludos.... Título: Re: Ayuda con bootstrap Publicado por: LaThortilla (Effort) en 31 Agosto 2016, 22:10 pm 1. Te recomiendo la misma documentación de bootstrap... para mi está mas que completa.
* http://getbootstrap.com/css/ (http://getbootstrap.com/css/) * http://getbootstrap.com/components/ (http://getbootstrap.com/components/) * http://getbootstrap.com/javascript/ (http://getbootstrap.com/javascript/) 2. Con respecto a como debes implementar bootstrap 3, tienes 2 opciones que te recomiendo. * la primera y la mas fácil y rápida, añadir esto en tu header: Código
* la segunda opción es descargar el siguiente archivo: https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip (https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip) y copiar el contenido a al directorio de tu aplicación y luego añadir los links a tu proyecto. NOTA: los links que vas a agregar a tu proyecto son los siguientes: Código toma en cuenta que las rutas de los links de los archivos son relativas - Toda la información sobre la descarga he implementación la tienes en: http://getbootstrap.com/getting-started/#download (http://getbootstrap.com/getting-started/#download) 3. Con respecto a la implementación del grid. en bootstrap 3 tienes el sistema de clases .col-xs- para (<768px), .col-sm- para (≥768px) , .col-md- para (≥992px), .col-lg- para (≥1200px) ejemplo de implementación: Código Toda la documentacion sobre como usar el grid de bootstrap 3 esta en la siguiente liga: http://getbootstrap.com/css/#grid (http://getbootstrap.com/css/#grid) Título: Re: Ayuda con bootstrap Publicado por: xavidenia en 1 Septiembre 2016, 12:00 pm Gracias por tu rapida respuesta
solo una cosa mas... he leido por la web que aconsejan poner el script respond.js ....... sabes algo al respecto, es necesario o no?? y otra cosa para hacer un responsive en pantallas hdmi , me lo hace en la media queri de 1200px , que es la misma que pòr vga como puedo independizar la media queri hdmi de la vga....?? saludos Título: Re: Ayuda con bootstrap Publicado por: EFEX en 2 Septiembre 2016, 06:30 am Respond.js al igual que HTML5shim, son scripts para dar soporte a versiones mas anteriores de navegadores, puede que sea util que lo uses.
No entendi lo ultimo. Título: Re: Ayuda con bootstrap Publicado por: xavidenia en 2 Septiembre 2016, 16:52 pm con lo ultimo me refiero a que estoy tratando de ajustar la pagina tanto a un monitor 16:9 hdmi como a un monitor 16:9 vga......
por norma un monitor 16:9 conectado por hdmi tiene una resolucion de 1920 x 1080 pixels mientras que un monitor 16:9 conectado por vga tiene 1366 x 768 pixels...... el problema viene en que en la css mi trae una media queri....... Código: @media (min-width:1200px) va ha entrar en esa categoria........ el problema es que si lo configuro para que se vea bien en la pantalla hdmi de 1920 x 1080 pixels , se ve mal en la pantalla vga de 1366 x 768px....... y si lo configuro bien en la vga de 1366 x 768px ....... se ve mal en la pantalla hdmi de 1920 x 1080 px..... que hago creo un media queri para resoluciones superiores a 1800px????? Código: @media (min-width:1800px) gracias de nuevo y saludos Título: Re: Ayuda con bootstrap Publicado por: EFEX en 3 Septiembre 2016, 07:24 am Pues si vas a tener que hacer un mediaquery para resoluciones mayores a 1800 si el sitio no ve como quieres.
Título: Re: Ayuda con bootstrap Publicado por: xavidenia en 3 Septiembre 2016, 09:24 am Y eso lo puedo hacer, copiando el media queri 1200 px y cambiándole el 1200 por 1800 y cambiando los porcentajes de los col-md*,col-lg* ,col-sm* y de sus respectivos offsets???
Por cierto he visto que también estas en el foro de php a ver si me pudes orientar en una duda que tengo en php .... puse un hilo me contesto una persona ,pero lo que esa persona me dijo no hace lo que yo quiero.... intente modificar la solución que me dieron según mi criterio de como debería de ser pero obtuve el mismo resultado..... A ver si me puedes orientar un poco sobre que es lo que está fallando o estoy haciendo mal....el post se llama ayuda con php. https://foro.elhacker.net/php/ayuda_con_php-t456568.0.html Gracias nuevamente y saludos |