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

SEO ferely.co


Nota del autor: Busco programadores y diseñadores freelance para colaborarme con proyectos. Mostrame tus trabajos desarrollados, escribime!


Te agradaría derivar tu proyecto a un programador con años de experiencia?

Ing. Diego Angelini.
Autor de BlogdePHP.com
Programador Web Freelance






Porfolio de proyectos