Bootstrap incluye diseño responsive para moviles en esta entrega, con un sistema de rejillas de 12 columnas, estas se escalan segun el dispositivo o el tamaño del viewport(area del contenido en un navegador web). El framework ya tiene clases predefinidas con respecto a la rejilla de bootstrap, pero ademas se puede personalizar classes para que puedas definir el tamaño que desees.
Bueno ahora entremos en mas detalles para conocer mas acerca de el grid-system de bootstrap.
Las media queries
Las media queries son usadas para crear puntos de interrupcion en el sistema de rejillas segun el dispositivo, sea movil, tablet o PC el sistema de rejillas se comportara diferente por ejemplo:
/* Dispositivos muy pequeños (phones, mas de 480px) */
/* Estos son los valores por defecto en Bootstrap */
/* Dispositivos pequeños (tablets, 768px o mas) */
@media (min-width: @screen-sm) { ... }
/* Dispositivos medianos (desktops, 992px o mas) */
@media (min-width: @screen-md) { ... }
/* Dispositivos grandes (large desktops, 1200px o mas) */
@media (min-width: @screen-lg) { ... }
Ocasionalmente podemos ampliar las media queries para delimitar el comportamiento en dispositivos mas estrechos con la propiedad
max-width
@media (max-width: @screen-phone-max) { ... }
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg) { ... }
Opciones
En esta tabla puedes ver como funcionaria el sistema de rejillas de bootstrap dependiendo de los dispositivos:
|
Dispositivos muy pequeños(Phones (<768px))(extra small) |
Dispositivos pequeños(Tablets (≥768px))(small) |
Dispositivos Medianos(Desktops (≥992px))(medium) |
Dispositivos Grandes(Desktops (≥1200px))(large) |
| Comportamiento de la rejilla(Grid) |
Siempre horizontal |
Colapsado al iniciar, horizontal en funcion a el tamaño del area de trabajo del navegador |
| Ancho maximo del contenedor |
No (auto) |
750px |
970px |
1170px |
| prefijo de class |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # de columnas |
12 |
| Ancho maximo de columnas |
Auto |
60px |
78px |
95px |
| Separacion de Columna |
30px (15px en cada lado de una columna) |
| Empotrable |
Yes |
| Desplazamiento |
N/A |
Si |
| Ordenamiento de columnas |
N/A |
Si |
Ejemplo: vertical - horizontal
Usando un solo tipo de clases .col-md-*, puedes crear un sistema de columnas muy basico, de esta manera bootstrap comenzara apilando los elementos para los dispositivos moviles(extra small) y tablets(small). Para los PC(medium) las capas se alinearan de forma horizontal prueba esto con herramientas para diseño responsive existen bastantes herramientas para que vallas probando tus diseños en lo personal uso un complemento para Chrome que se llama Dimensions.
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
Ejemplo movil - PC
Con el ejemplo anterior vimos que en dispositivos mas pequeños que una PC los dispositivos simplemente se apilaban, no querremos siempre eso, bootstrap tiene para eso y mucho mas, para ello procedemos a usar las clases para dispositivos moviles y tablet, agregando .col-xs-* .col-md-* respectivamente, para mantener las columnas.
<!-- Se apilan las columnas en dispositivos moviles una capa en 100% y otra
en 50% ya que la rejilla su maximo es de 12 columnas-->
<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>
<!-- Comienza con 50% de ancho las columnas para moviles y 33% para PC-->
<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>
<!-- Las columnas siempre se mantienen en 50% de ancho para moviles y PC-->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Ejemplo: Movil, tablet, PC.
Siguiendo el ejemplo anterior podemos crear un diseño de capas mas dinamico y poderoso no solo para moviles si no para tablets y PC agregando las clases .col-sm-* cabe mencionar que los * al final de las clases son enumerables o numericos que van en funcion al numero de columnas que bootstrap ofrece o las que declaremos nosotros mas adelante en la seccion de LESS se explica como cambiar estos valores.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
<!-- Opcionalmente: En el caso que la altura de la primer columna excediera de
altura, las columnsas subyacentes se desplazan por debajo del contenido-->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
Reestableciendo las columnas responsive
Con cuatro columnas no es posible que se muestren del todo bien si unas son mas altas que otras, en esta situacion las columnas se mantienen por la derecha. Para arreglar esto debemos usar la combinacion de
.clearfix junto con las
utilerias responsive(posteriormente el enlace para esta seccion...)
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Agregar clearfix para mantener contexto de rejilla sin flotar -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
Ademas de manipular el funcionamiento responsive de las columnas. Tambien podemos necesitar "desplazar(offset) empujar(push) o jalar(pull)" las capas. En el siguiente ejemplo mostramos como se desplaza una columna despues de una capa y que solo se afecte en tablets.
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
Desplazando columnas(Offseting).
Podemos mover columnas por la derecha usando
.col-md-offset-* como clases en las capas. Estas clases incrementan el margen izquierdo de una columna con *(numero de columnas). Por ejemplo,
.col-md-offset-4 se movera cuatro columnas despues de de la clase
.col-md-4.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div
Anidando columnas
Podemos anidar columnas a las existentes agregando .row y un conjunto de .col-md-* a una columna .col-md-* existente. El padre de las columnas contenidas sera un nuevo sistema de rejilla de 12 columnas comportandose de manera recursiva en cada columna anidada.
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>
Ordenando columnas
Puedes ordenar las columnas con .col-md-push-* y .col-md-pull-* como se muestra en el siguiente ejemplo aunque el efecto se puede ver como si se reordenara pero lo que en realidad pasa es que los margenes incrementan y decrementan respecto a la columna 0.
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
Mixins y variables con LESS
Bootstrap fue insporado por LESS cabe mencionar que este a su vez fue inspirado por SASS, solo por mencionar este dato curioso.
Sin entrar en tanto detalle cabe mencionar que si no estas conforme con las medidas que bootstrap te ofrece para diferentes dispositivos no te preocupes no es necesario que andes usmeando por ahi para encontrar el framework que mejor te acomode para las tareas que necesites ya que bootstrap te ofrece la posibilidad de establecer tus propias metricas.
Variables
Las varibles que determinan el numero de columnas, el ancho de separacion para las columnas y el tamaño del navegador en el que se comienzen a alinear las columnas segun las clases que hayamos declarado anteriormente. Podemos predefinir estas variables antes de comenzar a implementar los mixins que se muestran mas adelante.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
Mixins
Antes de comenzar con los mixins explicaremos de forma breve que es un mixin. Un mixin en el ambiente en el ambiente de programacion es basicamente heredar funcionalidad, tener codigo reutilizable a la mano; ¿para que hacer lo mismo dos veces para diferente fin?. Ya que bootstrap lo que le da su potencialidad es LESS y este a su vez inspirado en SASS; cuantas veces hemos pretendido diseñar como si de programar se tratase, pues con bootstrap esto ya no es un problema con la potencialidad que ofrece declarando Mixins.
Los mixins son usados en cojunto con las varibles que definen el sistema de rejilla de bootstrap, de esta manera se puede manipular el comportamiento de las columnas.
// Creamos un wrapper para una serie de columnas
.make-row(@gutter: @grid-gutter-width) {
// Limpiamos las columnas que flotan
.clearfix();
@media (min-width: @screen-small) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Agregamos un margen negativo en ambos lados de las filas para que
// se alinie el contenido anidado
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Genera columnas para dispositivos moviles(telefonos)
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Previene que las columnas se colapsen cuando estan vacias
min-height: 1px;
// relleno interior en una capa
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calcula el ancho basado en las columnas disponibles
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Genera columnas para dispositivos tablet
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Previene que las columnas se colapsen cuando estan vacias
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calcula el ancho basado en las columnas que estan disponibles
@media (min-width: @screen-small) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Genera el desplazamiento para los dispositivos tablet
.make-sm-column-offset(@columns) {
@media (min-width: @screen-small) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-small) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-small) {
right: percentage((@columns / @grid-columns));
}
}
// Genera las columnas para los dispositivos PC
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Previenen que las columnas colapsen cuando se encuentran vacias
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calcula el ancho basado en las columnas disponibles
@media (min-width: @screen-medium) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Genera el desplazamiento de las columnas para dispositivos PC
.make-md-column-offset(@columns) {
@media (min-width: @screen-medium) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-medium) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-medium) {
right: percentage((@columns / @grid-columns));
}
}
// Genera las columnas para dispositivos grandes
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Previene que las columnas colapsen cuando se encuentran vacias
min-height: 1px;
// Relleno interior de una capa
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calcula el ancho basado ene el numero de columnas disponibles
@media (min-width: @screen-large) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate el desplazamiento para dispositivos grandes
.make-lg-column-offset(@columns) {
@media (min-width: @screen-large) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-large) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-large) {
right: percentage((@columns / @grid-columns));
}
}
Ejempo para usar los mixins
Puedes modificar las variables de bootstrap con los vlaores que tu decidas o usa mixins con los valores default. Aca un ejemplo usando la configuracion predeterminada para crear dos columnas con un espacio entre ambas.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>
