Menu

¿Que sabemos del framework Bootstrap?

20 Noviembre, 2015 - Arte y creatividad, Diseño & ASP.NET, Sociedad Digital, Tecnología
¿Que sabemos del framework Bootstrap?

¿Que sabemos del framework Bootstrap?

Pues que es un conjunto de herramientas de software libre desarrollado por Twitter, para el diseño de sitios y aplicaciones web. La versión actual es la 3.0.

Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML, CSS y JavaScript, que nos facilita y estandariza el desarrollo de nuestros Sitios Web, adaptándose, a partir de la versión 2.0, a todo tipo de dispositivos.

Como decimos, este framework ha sido desarrollada y es mantenido por la empresa Twitter y la ha liberado como un producto Open Source (código abierto).

Su filosofía de maquetado es tan intiuitiva, que puede ser rápidamente aprendida por desarrolladores que no vienen del mundo del diseño web.

 

Descargar Bootstrap

Puedes descargar el código CSS y JavaScript compilado, que es la forma más sencilla de empezar a utilizarlo, accediendo al repositorio de getbootstrap: http://getbootstrap.com.

Una vez descomprimidos los archivos descargados con la versión compilada, te quedará la siguiente estructura de archivos y directorios:

bootstrap/

 

Estos archivos son la forma más sencilla de utilizar el framework en cualquier proyecto web. Para cada archivo se ofrecen dos variantes: los archivos compilados (bootstrap) y los archivos compilados comprimidos (bootstrap.min).

También se incluyen las fuentes de los iconos del proyecto Glyphicons y el tema opcional de Bootstrap.

Todos los plugins JavaScript de Bootstrap, utilizan la librería jQuery, por lo tanto, deberás incluirla también en tus Sitios Web.

 

Empezar a utilizar Bootstrap

Bootstrap, para facilitar la maquetación del Sitio Web, utiliza un sistema de rejillas (grids), donde podemos crear filas de hasta 12 columnas (de 1 a 12), de manera que cada columna disponga de un ancho relativo y proporcional.

Y ¿para que utiliza este sistema?

Pues para poder colapsar las columnas en caso de ser vista la Web desde un dispositivo de pantalla pequeña.

Para que entiendas a que nos referimos cuando hablamos de colapsar columnas, puedes ver las siguientes imágenes:

 

bootstrap-columnas

 

En esta primera, puedes ver una maquetación típica compuesta de una cabecera con elementos de autenticación, un elemento grande y muy destacado (denominado jumbotron), y un cuerpo compuesto de 3 columnas proporcionales.

¿Qué ocurre cuando este diseño se ve en un dispositivo pequeño como un teléfono móvil?

 

bootstrap-columnas

 

Pues sencillamente que las columnas se colapsan y se muestran una debajo de la anterior. Por otro lado, los elementos de autenticación de la cabecera, se han sustituido por un icono de “ver más” pues aquellos eran demasiado grandes para esta nueva resolución.

Cuando el usuario pulsa sobre ese icono, se mostrarán los elementos de autenticación como columnas colapsadas, una debajo de la otra:

 

bootstrap-columnas

 

Esto es lo que llamamos diseño sensible o “responsive”.

Bueno, pues nada más por ahora. Seguiremos tratando el tema de Bootstrap en otros post. Y no te olvides de seguir nuestra sección “Diseño & ASP.NET” donde utilizamos este framework para el diseño de programas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *