Grilla

Sintaxis de estructura

La grilla de Bootstrap es un sistema fluido que escala 12 columnas como el estándar de subdivisión porcentual (@grilla-columnas) para cada dispositivo de lectura o ancho de pantalla específico (@screen-phone), (@screen-tablet), (@screen-desktop), (@screen-lg-desktop) con una separación interna (padding) de 30px (@grid-gutter-width) para indentar el contenido expuesto. Su estructura incluye clases predefinidas para una serie de layouts determinados, así como mixins poderosos para generar diseños más semánticos. También introduce la posibilidad de ordenar, anidar y ocultar columnas según sea necesario. El Gutter quiere decir que existe una separación interna entre los bloques del contenido; es decir, todos los contenidos dentro de las columnas están indentados con 15px hacia adentro. Esto va definiendo la alineación horizontal de la página. La manera de eliminar dicha indentación es insertar las columnas dentro de una fila. Hay que tener en cuenta de que esto nos puede generar problemas, si existe otro elemento que contenga a la fila, ya que se formará automáticamente un scroll horizontal, puesto que las columnas adoptarán márgenes negativos y se saldrán de su contenedor natural.

Contenedor o container

El contenedor o '.container' cumple la función de anidar todo el contenido expuesto en el sitio, estableciendo el ancho total de éste. De modo que la clase '.pag', '.formato', o '.container' es necesaria en todas las páginas integrales del sitio, con el fin de ir anidando filas para el contenido vertical, y en su interior columnas de contenido horizontal.

HTML
<div class='pag'> // contenido de la página </div>
LESS
// Establece el ancho del contenido .pag, .formato, .container { .container-fixed(); } // Tamaños de contenedores // Small screen / tablet @container-tablet: ((750px + @grid-gutter-width)); @container-sm: @container-tablet; // Medium screen / desktop @container-desktop: ((920px + @grid-gutter-width)); @container-md: @container-desktop; // Large screen / wide desktop @container-large-desktop: ((1140px + @grid-gutter-width)); @container-lg: @container-large-desktop;
Fila de columnas

Una fila cumple la función de contenedor de columnas. Su necesidad imperativa es evidente al tener que separar verticalmente un contenido de otro, el cual en una cierta cantidad de columnas de modo que éstas no se acoplen siempre una al lado de la otra, como declara su propiedad por defecto 'float: left'. Por tanto, será útil declarar una fila cuando sea necesario dar un salto de contenido.

HTML
<div class='fila'> // columnas de contenido </div>
LESS
// función por defecto .row, .fila { .make-row(); } // forma un contenedor para una cierta cantidad de columnas .make-row(@gutter: @grid-gutter-width) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); .clearfix(); }
12 columnas porcentuales

El siguiente ejemplo grafica las doce columnas porcentuales en los anchos de pantalla mediano (@screen-desktop) y grande (@screen-lg-desktop). Seis columnas en anchos de pantalla pequeños (@screen-tablet) y 3 columnas en el ancho de pantalla extra-pequeño (@screen-phone). Puedes observar la dinámica de la grilla al reducir la pantalla del navegador para forzar la distribución de las columnas.

01

col-md-1col-sm-1col-xs-4

02

col-md-1col-sm-1col-xs-4

03

col-md-1col-sm-1col-xs-4

04

col-md-1col-sm-1col-xs-4

05

col-md-1col-sm-1col-xs-4

06

col-md-1col-sm-1col-xs-4

07

col-md-1oculto-smoculto-xs

08

col-md-1oculto-smoculto-xs

09

col-md-1oculto-smoculto-xs

10

col-md-1oculto-smoculto-xs

11

col-md-1oculto-smoculto-xs

12

