Crearea unui mediu de dezvoltare Bootstrap

În acest articol Vom începe prin a crea un mediu de dezvoltare Bootstrap. După cum am explicat într-un articol anterior, Bootstrap este un cadru care ne facilitează crearea de site-uri care se adaptează automat la orice dimensiune a ecranului.

De fapt, nu sunt necesare instrumente speciale. Puteți scrie cu ușurință codul în editorul de text de pe desktop. Mulți chiar au suport pentru HTML, CSS și Javascript. Dar, mediile de dezvoltare integrate includ alte instrumente care vă facilitează scrierea și corectarea codului.

Crearea unui mediu de dezvoltare Bootstrap

Pentru gustul meu, cel mai bun mediu de dezvoltare integrat este Visual Studio Code. Dar, multor utilizatori Linux nu le place, deoarece trimite telemetrie către Microsoft. Cu toate acestea, Există o alternativă care utilizează codul sursă VSCode numită VSCodium care nu partajează date cu nimeni. Acesta este versiunea pe care o vom folosi de acum înainte.

Instalarea VSCodium

Putem instala VSCodium în următoarele moduri:

Snap Store

sudo snap install codium --classic

ambalaj plat

flatpak install flathub com.vscodium.codium

Debian și derivate

Avem cheile de verificare

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
Adăugăm depozitul
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
Actualizăm și instalăm
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Primim cheile de verificare

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

Adăugăm depozitele

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

Pentru a instala facem:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Putem folosi oricare dintre aceste două comenzi

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

OS de papagal

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

Configurarea VSCodium

În funcție de modul de instalare, VSCodium poate fi în limba engleză. Putem schimba cu ușurință acest lucru.

1. În meniul Fișiere faceți clic pe Preferințe.
2. Click pe Extensie.
3. Ne scrie Spaniolă în motorul de căutare.
4. Faceți clic pe extensie Limba spaniolă.
5. Începem instalarea făcând clic pe Instalaţi.
6. Click pe Schimbați limba și reporniți.

VSCode are o colecție imensă de extensii care facilitează programarea în diferite limbi și le putem folosi și în VSCodium. Hai să-l instalăm pe cel de care avem nevoie:

1. Click pe Preferințe.
2. Click pe Extensii.
3. Ne scrie Bootstrap în motorul de căutare.
4. O selectăm pe cea care spune Bootstrap 5 și Fragmente minunate de font.
5. Faceți clic pe instalare

Vom vedea utilizarea acestei extensii când vom începe să scriem codul site-ului. Dar, trebuie să fac o precizare. Pentru ca acesta să funcționeze va trebui să tastați comenzile. Copiați și lipiți în acest caz nu funcționează.

Obținerea Bootstrap

Bootstrap este practic o colecție de componente. Când scriem codul unui site web bazat pe Bootstrap primul lucru pe care trebuie să-l facem este să spunem browserului unde să le găsim.

Pentru a obține Bootstrap există două alternative. Primul este să îl descărcați de pe site web și adăugați-l la fișierele de proiect, iar al doilea este să puneți un link către serverele proiectului în sine. De asemenea, poate fi descărcat folosind niște manageri de pachete (mă refer la cei folosiți de diferite limbaje de programare, nu de cei folosiți de distribuții) dar, vom lăsa asta pe seama documentației.

Rețineți că dacă preferați să lucrați cu fișierele Bootstrap local, va trebui să le încărcați pe server cu restul site-ului. Dacă vă conectați la serverul CDN al proiectului, nu va fi necesar.

Dacă descărcați pachetul Bootstrap, veți vedea că există două foldere și o serie de fișiere. Pe noi ne interesează doar două. Din folderul JS bootstrap.bundle.js și din folderul CSS bootstrap.css.

Codul pentru ambele opțiuni este aproape același. Schimbați doar calea locației.

Să ne uităm la un exemplu
Folosind Bootstrap local

Folosind din proiectul CDN

Locația fișierului local este arbitrară. Le-am pus într-un folder numit bootrap și am creat două subfoldere numite JS și CSS.

Nu vă faceți griji dacă nu ați înțeles restul codului. Ne ocupăm de asta în următorul articol.

Nota

După publicarea articolului am descoperit că managerul nostru de conținut nu arată codul HTML, ci rezultatul. Voi încărca exemplele pe Github sau similar și voi pune capturi de ecran aici.