Bootstrap, cómo instalar

¿Qué es Bootstrap?

En este artículo te explicaremos lo más básico sobre Bootstrap cómo instalarlo, qué es, cuales son sus ventajas…

Bootstrap es un framework para la creación de páginas web. Se trata de unas herramientas predefinidas de código abierto para facilitar el diseño web. Se basa en estilos de CSS ya predefinidos a los que se les llama con determinadas clases desde el HTML. También incluye alguna funcionalidad cubierta por JavaScript, bajo el framework jQuery.

Actualmente se encuentra en su versión 4.5.3 que puedes encontrar en la página getbootstrap.com.

¿Por qué usar Bootstrap?

Al fin y al cabo es solo CSS con algo de JavaScript. Desde luego podemos hacer una programación a medida, como siempre. Pero la gran ventaja de Bootstrap es que, tan solo asignando ciertas clases, tendremos un control rápido y sencillo sobre las diferentes resoluciones de pantalla. Es decir, nos facilita mucho la creación de un sitio web responsive.

No solo eso, Bootstrap 4 sigue la filosofía Mobile First, lo que a ojos del SEO es lo ideal.

Bootstrap hace uso de unas clases ya definidas en diferentes media queries. Por ejemplo, al asignar a un botón la clase «d-none d-md-block», estoy haciendo que ese elemento se oculte en móvil, mientras que en dispositivos medianos y grandes se muestre como un bloque. ¡Todo sin salir del HTML!

Otra gran ventaja es su sistema de columnas, que hace muy fácil maquetar y ordenar los elementos en la página. Funciona bajo una plantilla de doce columnas, de manera que le podemos indicar cuánta anchura (en columnas) tendrá un elemento.

Por ejemplo:

<div class="col-4">Lorem1</div>
<div class="col-4">Lorem2</div>
<div class="col-4">Lorem3</div>

Con esto habremos creado tres divs de la misma anchura, que, todos ellos, ocuparán todo el ancho permitido (4+4+4=12).

Esto, sumado a lo que veíamos del diseño responsive, nos da un control exhaustivo sobre cómo se ve la web:

<div class="col-12 col-sm-6 col-md-4">Lorem1</div>
<div class="col-12 col-sm-6 col-md-4">Lorem2</div>
<div class="col-12 col-md-4">Lorem3</div>

Aquí estamos creando, también, 3 divs, que en móvil ocuparán todo el ancho de la pantalla; en pantallas un poco más grandes, los dos primeros, se repartirán toda la anchura, mientras que el 3º ocupará, todavía, todo el ancho; de pantallas medianas para arriba, se comportarán como tres columnas iguales, ocupando el 33% del espacio disponible.

Cómo instalar Bootrstrap

Método 1: CDN

La forma más sencilla e inmediata de usar Bootstrap es a través de CDN (Content Delivery Network). Se trata de una red de distribución de contenidos, es decir, los archivos están alojados en un servidor ajeno.

Para empezar a usar Bootstrap debemos insertar una llamada como esta en el head de nuestro HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

Muchas funcionalidades de Bootstrap funcionan bajo jQuery, por lo que deberíamos, también, añadir el archivo js después de cargar jQuery, antes del cierre del body. Algo así:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

Método 2: Descargar archivos en tu servidor

Otra forma es descargar los archivos que componen Bootstrap desde su web y subirlas en tu servidor. De esa manera tienes un control más local sobre estos elementos, sin hacer llamadas externas.

En el código tienes que hacer las mismas llamadas que a través de CDN, pero esta vez usando las rutas de tu propia web:

<link rel="stylesheet" href="https://mipaginaweb.es/css/bootstrap.min.css">

Y:

<script src="https://mipaginaweb.es/js/jquery-3.5.1.slim.min.js"></script>
<script src="https://mipaginaweb.es/js/bootstrap.bundle.min.js"></script>

Puedes descargar los archivos de Bootstrap desde su página web pinchando aquí.

Método 3: Compilar tu propio Bootstrap

Bootstrap funciona de forma modular, y permite que, si eres un desarrollador avanzado, puedas seleccionar únicamente los componentes que vayas a usar en tu proyecto y configures un Bootstrap a medida. De esta manera tendrás una edición personalizada de Bootstrap, ocupando un mínimo de espacio y optimizando los recursos.

Conclusión

Bootrstap da toda una serie de facilidades para trabajar con él. Desde el primer momento, con una llamada al CDN, puedes empezar a trabajar con sus elementos de manera fácil y sencilla. Bootstrap es un framework que agilizará mucho la creación de páginas web y sus adaptaciones de móvil a ordenador.