Artículos
Bootstrap

Tablas responsive con Bootstrap

16/Ago/2015

Una de las capacidades que tiene el framework Bootsrap es la gestión de los diseños responsive. Es decir, la capacidad de poder adaptar nuestra página web a cualquier dispositivo. En este artículo vamos a ver como podemos crear tablas responsive con Bootsrap.

Lo primero que haremos será crear nuestra tabla.


...
País Capital Superficie Habitantes Descripción
España Madrid 504.645 km2 46,6 M

Para poder crear la tabla deberemos de tener conocimiento del lenguaje HTML y deberemos de manejar los elementos table, tr y td.

De igual manera deberemos de saber que las tablas en Bootsrap se manejan con la clase table. Dicha clase la asignaremos al atributo class.

Ahora pasaremos a manejar el soporte para el responsive. Para tener tablas responsive con Bootstrap debemos de recubrir la tabla con una capa div. A dicha capa le asignaremos la clase table-responsive.

...
País Capital Superficie Habitantes Descripción
España Madrid 504.645 km2 46,6 M

Las tablas responsive con Bootsrap ejecutan su cambio de comportamiento con dispositivos móviles. Es decir, con dispositivos cuyo área de visualización sea menor a 768px.

Cuando veamos tablas responsive con Bootsrap desde nuestros dispositivos móviles veremos que, al no poder mostrar todo el contenido de la tabla, lo que hará Bootsrap es generar una tabla que ocupe todo el ancho y una barra de scroll horizontal que nos irá mostrando el contenido de toda la tabla. Para el resto de dispositivos la visualización será la misma.

Código Fuente

Descárgate el código fuente de Tablas responsive con Bootstrap
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Bootstrap

Disfruta también de nuestros artículos sobre Bootstrap en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Bootstrap

¿Te atreves a probar tus habilidades y conocimiento en Bootstrap con nuestro test?

Test Bootstrap
Suscribir
Notificar de
guest
2 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios