Creant un entorn de desenvolupament Bootstrap

En aquest article començarem creant un entorn de desenvolupament Bootstrap. Com expliquem en un article anterior, Bootstrap és un framework que ens facilita la creació de llocs que s'adaptin de manera automàtica a qualsevol mida de pantalla.

En realitat, no cal cap eina especial. Podries tranquil·lament escriure el codi a l'editor de textos del teu escriptori. Molts fins i tot tenen suport per a HTML, CSS i Javscript. Però, els entorns integrats de desenvolupament inclouen altres eines que et faciliten l'escriptura i la correcció del codi.

Creant un entorn de desenvolupament Bootstrap

Pel meu gust, el millor entorn integrat de desenvolupament és Visual Studio Code. Però a molts usuaris de Linux no els agrada perquè envia telemetria a Microsoft. No obstant això, hi ha una alternativa que utilitza el codi font de VSCode anomenada VSCodium que no comparteix dades amb ningú. aquesta és la versió que farem servir a partir d'ara.

Instal·lació de VSCodium

Podem instal·lar VSCodium de les següents formes:

Botiga de Snap

sudo snap install codium --classic

paquet pla

flatpak install flathub com.vscodium.codium

Debian i derivats

Aconseguim les claus de verificació

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
Afegim el repositori
fet '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
Actualitzem i instal·lem
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / RockyLinux / OpenSUSE

Obtenim les claus de verificació

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

Afegim els repositoris

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

Per instal·lar fem:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Podem utilitzar qualsevol d'aquestes dues ordres

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Parrot US

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

Configurant VSCodium

Depenent del mode d'instal·lació, és possible que VSCodium estigui en anglès. Això ho podem canviar de manera fàcil.

1. Al menú Files premem a Preferències.
2. premem en Extensió.
3. Vam escriure spanish al cercador.
4. Polsem sobre l'extensió Llengua espanyola.
5. Iniciem la instal·lació prement a Install.
6. premem en Change Language and restart.

VSCode disposa d'una enorme col·lecció d'extensions que faciliten la programació en els diferents llenguatges i també les podem utilitzar a VSCodium. Instal·larem la que necessitem:

1. premem en Preferències.
2. premem en Extensions.
3. Vam escriure Bootstrap al cercador.
4. Seleccionem la que diu Bootstrap 5 & Font Awesome Snippets.
5. Premem a instal·lar

Ja anirem veient lús daquesta extensió quan comencem a escriure el codi del lloc. Però t'he de fer un aclariment. Perquè funcioni hauràs de tipejar les ordres. Copiar i enganxar en aquest cas no funciona.

Aconseguint Bootstrap

Bootstrap és bàsicament una col·lecció de components. Quan escrivim el codi d'un lloc web basat a Bootstrap el primer que hem de fer és dir al navegador on trobar-les.

Per aconseguir Bootstrap hi ha dues alternatives. La primera és descarregar-lo de la lloc web i afegir-lo als fitxers del projecte i la segona és posar un enllaç als servidors del projecte mateix. També es pot descarregar usant alguns gestors de paquets (em refereixo als utilitzats per diferents llenguatges de programació, no als de les distribucions) però, deixarem aquest tema per a la documentació.

Tingues en compte que si prefereixes treballar amb els fitxers de Bootstrap de forma local, hauràs de pujar-los al servidor amb la resta del lloc web. Si enllaçes al servidor CDN del projecte no caldrà.

Si descarregues el paquet de Bootstrap veuràs que hi ha dues carpetes i una sèrie de fitxers. A nosaltres ens interessen només dos. De la carpeta JS bootstrap.bundle.js i de la carpeta CSS bootstrap.css.

El codi per a totes dues opcions és gairebé el mateix. Només canvieu la ruta d'ubicació.

Vegem-ne un exemple
Utilitzant Bootstrap de manera local

Utilitzant des del CDN del projecte

La ubicació del fitxer local és arbitrària. Jo els vaig posar dins d'una carpeta anomenada bootrap i vaig crear dues subcarpetes anomenades JS i CSS.

No et preocupis si no vas entendre la resta del codi. D'això ens encarreguem al proper article.

Nota

Després de publicar l'article vaig descobrir que el nostre gestor de continguts no mostra el codi HTML sinó el resultat. Els exemples els pujaré a Github o similar i aquí posaré caputres de pantalla.