Utilizar un grid es la forma más efectiva de crear el diseño de una página web. Con Bootstrap, podemos usar grids responsivos de forma sencilla y rápida.
Este Framework incluye 4 clases predefinidas en su tercera versión; trabaja para distintos tipos de dispositivos (celulares, tablets, escritorios y escritorios grandes). Gracias a esto puedes controlar como el diseño se renderizará para los diferentes tamaños de pantalla.
| Teléfonos (menor a 768px) | Tablets (mayor o igual a 768px) | Escritorio (mayor o igual a 992px) | Escritorio grande (mayor o igual a 1200px) | |
| Ancho máximo de un contenedor | auto | 728px | 940px | 1170px |
| Prefijo de clase CSS | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Ancho máximo por columna | auto | 60px | 78px | 95px |
Ejemplo 1 – Grid responsivo.
Un grid para mostrar 9 columnas medianas y 18 columnas pequeñas (divididas en 2 filas).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="row"><!--Usamos la clase row como un contenedor de la fila mediana--> <!--Indicamos que se necesitan 6 y 3 columnas medianas (Que formaran las 9), pero dividimos para que las primeras 6 sean sustituidas por 12 pequeñas (Cuando estemos observando el sitio desde una tablet), y que las otras 3 medianas sean sustituidas por 6 pequeñas. --> <div class="col-sm-12 col-md-6">12 Chicas ó 6 medianas</div> <div class="col-sm-6 col-md-3">6 chicas o 3 medianas</div> <!-- Es oportuno recordar que, como Bootstrap limita al uso de 12 columnas independientemente del tamaño del dispositivo, entonces las columnas en una tablet estarán divididas en dos filas con 12 y 6 respectivamente. --> </div> |
Existen 4 clases más que nos apoyan para hacer elementos visibles en tamaños de pantalla especificos.
Cada una de ellas con tres variaciones según el valor de la propiedad display de CSS (inline, block, inline-block):
- .visible-xs-*
- .visible-sm-*
- .visible-md-*
- .visible-lg-*
Ejemplo 2 – Grid usando las clases visible.
Un grid con ciertos elementos que solo son visibles en tablets y en teléfonos.
|
1 2 3 4 5 6 |
<div class="ejemplo2"> <p class="visible-xs-block">Párrafo solo visible para teléfonos</p> <p class="visible-sm-block">Párrafo solo visible para tablets</p> <p class="visible-xs-block visible-sm-block">Párrafo solo visible para teléfonos y tablets</p> <p>Texto del sitio visible en cualquier dispositivo</p> </div> |
Por otro lado, existe la contraparte de esta clase, es decir, que los elementos NO sean visibles.
Para ello, las variantes ya no son necesarias y solo existen las 4 clases:
- .hidden-xs
- .hidden-sm
- .hidden-md
- .hidden-lg
Ejemplo 3- Grid usando las clases hidden.
Un grid con ciertos elementos que no son visibles en tablets y en teléfonos.
|
1 2 3 4 5 6 |
<div class="ejemplo3"> <p class="hidden-xs">Párrafo invisible para teléfonos</p> <p class="hidden-sm">Párrafo invisible para tablets</p> <p class="hidden-xs hidden-sm">Párrafo invisible para teléfonos y tablets</p> <p>Texto del sitio visible en cualquier dispositivo</p> </div> |
Da click aquí para descargar los ejemplos.
