El framework Boostrap y los dos usos más interesantes en diseño web

David López | 642 palabras | 4-5 min

Para comenzar me gustaría explicar qué es un framework, palabra que habrás escuchado mucho en el mundo del desarrollo de software o web. Un framework en diseño web es un conjunto de código que añadimos a nuestro sitio en apoyo a las actividades comunes que deben realizarse para cualquier proyecto, haciéndolo todo más dinámico, rápido de implementar y eficaz.

Nos evitan tener que programar nosotros mismos mucho código y podernos centrar en tarea más importantes. Boostrap y JQuery son dos frameworks que nos ayudan sobremanera a agilizar el desarrollo de nuestros sitios web. Además de ser necesarios a día de hoy para poder trabajar en el sector del diseño web.

El principal uso de Bootstrap

Boostrap tiene decenas de usos, pero me gustaría centrarme en los dos que estimo son los más impotantes que necesitas conocer para dedicarte al desarrollo web. El principal es el uso de Boostrap como un GRID (rejilla) y que viene perfecto para convertir nuestra web en un sitio responsive.

Aclaración: Responsive dice ser a una web adaptable a cualquier resolución de pantalla.

Boostrap como GRID para hacer tu sitio web Responsive

Al implementar Boostrap en tu sitio web y usando adecuadamente sus instrucciones, podrás convertir tu web en Responsive. Esto significa que tu web se adaptará a cualquier pantalla independientemente del dispositivo en que se mire: Ordenador, consolas, tablets y teléfonos móviles.

Esto es así debido a que Boostrap contiene todo el código CSS3 necesario para que añadiendo algunos estilos a tu contenido, hace que según el tamaño de pantalla, este contenido se adapte automáticamente.

¿Pero como funciona este GRID?

Más abajo te facilito un enlace con un vídeo donde se explica perfectamente su implementación y uso, pero me gustaría adelantarte una breve explicación. El grid convierte cada zona de una página en una rejilla de filas de 12 columnas o bloques. Cuando digo zona me refiero a por ejemplo esta estructura: banner, contenido + columna derecha, fila de 4 noticias, footer, etc.

Imagínate que muestras un 75% de contenido a la izquierda y un 25% de publicidad a la derecha, pues con el grid de Boostrap "deberías" hacer dos capas o divs, y el contenido debería tener por ejemplo 9 columnas o bloques y para la publicidad otorgarle solo 3. Un total de 12 porque siempre cada fila debe tener 12 columnas.

Otro ejemplo: imagina que tienes 4 noticias pues entonces deberías otorgarle a cada noticia un total de 3 columnas. Es decir 4x3 hace un total de 12. Otro ejemplo sería dos divs de 6 columnas. Incluso filas de 12 bloques, cosa muy común en resolución de pantallas pequeñas (Móviles).

Dicho estilo que te he comentado es para las pantallas de PC o escritorio. Pero en esa misma capa o div puedes añadir otro estilo css que te proporciona Bootstrap que le indicará la proporción de columnas o bloques para tablets, y otro estilo para móviles. Esto es sensacional para darle a nuestra web indicaciones de como debe de mostrarse según el dispositivo o resolución. Boostrap se encargará de adaptar tu web de forma sencilla y automática.

• Vídeo de youtube donde se explica como hacer el primer uso de Bootstrap que he comentado.

Barra de navegación responsive con el framework Boostrap

El segundo uso del que me gustaría hablar es el de convertir tu menú de opciones principal o barra de navegación en responsive. Y es que con Boostrap resulta sencillo tener un menú típico que se contrae cuando el tamaño de la pantalla es demasiado pequeño como para mostrar todas las opciones en una misma línea. Hablo del típico botón situado en la esquina superior derecha que parece un cuadrado junto con 3 líneas en el centro y que al pulsar se despliegan toda la barra de opciones en vertical y al volver a pulsar se vuelven a contraer escondiéndose.

• Enlace al vídeo de youtube donde te explica como hacer tu barra de opciones resonsive.

Comentarios del post

Pinayu no tiene qué leer...
¿Le animamos con un mensaje?
¡Aporta con tu valiosa opinión!

* Nombre

* Comentario

* Introduce el código Anti Spam aquí: