¿Que es Bootstrap? Y sus ventajas en el diseño de páginas web

Bootstrap es un framework para el desarrollo web, de código abierto, desarrollado por Twitter y utilizado para diseñar páginas web con HTML, CSS y Javascript. Bootstrap esta enfocado al diseño web adaptable o responsive design, es decir que al utilizar Bootstrap para diseñar nuestro sitio web podremos visualizarlo correctamente en cualquier dispositivo, móvil o escritorio.

Ventajas

• Bootstrap facilita el proceso de maquetado de un sitio web gracias a su sistema de columnas
• Se adapta a cualquier dispositivo automáticamente
• Es compatible con las principales librerías de Javascript
• Su curva de aprendizaje es baja si ya conoces HTML y CSS
• Es ampliamente utilizado, por lo que existe un gran número de plantillas gratuitas en Internet listas para descargar y modificar, además de tutoriales y documentación en varios idiomas, entre ellos, español
• Esta en constante desarrollo, por lo que siguen apareciendo nuevas versiones adaptandose a las nuevas necesidades de los usuarios
• Incluye numerosos elementos listos para usar desarrollados con HTML5, CSS y Javascript, además de plugins en jQuery
• Existe una versión precompilada en Sass, que puedes modificar por tu cuenta

En resumen, el objetivo de Bootstrap es facilitar el diseño y desarrollo front-end de sitios web, y te ofrece las herramientas necesarias para lograrlo.

Como implementar Bootstrap en tu sitio web

Para poder usar Bootstrap en tu proyecto cuentas con dos opciones: Agregando el código CDN a tu cabecera HTML o descargando Bootstrap y enlazandolo a tu proyecto desde la cabecera de tu documento HTML.

Implementar Bootstrap desde CDN

En el sitio web BootstrapCDN puedes encontrar los enlaces necesarios para agregar Bootstrap en tu proyecto, alojados por Stackpath, que son los siguientes:

Bootstrap CSS:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Bootstrap Javascript, Popper.js y jQuery:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Implementado en nuestro proyecto, quedaría de la siguiente manera:

https://gist.github.com/Nxz02/1d51c5da6accdadb5d5c30176646a89e

Sin embargo, trabajar con Bootstrap de esta forma tiene algunos inconvenientes:

• El tiempo de carga de tu sitio web se verá afectado ligeramente
• Dependerás de la disponibilidad de los host de los archivos para que tu sitio web sea desplegado correctamente

Implementar Bootstrap localmente

Para agregar Bootstrap localmente a tu sitio web deberás descargar la más reciente versión del framework desde el sitio web oficial y descomprimir el archivo zip en algún directorio de tu equipo o servidor.

Suponiendo que hayamos descargado el archivo bootstrap-4.1.1-dist.zip (que no incluye los plugins opcionales de jQuery) y lo hayamos descomprimido en el directorio de nuestro proyecto, quedaría de la siguiente manera:

https://gist.github.com/Nxz02/5c484bb2292d34f3b77522a124d83b0c

Y el resultado sería el siguiente:

Cuando usar Bootstrap

Bootstrap es especialmente util cuando quieras implmentar en tu sitio web cualquiera de los siguientes elementos:

• Encabezados y pies de página
• Barras de navegacion adaptables
• Banners (llamados Jumbotrons en Bootstrap)
• Galerias y diapositivas

Conclusión

Bootstrap es uno de los frameworks más utilizados y completos actualmente, facilitando la maquetación de sitios web gracias a sus hojas de estilo y scripts preescritos y en constante evolución.

En esta entrada sólo se han explorado brevemente las capacidades de Bootstrap, por lo que te recomiendo leer la documentación y empezar a implementarlo en tus proyectos para sacarle todo el provecho.

En getbootstrap.com encontrarás tutoriales en inglés sobre la más reciente versión de Bootstrap, mientras que en el blog oficial podrás leer todas las novedades acerca de este framework.