Postgrado en Marketing Online Comunicación y marketing digital

Universitat Autònoma de Barcelona

¿Qué es Bootstrap?

Bootstrap es conjunto conceptos, prácticas y criterios (framework) desarrollado por Mark Otto y Jacoob Thornton dentro de Twitter con la intención de estandarizar el conjunto de herramientas que utilizaban todos los involucrados en el desarrollo del front-end. De esta manera crearon un conjunto de librerías JavaScript y CSS que toda la compañía debía usar evitando que las partes desarrolladas por un equipo no pudiesen ser mantenidas por otros.

Bootstrap nos ayuda a maquetar un sitio web con rapidez y, sobretodo, ayudándonos a que el diseño sea correcto y usable tanto en dispositivos convencionales con en los táctiles (responsive web design). Para hacerlo, nos ofrece una serie de estilos CSS y librerías JavaScript que nos ayudarán de una manera rápi­da a desarrollar nuestro sitio web y sobretodo es recomendable para el desarrollo de prototipos y tener un tiempo de respuesta realmente bueno.

La base de Bootstrap es un diseño de rejilla divido en 12 columnas con un ancho total de 940 píxeles. De esta manera, la maquetación se simplifica haciendo que solamente se deban encajar correctamente nuestras secciones dentro de esta parrilla y Bootstrap se encargará de que la visualización sea correcta en todos los dispositivos. Nos ahorramos, todo el trabajo de revisar con varios navegadores, el desarrollo de CSS específicos para móviles, etc.

Para usar Boostrap solamente hay que incorporar dos elementos a nuestros documentos HTML: la hoja de estilos base y el fichero base de JavaScript. Una vez tenemos estos elementos enlazados solamente debemos acordarnos de utilizar las clases CSS que define Boostrap.

De esta manera, un documento HTML simple quedaría de la siguiente manera:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap: Hello World!</title>

<link href=”css/bootstrap.min.css” rel=”stylesheet”>

</head>

<body>

<h1>Hello, world!</h1>

<script src=”js/bootstrap.min.js”></script>

</body>

</html>

Bootstrap también ofrece gran cantidad de elementos como menús desplegables, ayudas para los formula­rios, etc. dentro de lo que se denomina componentes.

Y no podemos olvidarnos de todos los elementos de JavaScript (llamados plugins) que de manera fácil e intuitiva nos permiten incluir en nuestro sitio efectos como ventanas modales, carruseles de imágenes, etc.

* Más información del Postgrado en Comunicación y Marketing Digital

Alfredo Ruiz

Experto en estrategias de comunicación y contenidos para empresas y personas. Especializado en posicionamiento de marca, Content Marketing y mejora de Currículum. Autor de “Guapos y pobres” y otros libros inclasificables. Apasionado de la divulgación y la comunicación. Más sobre mí en www.madeinalf.com/home