¿Qué es Bootstrap? Aprende Bootstrap con esta guía completa

Publicado 13/10/2021

Si quieres aprender a programar te va a ser de muy buena ayuda saber qué es Bootstrap. Esto es un framework para desarrollar sitios web responsive y aplicaciones web.

En este artículo vamos a explicarte para qué se usa, cómo configurarlo, las ventajas de este framework y mucho más. ¡No te lo pierdas que empezamos!

¿Qué es Bootstrap?

Bootstrap es un framework CSS que se utiliza en el frontend para desarrollar aplicaciones que se adapta a todos los dispositivos, ya sea móvil, PC o tablet.

Fue desarrollado por Twitter para unificar todas las herramientas internas de su compañía, llamado Twitter Blueprint. Tras varias actualizaciones, este framework se liberó como un proyecto de código abierto y, es aquí cuando cambió su nombre al actual.

Bootstrap combina JavaScript y CSS para aumentar el estilo de una página hecha en HTML y puede hacer mucho más que cambiar colores.

Esta herramienta ofrece gran variedad de recursos para configurar los estilos de una página web de forma simple y eficiente. Además, están diseñadas para funcionar en cualquier tipo de dispositivo de una forma organizada.

Para qué se usa Bootstrap

Ya sabemos bootstrap qué es, ahora vamos a explicar para qué se utiliza:

Diseño adaptado a todos los dispositivos

El diseño responsive es una característica fundamental para que Google tenga en cuenta en su buscador una página web. Para ello, Bootstrap funciona con el elemento “div” y la utilización del class container.

El elemento “div” sirve para crear tablas y estructurar una página, haciendo un diseño web responsive. Sin embargo, existen limitaciones para establecer el tamaño de las columnas, por lo que no se pudo utilizar para dispositivos pequeños.

Para solucionar esto, Bootstrap asigna una característica de class container al elemento “div” para que establezca las dimensiones determinadas de los elementos que se inserte en ese espacio.

Bootstrap funciona con 3 tipos de containers:

Container: conjunto de una propiedad de ancho máximo, que establece el tamaño de la pantalla idea para elaborar el diseño web.
Container-fluid: el tamaño total de la pantalla del dispositivo para determinar el diseño. Esto es el ancho 100% en todos los límites de la pantalla.
Container-{breakpoint}: considera el ancho 100% hasta alcanzar un determinado tamaño.

Biblioteca de componentes

Otra característica de Bootstrap es la cantidad de componentes que se pueden utilizar para facilitar una mejor interacción y comunicación con el usuario, como carruseles, barras de navegación, etc.

Bootstrap funciones

Este framework está compuesto por un conjunto de archivos CSS y JavaScript que se encarga de atribuir unas características determinadas a los elementos de una página.

Encontramos un archivo principal que se llama bootstrap.css y contiene una definición para cada uno de los elementos que se utilizan. Está compuesto por dos directorios:

CSS: tiene todos los archivos que se necesitan para estilizar los elementos.
JS: es el que se encarga de ejecutar el estilo en las aplicaciones que necesitan una manipulación interactiva.

Para atribuir una característica a un elemento, tenemos que informar a la clase en la propiedad “class” del elemento que será estilizado.

Cómo descargar Bootstrap

Para saber cómo instalar bootstrap, hay varias maneras. Las formas que más se utilizan son utilizando su CDN o descargando el código en local. También hay otras formas que las puedes ver en la página web de Bootstrap.

Utilizando CDN

En esta forma de configurar Bootstrap tenemos que tener en cuenta que hay que estar conectado siempre a Internet. Para ello, tenemos que añadir a la etiqueta link el enlace al archivo bootstrap.min.css en el head:

Y agregar a las etiquetas script los enlaces a los archivos javascript al finalizar el body:

Descargando el código

En este método, al contrario que en el caso anterior, no hace falta internet para poder usar este framework. Para la instalación de Bootstrap en la página web, tienes que seguir los siguientes pasos.

Vamos a la documentación de la página web de Bootstrap y nos descargamos el CSS y JS compilado.
Además, nos tenemos que descargar Jquery, desde su página oficial, y seleccionamos la opción comprimida.
A continuación, nos descargamos Popper. Esto es una librería de JavaScript.
Por último, incluimos todos los archivos en el código HTML.

Ventajas de usar Bootstrap

Ya hemos visto Bootstrap qué es y para qué sirve. Ahora tenemos que hablar de las ventajas que tiene utilizar ese framework para los desarrolladores.

1. Imágenes responsive

Gracias al código de Bootstrap, redimensiona de forma automática las imágenes en función del tamaño de la pantalla. Solamente tienes que agregar la clase .img-responsive a tus imágenes y listo.

2. Componentes

Este framework cuenta con un montón de componentes que puedes añadir fácilmente a tu página web. Además, cualquier elemento que añadas se hará responsive en cualquier dispositivo.

3. Gran Comunidad

Al ser un framework de código abierto, Bootstrap tiene una comunidad muy activa. Esta comunidad es muy interesante ya que contribuyen a actualizar sus versiones, mantener al día su documentación y, además, tiene un blog con noticias y consejo sobre esta herramienta.

4. Customización

Con Bootstrap puedes personalizar la funcionalidad que quieres añadir en tu descarga, para evitar que tu web pese demasiado. Para hacer esto tan solo tienes que ir a la página de personalización y descarga e indicar las funciones que no necesitar. Con esto reducirás el peso de tu archivo y obtendrás una mayor velocidad de carga web.

Si quieres saber más sobre bootstrap y dedicarte al desarrollo web, en CODE SPACE tenemos el Bootcamp Full Stack Web Development donde te prepararemos trabajar de ello.

¡Nos vemos en el siguiente artículo!

Entrada anterior

Alliantum, empresa partner de CODE SPACE

Entrada siguiente

Ejercicio IMINT de Enrique Lauroba