Bootstrap V.3. CSS 2/2

Bootstrap V.3. CSS 2/2



Ejemplos del nuevo funcionamiento:

En resumen cuando configuremos un div dentro de nuestro código tendremos que tener en cuenta
no sólo una class como aplicabamos antes más un número que definía cuantas columnas ocuparía dicho div.
En el sistema actual debemos especificar tantas class como adaptaciones a diferentes dispositivos necesitemos.

Ejemplo div con class para todos los dispositivos ocupando el total de la fila:

<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
Este código nos debería ocupar todas las columnas dentro de una "row"</div>
</div>

Variando entre las diferentes class (XS SM MD LG) y el número de columnas ocupadas (1-12)
iremos formando nuestra plantilla.



Posiblemente nos encontremos con "fallos" en el diseño, o necesidad de compensar con huecos, dejar columnas vacías, etc. para ello nos valdremos como antaño de la herramienta "offset" y las actuales "reseet", "pushes" y "pulls"

Para desplazar una columna x a la derecha usaremos el offset. Imaginemos que queremos desplazar un div md de tres columnas  el espacio equivalente a otras 4 columnas dejando así un hueco de 4 a la izquierda.
El código sería:

<div class="-col-md-3 col-md-offset-4">