col-md-1oculto-smoculto-xs
HTML
// Ejemplo expuesto <div class='fila'> <div class='col-md-12'> <div class='col-lg-1 col-md-1 col-sm-2 col-xs-4 ver'><p>01</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>col-sm-1</code><code class='vertical sin-relleno'>col-xs-4</code></div> <div class='col-lg-1 col-md-1 col-sm-2 col-xs-4 ver'><p>02</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>col-sm-1</code><code class='vertical sin-relleno'>col-xs-4</code></div> <div class='col-lg-1 col-md-1 col-sm-2 col-xs-4 ver'><p>03</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>col-sm-1</code><code class='vertical sin-relleno'>col-xs-4</code></div> <div class='col-lg-1 col-md-1 col-sm-2 oculto-xs ver'><p>04</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>col-sm-1</code><code class='vertical sin-relleno'>col-xs-4</code></div> <div class='col-lg-1 col-md-1 col-sm-2 oculto-xs ver'><p>05</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>col-sm-1</code><code class='vertical sin-relleno'>col-xs-4</code></div> <div class='col-lg-1 col-md-1 col-sm-2 oculto-xs ver'><p>06</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>col-sm-1</code><code class='vertical sin-relleno'>col-xs-4</code></div> <div class='col-lg-1 col-md-1 oculto-sm oculto-xs ver'><p>07</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>oculto-sm</code><code class='vertical sin-relleno'>oculto-xs</code></div> <div class='col-lg-1 col-md-1 oculto-sm oculto-xs ver'><p>08</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>oculto-sm</code><code class='vertical sin-relleno'>oculto-xs</code></div> <div class='col-lg-1 col-md-1 oculto-sm oculto-xs ver'><p>09</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>oculto-sm</code><code class='vertical sin-relleno'>oculto-xs</code></div> <div class='col-lg-1 col-md-1 oculto-sm oculto-xs ver'><p>10</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>oculto-sm</code><code class='vertical sin-relleno'>oculto-xs</code></div> <div class='col-lg-1 col-md-1 oculto-sm oculto-xs ver'><p>11</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>oculto-sm</code><code class='vertical sin-relleno'>oculto-xs</code></div> <div class='col-lg-1 col-md-1 oculto-sm oculto-xs ver'><p>12</p><code class='vertical sin-relleno'>col-md-1</code><code class='vertical sin-relleno'>oculto-sm</code><code class='vertical sin-relleno'>oculto-xs</code></div> </div> </div>
LESS
// Número de columnas @grilla-columnas: 12; // Relleno por defecto en cada columna declarada @grid-gutter-width: 30px; // Tamaños de pantalla // Extra-pequeños / móviles @screen-xs: 480px; @screen-xs-min: @screen-xs; @screen-phone: @screen-xs-min; // Pequeño / tableta @screen-sm: 768px; @screen-sm-min: @screen-sm; @screen-tablet: @screen-sm-min; // Mediano / desktop @screen-md: 992px; @screen-md-min: @screen-md; @screen-desktop: @screen-md-min; // Grande / wide desktop @screen-lg: 1445px; @screen-lg-min: @screen-lg; @screen-lg-desktop: @screen-lg-min;

Ordenar columnas

Ordenar columnas es necesario para adptar el contenido expuesto a diferentes dispositivos y anchos de pantalla. El diseño es previo a la diagramación que la grilla como herramienta sistematiza de manera funcional. Para obtener un ancho de columna específico debes guiarte con la siguiente nomenclatura: 'col-(formato de tamaño)-(nº de columnas)' dentro del <div> que la declara como clase.

En el siguiente ejemplo se puede apreciar una gran versatilidad de tamaños de columna para exponer el contenido. Al reducir el ancho de pantalla del navegador se observa, luego de un breakpoint declarado, el orden automático de las columnas señaladas para cada dispositivo. puedes observar el comportamiento de las columnas y compararlo con el código html.

