Sistema de Rejilla de Bootstrap

Escrito por:

Alvaro Munoz

Hoy aprenderás cómo es Diseñando con el Sistema Grid o de rejilla en Bootstrap, el segundo capítulo de nuestra guía “Cómo diseñar con Bootstrap”. Si quieres leer el primer capítulo puedes leerlo pinchando en: Primeros pasos con Bootstrap.

Antes de empezar este capítulo quiero dejar claro que para estructurar bien los contenidos de una página de una web, es necesario prepararla a conciencia antes de empezar a diseñar nada. Ya sabéis, la frase “Dame 6 horas para cortar un árbol y estaré 4 afilando el hacha”.

Te recomiendo que antes de pasar a la fase de desarrollo y diseño crees tu wireframes, piensa en la usabilidad correcta y una vez que tengas la estructura web adecuada podrás pasar a la fase de diseño.

Indice del artículo:

1- Diseñar con Rejillas: Etiquetas
1.1 – Etiquetas para móviles
1.2 – Etiqueta Container

2- Funcionamiento del Sistema de Rejilla
2.1 – Filas, Columnas y Tamaños de Pantalla
2.2 – Tamaño de la fuente

3- Consejos y Trucos sobre Sistema de Rejilla de Bootstrap
3.1- Usa Container Fluid para filas de ancho completo (Full Width Rows).
3.2- Usa Inline-block para alinear elementos
3.3- Clase imagen Responsive

 

 

1 . Primer paso para diseñar con rejilla: Etiquetas

Como todos sabéis debéis añadir ciertas etiquetas html a todas y cada una de las páginas que creemos con Bootstrap.
La etiqueta más importante es DOCTYE.

Con esta etiqueta estamos indicando que nuestro documento está escrito siguiendo una estructura concreta y determinará la manera en la que el navegador procesará el documento.
Se empieza por supuesto con la etiqueta del lenguaje que estés desarrollando la web, por lo que si es en otro idioma recuerda declarar qué idioma es en la etiqueta lang=”-“.

Etiquetas para móviles:

En la última versión de Bootstrap ya no es necesario utilizar etiquetas especiales para adaptar la web a móvil, sino que Bootstrap ha sido creado desde cero para móviles. No obstante si que debes tener en cuenta estas etiquetas:
Para mostrar el zoom en el móvil, añade dentro del head la siguiente etiqueta:

Si quieres deshabilitar el zoom dentro del móvil podrás hacerlo añadiendo user-scalable=no:

Etiqueta Container:

Esta etiqueta sirve para centrar cualquier contenido que esté dentro de dicha etiqueta. Es decir que cualquier elemento que esté dentro, será centrada tomando como referencia la mitad del tamaño del navegador, cambiando de lugar si cambia el tamaño del navegar.

2. Funcionamiento del Sistema de Rejilla o Grid

Pasemos a lo importante del artículo, conocer el comportamiento de la rejilla de Bootstrap o grid, sin duda uno de los aspectos esenciales de Bootstrap y que más nos gusta a los diseñadores. Quédate con la siguiente afirmación ya que es el tic de la cuestión:

El sistema grid está pensado para ayudarnos en la disposición de los contenidos de nuestra web y para su adaptación a los diferentes tamaños de pantalla de forma automática.

De forma automática… Es decir, que con solo programar una vez ya no nos debemos preocupar si se ve o no en tal o cual navegador.

Pero, ¿Cómo lo hace? ¿Como bootstrap se adapta al tamaño de los navegadores de forma automática? Pues gracias a líneas de código que describen qué es lo que quieres utilizar.

 

Filas, Columnas y Tamaños de Pantalla

 

1. Las filas (.row):Se deben colocar dentro de una etiqueta contenedora: .container

2. Las columnas: Están agrupadas dentro de filas (.row).

3. El tamaño de las columnas: Se especifica con clases css que Bootstrap define para cada tamaño de pantalla.
3.1 Ejemplo: .col-md-XX, donde XX es el tamaño de la columna, que podrá tomar valores entre 1 y 12.

