Utilidades responsive
Bootstrap también incluye una serie de clases para ayudarnos a mostrar u ocultar contenidos según el tamaño del dispositivo. A continuación se incluye una tabla resumen de todas estas clases:
En el caso de la clase .visible-*-* tenemos la posibilidad de indicar la forma en la que se mostrará el elemento sobre el que se aplique (los posibles valores se corresponden con los que puede adoptar la propiedad display de CSS). Por lo que tendríamos:
Por lo que para por ejemplo las pantallas extra pequeñas (xs) podríamos utilizar las clases: .visible-xs-block, .visible-xs-inline, y .visible-xs-inline-block. Siendo .visible-xs-block la más común y utilizada, para por ejemplo mostrar una columna solo ante un determinado tamaño de pantalla.
Notas de Uso
Hay que tener en cuenta que las clases visible-*-* solo se mostrarán para el tipo de dispositivo indicado, es decir, si por ejemplo indicamos que un campo solo es visible con la etiqueta visible-md-block dicho campo no aparecerá para resoluciones inferiores ni tampoco para pantallas tipo large.
Por el contrario, las etiquetas tipo .hidden- solo se ocultarán el elemento para el tamaño indicado, quedando visible para el resto de tamaños.
Estas etiquetas son de mucha utilidad para mejorar una web responsive pues nos van a permitir crear un mejor diseño o maquetación. Normalmente nos interesará ocultar determinados contenidos cuando la pantalla sea muy pequeña o mostrar contenidos adicionales para pantallas grandes.
Por ejemplo, imaginaos que en nuestra web tenemos una serie de artículos y que en cada uno de ellos incluimos un título, un subtítulo, una imagen y un texto. Si por ejemplo quisieramos ocultar el subtítulo y la imagen para pantallas extra pequeñas (xs) símplemente tendríamos que añadir la clase ".hidden-xs" a estas etiquetas. A continuación se incluye el código de ejemplo:
Última actualización