01
02
02
03
04
05
06
07
08
09
10
HTML
<div class='fila'> <div class='col-lg-12 cf'> <div class='col-md-4 col-sm-4 col-xs-4 ver'><p>01</p></div> <div class='col-md-4 col-sm-4 col-xs-4 ver'><p>02</p></div> <div class='col-md-4 col-sm-4 col-xs-4 ver'><p>02</p></div> <div class='col-md-6 col-sm-6 col-xs-6 ver'><p>03</p></div> <div class='col-md-6 col-sm-6 col-xs-6 ver'><p>04</p></div> <div class='col-md-2 col-sm-2 col-xs-6 ver'><p>05</p></div> <div class='col-md-2 col-sm-2 col-xs-6 ver'><p>06</p></div> <div class='col-md-2 col-sm-2 col-xs-6 ver'><p>07</p></div> <div class='col-md-2 col-sm-2 col-xs-6 ver'><p>08</p></div> <div class='col-md-2 col-sm-2 col-xs-12 ver'><p>09</p></div> <div class='col-md-2 col-sm-2 col-xs-12 ver'><p>10</p></div> </div> </div>
LESS
// Propiedad para observar funcionamiento de la Grilla .ver{ .box-shadow(0 0 2px fade(@negro, 20)); background-color: @gris-claro; color: rgba(0, 0, 0, 0.8); padding: @cuadratin / 2; }

Ocultar columnas

Ocultar columnas es de utilidad cuando se requiere hacer desaparecer un contenido en un ancho de pantalla específico. Para ocultar columnas debes escribir la siguiente nomenclatura: 'oculto-(formato de tamaño)' dentro del <div> que que la declara como clase. Por el contrario, puedes agregar la clase 'visible-(formato de tamaño)' para que se muestre un contenido en particular, dejando a los demás ocultos.

En el siguiente ejemplo se muestra cómo una columna está oculta en el ancho de pantalla mediano, visible en el ancho pequeño y oculto en el tamaño extra-pequeño. Puedes reducir la pantalla del navegador para observar dicha dinámica.

01
02
03
04
HTML
<div class='fila'> <div class='col-lg-12'> <div class='col-md-3 col-sm-3 col-xs-12 ver'><p>01</p></div> <div class='col-md-3 col-sm-3 col-xs-12 ver'><p>02</p></div> <div class='col-md-3 col-sm-3 col-xs-12 ver'><p>03</p></div> <div class='oculto-lg oculto-md col-sm-3 oculto-xs ver'><p>04</p></div> </div> </div>
LESS
// Propiedad para observar funcionamiento de la Grilla .ver{ .box-shadow(0 0 2px fade(@negro, 20)); background-color: @gris-claro; color: rgba(0, 0, 0, 0.8); padding: @cuadratin / 2; }

Ordenar bloques (flex)

El flex o flexbox es una propiedad de CSS que ha estado haciéndose popular porque resuelve un problema muy recurrente en relación al diseño. Se trata de cómo uno puede ordenar, alinear o centrar bloques y su contenido de manera automática sin necesidad de aplicar doble propiedad CSS para llegar al mismo objetivo. Por ejemplo, si queremos centrar un elemento horizontalmente, se puede dar una posición absoluta dentro de un contenedor relativo, dándole un valor left de 50% y un margin-left negativo a la mitad del ancho del elemento. Qué ocurre con elementos con ancho variable? Bueno, no se podría resolver de manera elegante.

Caso 1: Elemento hijo centrado
.container-flex
.flex-centrar

En este caso, el elemento padre utiliza la clase .container-flex y su hijo .flex-centrar tiene valor margen auto. Esto hace que el contenedor adopte márgenes automáticos quedando centrado perfectamente.

HTML
<div class="container-flex"> .container-flex <div class="flex-centrar"> .flex-centrar </div> </div>
LESS
// Contenedor flex .container-flex { display: -webkit-flex; display: flex; } // Centrados .flex-centrar { margin: auto; } .flex-centrar-vertical { margin: auto 0; } .flex-centrar-horizontal { margin: 0 auto; }

Caso 2: Ancho relativo según elemento padre
ancho 200px
.flex-1
.flex-2

