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://download.vscodium.com/debs 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.
- En el menú Files pulsamos en Preferences.
- Pulsamos en Extension.
- Escribimos spanish en el buscador.
- Pulsamos sobre la extensión Spanish Language.
- Iniciamos la instalación pulsando en Install.
- 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:
- Pulsamos en Preferencias.
- Pulsamos en Extensiones.
- Escribimos Bootstrap en el buscador.
- Seleccionamos la que dice Bootstrap 5 & Font Awesome Snippets.
- 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
Llamando a los componentes de Bootstrap en forma local
Utilizando desde el CDN del proyecto
Código HTML que carga los componentes Bootstrap desde un CDN
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.