4. Cada fila se puede dividir hasta en 12 columnas.

Tamaños del sistema de rejilla o Grid que deberás utilizar:

sistema rejilla filas columnas tamanios pantalla

Ejemplo práctico para una fila y tres columnas:

Para conseguir tres columnas.

sistema de rejilla tres columnas

Línea de código:

 

 

Si deseas ocultar columnas puedes utilizar los siguientes elementos (Dependiendo de los tamaños):
.hidden-xs

.hidden-sm

.hidden-md

.hidden-lg

Y por el contrario, si necesites que se muestren puedes utilizar los elementos .visible-

.visible-xs

.visible-xm

.visible-md

.visible-lg

 

 

Tamaños de pantalla que afectan a las columnas

Existen los siguientes tamaños:

– Extra pequeños dispositivos móviles (<768px)

– Pequeños dispositivos Tablets (≥768px)

– Dispositivos medianas   ordenadores de sobremesa (≥992px)

– Grandes dispositivos de sobremesa (≥1200px)

 

sistema de rejilla tamaños de pantalla

 

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.

Tamaño extra pequeño.Teléfonos (<768px): No se define ninguna media query porque este es el estilo por defecto utilizado por Bootstrap 3.

Tamaño pequeño. Tablets (≥768px):

@media (min-width: @screen-sm-min) { … }

Tamaño medio. Escritorios (≥992px):

@media (min-width: @screen-md-min) { … }

Tamaño grande. Escritorios (≥1200px):

@media (min-width: @screen-lg-min) { … }

Tamaño de la fuente

Hay que conocer que el tamaño por defecto en bootstrap es de 14px (font-size) con un interlineado de 1.428 (Line-height). Al igual que haría en una página creada desde cero en html 5 estos valores se insertan en el body.

Si quieres aumentar la letra se utilizará la clase: .Lead

3. Consejos y Trucos sobre Bootstrap

# Usa Container Fluid para filas de ancho completo (Full Width Rows).

Las filas siempre se definen dentro de un contenedor de tipo .container (anchura fija) o de tipo .container-fluid (anchura variable).
Si quieres crear un diseño que ocupe toda la anchura del navegador, deberías usar un contenedor del tipo container-fluid 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.

 

Con Container 

Sin Container

Con Container-Fluid

Así quedaría:

sistema grid con container, sin container y con container-fluid

# Grids para dispositivos de diferente tamaño.

La rejilla Bootstrap es fantástica y extremadamente poderosa para la construcción de sitios web responsive. Es posible apilar construir cuadriculas de forma diferente dependiendo del tamaño del dispositivo (móvil, tablet, ordenador).

 

Así quedaría:

sistema de rejilla para dispositivos de diferentes tamanios

 

# Usa Inline-block para alinear elementos.

{ display: inline-block; } permite alinear los elementos de una lista.
Para centrar los elementos podemos usar {text-align: center;}
Ejemplo

sistema de rejilla como cetrar un elemento bootstrop

# Usa Clase imagen Responsive

Debes añadir la clase .img-responsive a cada imagen que quieras que se comporte de manera responsive. Esta clase incluye las propiedades max-width: 100%; y height: auto; para que la imagen escale en función del tamaño del elemento en el que se encuentra.

Esperemos que os haya gustado este segundo capítulo de la guía Cómo Diseñar con Bootstrap. Durante lo que queda de 2016 terminaremos con esta guía de Bootstrap para que podáis desarrollar vuestras web de un forma eficiente.

Y sobre todo, si quieres un trabajo profesional de diseño web, deja que lo hagan profesionales. ¡No te arrepentirás!

 

 

 

Comparte el post

Share on Google+Share on FacebookTweet about this on TwitterShare on LinkedInPin on Pinterest

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Síguenos en Facebook
Categorias
Últimas Entradas
Síguenos en Google+
Últimos Tweeets