Creando un entorno de desarrollo Bootstrap

En este artículo comenzaremos creando un entorno de desarrollo Bootstrap. Cómo explicamos en un artículo anterior, Bootstrap es un framework que nos facilita la creación de sitios que se adapten de manera automática a cualquier tamaño de pantalla.

En realidad, no se necesita ninguna herramienta especial. Podrías tranquilamente escribir el código en el editor de textos de tu escritorio. Muchos incluso tienen soporte para HTML, CSS y Javscript. Pero, los entornos integrados de desarrollo incluyen otras herramientas que te facilitan la escritura y corrección del código.

Creando un entorno de desarrollo Bootstrap

Para mi gusto, el mejor entorno integrado de desarrollo es Visual Studio Code. Pero, a muchos usuarios de Linux no les gusta porque envía telemetría a Microsoft. Sin embargo, existe una alternativa que utiliza el código fuente de VSCode denominada VSCodium que no comparte datos con nadie. Esa es la versión que utilizaremos a partir de ahora.

Instalación de VSCodium

Podemos instalar VSCodium de las siguientes formas:

Tienda de Snap

sudo snap install codium --classic

flatpack

flatpak install flathub com.vscodium.codium

Debian y derivados

Conseguimos las llaves de verificación

wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg \
| gpg --dearmor \
| sudo dd of=/usr/share/keyrings/vscodium-archive-keyring.gpg
Añadimos el repositorio
echo ‘deb [ signed-by=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://bit.ly/3y5ZeIQ vscodium main’ \
| sudo tee /etc/apt/sources.list.d/vscodium.list
Actualizamos e instalamos
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / RockyLinux / OpenSUSE

Obtenemos las llaves de verificación

sudo rpmkeys --import https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg

Añadimos los repositorios

Fedora/RHEL/CentOS/Rocky Linux: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=download.vscodium.com\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/yum.repos.d/vscodium.repo

OpenSUSE/SUSE : printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=gitlab.com_paulcarroty_vscodium_repo\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/zypp/repos.d/vscodium.repo

Para instalar hacemos:

Fedora/RHEL/CentOS/Rocky Linux: sudo dnf install codium

OpenSUSE/SUSE: sudo zypper in codium

Arch Linux

Podemos utilizar cualquiera de estos dos comandos

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Parrot OS

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

Configurando VSCodium

Dependiendo del modo de instalación, es posible que VSCodium esté en inglés. Esto lo podemos cambiar de forma fácil.

1. En el menú Files pulsamos en Preferences.
2. Pulsamos en Extension.
3. Escribimos spanish en el buscador.
4. Pulsamos sobre la extensión Spanish Language.
5. Iniciamos la instalación pulsando en Install.
6. Pulsamos en Change Language and restart.

VSCode dispone de una enorme colección de extensiones que facilitan la programación en los diferentes lenguajes y, también las podemos utilizar en VSCodium. Vamos a instalar la que necesitamos:

1. Pulsamos en Preferencias.
2. Pulsamos en Extensiones.
3. Escribimos Bootstrap en el buscador.
4. Seleccionamos la que dice Bootstrap 5 & Font Awesome Snippets.
5. Pulsamos en instalar

Ya iremos viendo el uso de esta extensión cuando comencemos a escribir el código del sitio. Pero, tengo que hacerte una aclaración. Para que funcione tendrás que tipear los comandos. Copiar y pegar en este caso no funciona.

Consiguiendo Bootstrap

Bootstrap es básicamente una colección de componentes. Cuando escribimos el código de un sitio web basado en Bootstrap lo primero que debemos hacer es decirle al navegador donde encontrarlas.

Para conseguir Bootstrap hay dos alternativas. La primera es descargarlo de la página web y agregarlo a los archivos del proyecto y la segunda es poner un enlace a los servidores del proyecto mismo.  También se puede descargar usando algunos gestores de paquetes (me refiero a los utilizados por diferentes lenguajes de programación, no a los de las distribuciones) pero, dejaremos ese tema para la documentación.

Ten en cuenta que si prefieres trabajar con los archivos de Bootstrap en forma local, deberás subirlos al servidor con el resto del sitio web. Si enlazas al servidor CDN del proyecto no hará falta.

Si descargas el paquete de Bootstrap verás que hay dos carpetas y una serie de archivos. A nosotros nos interesan solo dos. De la carpeta JS bootstrap.bundle.js y de la carpeta CSS bootstrap.css.

El código para ambas opciones es casi el mismo. Solo cambia la ruta de ubicación.

Veamos un ejemplo
Utilizando Bootstrap en forma local

Utilizando desde el CDN del proyecto

La ubicación del archivo local es arbitraria. Yo los puse dentro de una carpeta llamada bootrap y creé dos subcarpetas llamadas JS y CSS.

No te preocupes si no entendiste el resto del código. De eso nos encargamos en el próximo artículo.

Nota

Despues de publicar el artículo descubrí que nuestro gestor de contenidos no muestra el código HTML sino el reusltado. Los ejemplos los voy a subir a Github o similar y aquí pondré caputras de pantallaa.