Tupale

Como mostrar y ocultar contenidos para responsive design con bootstrap.

Hola amigos, esto no es un tutorial, es mas bien un tip, una siemple herramienta que pueden usar para hacer sus sitios y aplicaciones con responsive design sin mayores problemas, sin embargo esto es para usuarios de Bootstrap el framework de HTML5 y CSS3 de twitter que nos brinda una infinidad de posibilidades para trabajar, si  no conoces Bootstrap deberías comenzar por este articulo.

Ahora si ya tienes montado tu sitio con Bootstrap lo que debes saber es como usar el Scaffolding y tus sitios siempre serán responsivos, aunque también tendrás que aplicar un poco de lógica al asunto, para comenzar explicare un poco que es el Scaffolding o andamiaje y luego les mostrare un caso practico.

 Scaffoldin o Andamiaje en Bootstrap

El Scaffolding es una herramienta que nos permite, siguiendo un un patrón de diseño desarrollo lograr un objetivo concreto de manera mas rápida y eficiente, el termino es popular entre diferentes frameworks y ORMs, para el caso de Bootstrap el Scaffolding nos permitira mantener nuestros sitios responsivos y organizados usando una serie de clases CSS que el paquete de Bootstrap incluye por defecto. De manera que cuando queramos crear div o columnas buscaremos siempre recurrir a los estilos dinámicos que están disponibles en Bootstrap en lugar de crear unos propios y asi mantener la grilla de diseño intacta para que sea redimencionada al cambiar el tamaño del navegador.

Comenzando

Lo primero y mas importante es que para que el Scaffolding funcione normalmente debemos definir el documento de trabajo como un archivo HTML5 de la siguiente manera.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Por otra parte debemos cargar obviamente los archivos de la librería bootstrap como son los archivos CSS, Javascript, etc…

El div en el que deberemos desarrollar el contenido de nuestra pagina lleva por nombre “container”, de manera que todo lo que queramos tener en la columna central de contenido deberemos incluirlo dentro de este div, sin embargo en diferentes casos querremos que algunas cosas no estén encapsuladas en container sino que vallan de lado a lado de la pagina, hay que aclarar que la clase “container” no tiene un ancho delimitado sino que es variable según la resolución y el tamaño del navegador (de esto se trata responsive design).

<div class="container">
  <!-- Contenido -->
</div>

Ya que tenemos nuestro div container debemos tener en cuenta las posibles divisiones que queremos hacer ya que Bootstrap nos brinda una grilla de 12 columnas que podemos manipular para trabajar nuestro diseño sin alterar los comportamientos de Responsive Design.

Grid Bootstrap

Grid Bootstrap

Y usando la clase css “row” de bootstrap podemos hacer las divisiones de diseño que necesitemos, pero debemos tener presente que los anchos de estas divisiones no son fijos sino que van a cambiar según el ancho del navegador, por lo cual el contenido debe ser organizado considerando esta variabilidad.

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

En conclusión la suma de los span siempre debería ser 12 y el numero de cada span representa el numero de columna que ocupara.

Mostrando y Ocultando contenido según el dispositivo.

Luego de tener nuestro sitio bien estructurado con el Scaffolding de Bootstrap podremos hacer las pruebas simplemente redimencionando la ventana de nuestro navegador para ver como cambia, pero probablemente algunas cosas se saldrán de sitio o simplemente no se veras muy bien en navegadores mas pequeños, por lo cual usaremos unas utilidades css que nos ofrece Bootstrap para mejorar nuestro responsive design, se trata de las clases para mostrar u ocultar contenidos según la pantalla hacia la que estamos apuntando nuestro diseño, así en un desktop mostraremos algunas cosas, en una tablet otras y en un smartphone otras, para poder mantener en los tres dispositivos un buen diseño.

Para mostrar y ocultar div solo debemos agregar las clases que determinaran a que device pertenece o de que device queremos ocultarlo basándonos en esta simple tabla.

Mostrar y Ocultar Bootstrap

Mostrar y Ocultar Bootstrap

De esta manera si queremos que un div se vea solamente en desktop y se oculte en tables y smartphones el código seria el siguiente:

<div class="visible-desktop">
</div>

O si lo que queremos es ocultar algo de un dispositivo en especial como por ejemplo algo que no se muestra en smartphones seria:

<div class="hidden-phone">
</div>

Bueno eso es todo por ahora, espero que le saquen provecho y empiecen a diseñar sus sitios responsive design usando las herramientas de Bootstrap, un ejemplo de lo aquí enseñado lo pueden ver en este sitio. Droni.co

4 comments for “Como mostrar y ocultar contenidos para responsive design con bootstrap.

  1. teresa
    29 enero, 2016 at 7:55 AM

    Me ha servido de mucha ayuda, gracias 🙂

  2. Juan
    2 marzo, 2016 at 8:29 AM

    ¡Muchas gracias!

  3. 18 julio, 2016 at 12:21 PM

    Gracias por la info, me sirvio 🙂

  4. 1 agosto, 2017 at 12:12 PM

    Excelente, gracias!

Deja un comentario

A %d blogueros les gusta esto: