Creando un entorno de desarrollo Bootstrap

VSCodium es un entorno de desarrollo ideal para crear un sitio con 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.

  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

Bootstrap almacenado localmente

Llamando a los componentes de Bootstrap en forma local

Utilizando desde el CDN del proyecto

Utilizando Bootstrap desde un CDN

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.


El contenido del artículo se adhiere a nuestros principios de ética editorial. Para notificar un error pincha aquí.

2 comentarios, deja el tuyo

Deja tu comentario

Tu dirección de correo electrónico no será publicada.

*

*

  1. Responsable de los datos: AB Internet Networks 2008 SL
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

  1.   richo dijo

    es muy avanzado para mi, pero se agradece mucho el tutorial, algun dia me podria servir, gracias

    1.    Jorge dijo

      Hola richo. Parece muy avanzado, pero no lo es (a menos no para fines prácticos). Solo debes tener alguos conceptos claros: servidor web, CDN, editores de código, estructura básica de una página web y poco más.

      Soy desarrollador web y te puedo decir que Bootstrap es un excelente comienzo. Conviene aprenderlo a todo aquel que se inicie en el desarrollo web.

      Nota. Te conviene tener conocimientos básicos de html css antes de comenzar con Bootstrap ;-)