Bootstrap Css

...

incluir archivos JavaScript individuales de los únicos

plugins que utilices) -->

Es posible deshabilitar el zoom para dispositivos móviles añadiendo user-scalable=no a la etiqueta meta del viewport (como se puede ver en el ejemplo inferior). De esta forma los usuarios únicamente podrán usar el scroll de la aplicación, haciendo tu web más similar a una aplicación nativa. Sin embargo, hay que usar esta característica con cuidado ya que no es recomendable para todos los sitios.

2.2. Tipos de rejillas

Bootstrap incluye una rejila o retícula fluída pensada para móviles y que cumple con el diseño web responsive. Esta retícula crece hasta 12 columnas a medida que crece el tamaño de la pantalla del dispositivo. Bootstrap incluye clases CSS para utilizar la rejilla directamente en tus diseños y también define mixins de LESS para que puedas crear diseños más semánticos.

2.2.1. 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 el padding correcto.

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 .row y .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 (el 4 indica 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.

2.2.2. 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) { ... }

2.2.3. 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 (

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

2.2.4. 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.

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8