La combinación también se puede aplicar, aún cuando exista algun elemento con un ancho específico, otro elemento tome el ancho que queda. En fin, es una propiedad muy amplia dando muchos casos de uso aplicables.

HTML
<div class="container-flex"> <div style="width: 200px"> ancho 200px </div> <div class="flex-1"> .flex-1 </div> <div class="flex-2"> .flex-2 </div> </div>
LESS
// Partes (Fracción) flex // Este bloque ocupará 1 de n partes .flex-1 { -webkit-flex: 1; flex: 1; } // Este bloque ocupará 2 de n partes .flex-2 { -webkit-flex: 2; flex: 2; } // Este bloque ocupará 3 de n partes .flex-3 { -webkit-flex: 3; flex: 3; }

Caso 3: Elementos padres e hijos alineados
Éste .container-flex adopta alto del otro contenedor
.flex-centrar + height: 200px. Este elemento (hijo) se centra en relación al elemento hijo del contenedor padre de al lado.
height: 450px

Si se desea tener dos elementos (padres) de la misma altura y que sus contenidos (hijos) estén alineados o relacionados, se puede crear un contenedor de estos dos elementos (padres).

HTML
<div class="flexbox"> <div class="container-flex flex-1"> Éste .container-flex adopta alto del otro contenedor <div class="flex-centrar" style="height: 200px">flex-centrar + height: 200px. Este elemento (hijo) se centra en relación al elemento hijo del contenedor padre de al lado.</div> </div> <div class="container-flex flex-1"> <div style="height: 450px">height: 450px</div> </div> </div>
LESS
// Caja flex: Nos permite insertarla afuera de dos contenedores e igualar su altura. // Luego, dentro de ellos uno puede volver a aplicar otro contenedor flex y añadir un // Margen automático para alineación vertical entre dos contenedores .flexbox { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; }

Anidar columnas

Anidar una columna dentro de otra puede ser útil al momento de requerir un gran control de los anchos de cada columna de contenido.

col-md-10 (columna exterior)
col-md-8 (columna interior 1)
col-md-4 (columna interior 2)
HTML
<div class='fila'> <div class='col-md-10 ver'> col-md-10 (columna exterior) <div class='fila'> <div class='col-md-8 ver'> col-md-8 (columna interior 1) </div> <div class='col-md-4 ver'> col-md-4 (columna interior 2) </div> </div> </div> </div>
LESS
// Propiedad para observar funcionamiento de la Grilla .ver{ .box-shadow(0 0 2px fade(@negro, 20)); background-color: @gris-claro; color: rgba(0, 0, 0, 0.8); padding: @cuadratin / 2; }

Offset

Esta función es útil para separar un contenido de otro con el fin de establecer jerarquía en cierto nivel, o para generar agrupaciones o distancia en los elementos de la página.

col-md-4
col-md-4 col-md-offset-2
col-md-2
col-md-3 col-md-offset-2
col-md-3 col-md-offset-2
HTML
<div class='fila'> <div class='col-lg-12'> <div class='col-md-3 col-sm-3 col-xs-12 ver'><p>01</p></div> <div class='col-md-3 col-sm-3 col-xs-12 ver'><p>02</p></div> <div class='col-md-3 col-sm-3 col-xs-12 ver'><p>03</p></div> <div class='oculto-lg oculto-md col-sm-3 oculto-xs ver'><p>04</p></div> </div> </div>
Ejemplo extra
// Generate the column offsets .make-sm-column-offset(@columns) { @media (min-width: @screen-sm-min) { margin-left: percentage((@columns / @grilla-columnas)); } } .make-md-column-offset(@columns) { @media (min-width: @screen-md-min) { margin-left: percentage((@columns / @grilla-columnas)); } } .make-lg-column-offset(@columns) { @media (min-width: @screen-lg-min) { margin-left: percentage((@columns / @grilla-columnas)); } }