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:
<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:
//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:
<div class="row">
<div class="span6">
<h3 class="presentacion">bwekejkjrejkreth</h3>
<p>jfsdljhgfdjghñfdklhj</p>
</div>
</div>
ejemplo de otra pagina:
<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....
Mostrar Mensajes