Ayuda con bootstrap

[xavidenia]

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 [Seleccionar] Expandir


<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>

el nuevo paquete de bootstrap 3.3.7 contiene todo esto:
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 [Seleccionar] Expandir


//contenido npm.js
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')

entonces me lio y ahora mismo no se que scripts son los que he de poner en la pagina....

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 [Seleccionar] Expandir


<div class="row">
    <div class="span6">
    <h3 class="presentacion">bwekejkjrejkreth</h3>
      <p>jfsdljhgfdjghñfdklhj</p>
    </div>
  </div>

ejemplo de otra pagina:

Código [Seleccionar] Expandir


<div class="row">
   <div class="span4">
     <a rel="lightbox" href="img/thumb1.jpg"><img src="img/thumb1.jpg" alt=""></a>
     <h3>Autor :</h3>
     <p>Categoria :</a><p>
</div>
   <div class="span4">
     <a rel="lightbox" href="img/thumb1.jpg"><img src="img/thumb1.jpg" alt=""></a>
     <h3>Autor :</h3>
     <p>Categoria :</a><p>
</div>
   <div class="span4">(segun documentacion bootstrap 3 deberia cambia estas clases a alguna de estas Rejillas ....
Rejilla diminuta (<768 px)-.col-xs-*
Rejilla pequeña (>768 px)-.col-sm-*
Rejilla mediana (>992 px).col-md-*
Rejilla grande (>1200 px).col-lg-*)
     <a rel="lightbox" href="img/thumb1.jpg"><img src="img/thumb1.jpg" alt=""></a>
     <h3>Autor :</h3>
     <p>Categoria :</a><p>
</div>
 </div>

si no estoy equivovado.....
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....

[LaThortilla (Effort)]

1. Te recomiendo la misma documentación de bootstrap... para mi está mas que completa.
* http://getbootstrap.com/css/
* http://getbootstrap.com/components/
* 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 (html4strict) [Seleccionar] Expandir

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

* 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

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 (html4strict) [Seleccionar] Expandir

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="./css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">

<!-- Latest compiled and minified javascript -->
<script src="./js/bootstrap.min.js"></script>

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

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 (html4strict) [Seleccionar] Expandir

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
 <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
 <div class="col-xs-6">.col-xs-6</div>
 <div class="col-xs-6">.col-xs-6</div>
</div>


Toda la documentacion sobre como usar el grid de bootstrap 3 esta en la siguiente liga:

http://getbootstrap.com/css/#grid

[xavidenia]

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

[EFEX]

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.

[xavidenia]

 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 [Seleccionar] Expandir


@media (min-width:1200px)

con lo cual todo monitor que vaya por arriba de esa resolucion en pixels en horizontal
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 [Seleccionar] Expandir


@media (min-width:1800px)

esa era mi duda principal.....

gracias de nuevo y saludos

[EFEX]

Pues si vas a tener que hacer un mediaquery para resoluciones mayores a 1800 si el sitio no ve como quieres.

[xavidenia]

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