Creazione di un ambiente di sviluppo Bootstrap

In questo articolo Inizieremo creando un ambiente di sviluppo Bootstrap. Come abbiamo spiegato in un articolo precedente, Bootstrap è un framework che ci consente di creare facilmente siti che si adattano automaticamente a qualsiasi dimensione dello schermo.

In realtà, non sono necessari strumenti speciali. Potresti facilmente scrivere il codice nell'editor di testo sul desktop. Molti hanno persino il supporto per HTML, CSS e Javascript. Ma, gli ambienti di sviluppo integrati includono altri strumenti che semplificano la scrittura e la correzione di bozze del codice.

Creazione di un ambiente di sviluppo Bootstrap

Per i miei gusti, il miglior ambiente di sviluppo integrato è Visual Studio Code. Ma a molti utenti Linux non piace perché invia la telemetria a Microsoft. Tuttavia, Esiste un'alternativa che utilizza il codice sorgente VSCode chiamato VSCodium che non condivide i dati con nessuno. Questo è la versione che useremo d'ora in poi.

Installazione di VSCodium

Possiamo installare VSCodium nei seguenti modi:

Snap Store

sudo snap install codium --classic

Pacco piatto

flatpak install flathub com.vscodium.codium

Debian e derivati

Abbiamo le chiavi di verifica

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
Aggiungiamo il repository
echo 'deb [ firmato-by=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| sudo tee /etc/apt/sources.list.d/vscodium.list
Aggiorniamo e installiamo
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Otteniamo le chiavi di verifica

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

Aggiungiamo i repository

Fedora/RHEL/CentOS/RockyLinux: 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 installare facciamo:

Fedora/RHEL/CentOS/RockyLinux: sudo dnf install codium

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Possiamo usare uno di questi due comandi

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Sistema operativo pappagallo

sudo apt update
sudo apt install codium

Nix (sistema operativo)

nix-env -iA nixpkgs.vscodium

Configurazione di VSCodium

A seconda della modalità di installazione, VSCodium potrebbe essere in inglese. Possiamo facilmente cambiarlo.

1. Nel menu File fare clic su Preferenze.
2. Clicca su Estensione.
3. scriviamo spagnolo nel motore di ricerca.
4. Fare clic sull'estensione Lingua Spagnola.
5. Iniziamo l'installazione cliccando su Installa.
6. Clicca su Cambia lingua e riavvia.

VSCode ha una vasta collezione di estensioni che facilitano la programmazione in diversi linguaggi e possiamo usarle anche in VSCodium. Installiamo quello che ci serve:

1. Clicca su Preferenze.
2. Clicca su Estensioni.
3. scriviamo bootstrap nel motore di ricerca.
4. Selezioniamo quello che dice Bootstrap 5 e fantastici frammenti di font.
5. Fare clic su Installa

Vedremo l'uso di questa estensione quando inizieremo a scrivere il codice del sito. Ma devo fare una precisazione. Affinché funzioni, dovrai digitare i comandi. Copia e incolla in questo caso non funziona.

Ottenere Bootstrap

Bootstrap è fondamentalmente una raccolta di componenti. Quando scriviamo il codice di un sito web basato su Bootstrap la prima cosa che dobbiamo fare è dire al browser dove trovarli.

Per ottenere Bootstrap ci sono due alternative. Il primo è scaricarlo dal pagina web e aggiungerlo ai file di progetto e il secondo è mettere un collegamento ai server del progetto stesso. Può anche essere scaricato usando alcuni gestori di pacchetti (intendo quelli usati da diversi linguaggi di programmazione, non quelli usati dalle distribuzioni) ma lo lasciamo alla documentazione.

Si noti che se preferisci lavorare con i file Bootstrap in locale, dovrai caricarli sul server con il resto del sito. Se ti colleghi al server CDN del progetto, non sarà necessario.

Se scarichi il pacchetto Bootstrap vedrai che ci sono due cartelle e una serie di file. Ci interessano solo due. Dalla cartella JS bootstrap.bundle.js e dalla cartella CSS bootstrap.css.

Il codice per entrambe le opzioni è quasi lo stesso. Basta cambiare il percorso della posizione.

Vediamo un esempio
Utilizzo di Bootstrap in locale

Utilizzando dal progetto CDN

La posizione del file locale è arbitraria. Li ho inseriti in una cartella chiamata bootrap e ho creato due sottocartelle chiamate JS e CSS.

Non preoccuparti se non hai capito il resto del codice. Ce ne occuperemo nel prossimo articolo.

Nota

Dopo aver pubblicato l'articolo ho scoperto che il nostro content manager non mostra il codice HTML ma il risultato. Caricherò gli esempi su Github o simili e metterò gli screenshot qui.