Framework de diseño Bootstrap

Bootstrap es un framework de diseño web. Contiene hojas de estilo CSS prediseñadas con los diseños adaptados a los nuevos dispositivos y standares del w3c. Es infinitamente adaptable sin embargo su diseño por defecto permite comenzar proyectos web sin tener que preocuparte por el "responsive design"

Puede descargarse de la página oficial, además de funcionar con plataformas como Composer, Girhub, etc. Es software con licencia libre y puedes incluirlo en tus proyectos de forma stándar.


Logotipo oficial de Bootstrap
Logotipo oficial de Bootstrap

Estructura y responsive design


Ya hemos visto en otras entradas que un sitio web requiere una estructura general en vertical. Los datos incluidos dentro del sitio web deben estar correctamente jerarquizados. Muchas veces es engorroso adaptar todo este diseño, de una manera formal, a todos los dispositivos que pueden conectarse a internet. Bootstrap ofrece estas ventajas principalmente.

Cargar el framework de Bootstrap en tu proyecto web te hará avanzar muy rápidamente en cuanto a diseñar la estructura de la web ya que no tendrás que preocuparte por el "responsive design". Bootstrap adapta toda la jerarquía de etiquetas para todos los dispositivos (o casi).


Primera página de un proyecto con Bootstrap
Primera página de un proyecto con Bootstrap



Componentes de Bootstrap


Librerías JavaScript:

Una de las principales utilidades de Bootstrap es su interacción con librerías de JavaScript como jQuery. Esta librería nos permite insertar componentes de diseño dinámico en nuestro sitio web. Entre otros componentes, el framework trae por defecto un carrusel, pestañas, botones, formularios mejorados y un largo etc.

Librerías de iconos:

Otra de las funciones que todavía estoy probando y que no he llegado a utilizar todavía en un proyecto, son los iconos y las librerías. La verdad que estas librerías de iconos aportarán a tu proyecto una gran calidad. El diseño de estos iconos "libres" está pensado para el diseño de interface avanzado aunque también su sencillez permite integrarlos sin problema en un proyecto de landing page.

Ejemplos y códigos para aprender

Bootsnipp.com. Ejemplos con código incluido de páginas con bootstrap.



Página oficial de Bootstrap:
http://getbootstrap.com/


No hay comentarios:

Publicar un comentario