Introducción
El diseño de páginas basado en rejilla se realiza mediante filas y columnas donde se colocan los contenidos. Así funciona la rejilla de Bootstrap:
- Las filas siempre se definen dentro de un contenedor de tipo
.container(anchura fija) o de tipo.container-fluid(anchura variable). De esta forma las filas se alinean bien y muestran elpaddingcorrecto. - Las filas se utilizan para agrupar horizontalmente a varias columnas.
- El contenido siempre se coloca dentro de las columnas, ya que las filas sólo deberían contener como hijos elementos de tipo columna.
- Bootstrap define muchas clases CSS (como por ejemplo
.rowy.col-xs-4) para crear rejillas rápidamente. También existen mixins de Less para crear diseños más semánticos. - La separación entre columnas se realiza aplicando
padding. Para contrarrestar sus efectos en la primera y última columnas, las filas (elementos.row) aplican márgenes negativos. - Las columnas de la rejilla definen su anchura especificando cuántas de las 12 columnas de la fila ocupan. Si por ejemplo quieres dividir una fila en tres columnas iguales, utilizarías la clase
.col-xs-4(el4indica que cada columna ocupa 4 de las 12 columnas en las que se divide cada fila).
Nota Si quieres crear un diseño totalmente fluido que ocupe toda la anchura del navegador, deberías encerrar las rejillas dentro de un elemento al que apliques los estilos padding: 0 15px;. De esta forma se pueden neutralizar los márgenes margin: 0 -15px; que se aplican a los elementos .row.
Media queries
Bootstrap utiliza las siguientes media queries para establecer los diferentes puntos de ruptura en los que la rejilla se transforma para adaptarse a cada dispositivo.
/* Dispositivos muy pequeños (teléfonos de hasta 768px de anchura) *//* No se define ninguna media query porque este es el estilo por defecto utilizado por Bootstrap 3 *//* Dispositivos pequeños (tablets, anchura mayor o igual a 768px) */@media (min-width: @screen-sm-min) { ... }/* Dispositivos medianos (ordenadores, anchura mayor o igual a 992px) */@media (min-width: @screen-md-min) { ... }/* Dispositivos grandes (ordenadores, anchura mayor o igual a 1200px) */@media (min-width: @screen-lg-min) { ... }
En ocasiones, también se utilizan las siguientes media queries que definen la propiedad max-width y permiten restringir los dispositivos a los que se aplican los estilos CSS:
@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }
Características de cada rejilla
La siguiente tabla muestra las características de la rejilla de Bootstrap en los diferentes tipos de dispositivos.
| Dispositivos muy pequeños Teléfonos (<768px) | Dispositivos pequeños Tablets (≥768px) | Dispositivos medianos Ordenadores (≥992px) | Dispositivos grandes Ordenadores (≥1200px) | |
|---|---|---|---|---|
| Comportamiento | Las columnas se muestran siempre horizontalmente. | Si se estrecha el navegador, las columnas se muestran verticalmente. A medida que aumenta su anchura, la rejilla muestra su aspecto horizontal normal. | ||
| Anchura máxima del contenedor | Ninguna (auto) | 728px | 940px | 1170px |
| Prefijo de las clases CSS | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Número de columnas | 12 | |||
| Anchura máxima de columna | auto | 60px | 78px | 95px |
| Separación entre columnas | 30px (15px a cada lado de la columna) | |||
| ¿Permite anidación? | Si | |||
| ¿Permite desplazar columnas? | No | Si | ||
| ¿Permite reordenación de columnas? | No | Si | ||
Ejemplo de rejilla creada con Bootstrap
El siguiente ejemplo muestra cómo crear una rejilla con las clases .col-md-*. En los dispositivos móviles (extra pequeño o pequeño) esta rejilla se muestra verticalmente, pero en un ordenador (medio o grande) se ve horizontalmente.
<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 de contenedor de anchura variable
Si quieres transformar una rejilla de anchura fija en una rejilla de anchura variable que ocupa toda la anchura del navegador, reemplaza la clase CSS .container por .container-fluid en el elemento que encierra a todos los demás elementos de la rejilla:
<div class="container-fluid"> <div class="row"> ... </div></div>
Ejemplo de rejilla para móviles y ordenadores
Si no quieres que las columnas de la rejilla se muestren verticalmente en los dispositivos pequeños, utiliza a la vez las clases .col-xs-* y .col-md-*, tal y como muestra el siguiente ejemplo.
<!-- En los móviles las columnas se muestran verticalmente porque una de ellas ocupa toda la anchura del dispositivo y la otra columna ocupa la mitad --><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><!-- En un móvil las columnas ocupan la mitad del dispositivo y en un ordenador ocupan la tercera parte de la anchura disponible --><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 ocupan siempre la mitad de la pantalla, tanto en un móvil como en un ordenador de escritorio --><div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div></div>
Ejemplo de rejilla para móviles, tablets y ordenadores
A partir del ejemplo anterior, puedes hacer que el layout sea todavía más dinámico añadiendo las clases .col-sm-* pensadas para tablets:
<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-md-4">.col-xs-6 .col-md-4</div></div><div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Código opcional para limpiar las columnas XS en caso de que el contenido de todas las columnas no coincida en altura --> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div></div>
* Esta fraccion de texto está extraida de la pagina https://librosweb.es/ donde podeis ver con más detalle todo el funcionamiento de Bootstrap en general.