Tips para Utilizar Bootstrap (responsive design)
Hola a todos los blogerosdephp. En el anterior post, vimos 7 pasos claves para hacer una web adaptada a móviles con responsive desing. Hoy vamos a ver algunas recomendaciones para trabajar con Bootstrap (un framework responsive design).
Si quieren mirar cada código les recomiendo su centro de ayuda, http://getbootstrap.com/components/
1- cuando vinculen los css a su pagina.html es mejor poner en primer lugar el boostap.css y luego los demás estilos, dejando tu archivo de estilos propios de ultimo.
ej:
<link href=”css/bootstrap.css” media=”all” rel=”stylesheet”>
<link href=”css/bootstrap-responsive.css” media=”all” rel=”stylesheet”>
<link href=”css/estilos.css” media=”all” rel=”stylesheet”>
2- importante para que no se autoescale la página a los smartphone:<meta name=”viewport” content=”width=device-width, initial-scale=1″>
de lo contrario se vería la web igual que en pantallas grandes y para los estándares de diagramación de ahora es imprescindible
3- los contenedores estáticos como container row están bien utilizarlas en las pantallas grandes, pero para las pantallas pequeñas y tabletas utilicen las fluidas que son del 100% de la pantalla
ej: pantallas fijo
<div class=”container”>
<p>Esto sirve como contenedor para todo el contenido de tu página</p>
</div>
<div class=”row-fluid”>
</p>sirve para crear filas</p>
</div>
ej: celulares, tabletas
<div class=”container-fluid”>
<p>en caso de que se quiera usar un layout fluido</p>
<div>
<div class=”row-fluid”>
<p>en caso de que se quiera usar un layout fluido, al 100% de la pagina</p>
</di
4- este es un cambio de boostrap 3, y es que las imágenes no se escalan como en boostrap 2, para solucionar esto hay que utilizar la clase .img-responsive
ej: <img src=”…” class=”img-responsive” alt=”imagen escalable de blog de php”>
tip: una de las nuevas caracteristicas de la version 3 es poder añadir bordes a la imagen, un proceso que se demoraron en traerlo pero ya por fin lo tenemos
<img src=”…” alt=”…” class=”img-rounded”> – para bordes en las esquinas
<img src=”…” alt=”…” class=”img-circle”> – para una imagen redonda
5- con respecto a las tablas filas anidadas, es sencillo como boostrap lo utiliza, colocas una fila – row, con sus doces columnas hijo, y no importa donde quieras colocar el siguiente row solo debe de tener sus 12 columnas hijo.
ej:
<div>
<div class=”span8″>
Primer Nivel
<div>
<div class=”span6″>Segundo Nivel</div>
<div>Segundo Nivel</div>
<div>Segundo Nivel</div>
</div>
</div>
<div class=”span4″>
Primer Nivel
</div>
</div>
Fernando Ortiz
