Stvaranje Bootstrap razvojnog okruženja

U ovom članku Počet ćemo stvaranjem Bootstrap razvojnog okruženja. Kao što smo objasnili u prethodnom članku, Bootstrap je okvir koji nam olakšava stvaranje stranica koje se automatski prilagođavaju bilo kojoj veličini zaslona.

Zapravo, nisu potrebni nikakvi posebni alati. Možete jednostavno napisati kôd u uređivaču teksta na radnoj površini. Mnogi čak imaju podršku za HTML, CSS i Javascript. Ali, integrirana razvojna okruženja uključuju druge alate koji vam olakšavaju pisanje i lektoriranje koda.

Stvaranje Bootstrap razvojnog okruženja

Za moj ukus, najbolje integrirano razvojno okruženje je Visual Studio Code. No, mnogim korisnicima Linuxa to se ne sviđa jer šalje telemetriju Microsoftu. Štoviše, Postoji alternativa koja koristi VSCode izvorni kod pod nazivom VSCodium koja ne dijeli podatke ni s kim. To je inačici koje ćemo od sada koristiti.

Instalacija VSCodium-a

VSCodium možemo instalirati na sljedeće načine:

Snap Store

sudo snap install codium --classic

Flatpack

flatpak install flathub com.vscodium.codium

Debian i derivati

Imamo ključeve za provjeru

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
Dodamo spremište
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
Ažuriramo i instaliramo
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Dobivamo ključeve za provjeru

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

Dodajemo spremišta

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

Za instalaciju radimo:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Možemo koristiti bilo koju od ove dvije naredbe

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papiga OS

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

Konfiguriranje VSCodiuma

Ovisno o načinu instalacije, VSCodium može biti na engleskom jeziku. To možemo lako promijeniti.

1. U izborniku Datoteke kliknite na Postavke.
2. Kliknite na Nastavak.
3. pišemo Španjolski u tražilici.
4. Kliknite na proširenje Španjolski jezik.
5. Instalaciju pokrećemo klikom na Instaliraj.
6. Kliknite na Promijenite jezik i ponovno pokrenite.

VSCode ima ogromnu kolekciju ekstenzija koje olakšavaju programiranje na različitim jezicima, a možemo ih koristiti i u VSCodiumu. Instalirajmo onaj koji nam treba:

1. Kliknite na Postavke.
2. Kliknite na Proširenja.
3. pišemo Bootstrap u tražilici.
4. Odaberemo onu koja kaže Bootstrap 5 & Font Awesome Snippets.
5. Kliknite na instaliraj

Vidjet ćemo upotrebu ovog proširenja kada počnemo pisati kod stranice. Ali, moram nešto pojasniti. Da bi radilo, morat ćete upisati naredbe. Kopiraj i zalijepi u ovom slučaju ne radi.

Dobivanje Bootstrapa

Bootstrap je u osnovi zbirka komponenti. Kada pišemo kod web stranice temeljen na Bootstrapu prva stvar koju trebamo učiniti je reći pregledniku gdje ih pronaći.

Za dobivanje Bootstrapa postoje dvije mogućnosti. Prvi je da ga preuzmete s web stranica i dodati ga u datoteke projekta, a drugi je staviti poveznicu na poslužitelje samog projekta. Također se može preuzeti pomoću nekih upravitelja paketa (mislim na one koje koriste različiti programski jezici, ne one koje koriste distribucije), ali to ćemo ostaviti dokumentaciji.

Imajte to na umu ako radije radite s Bootstrap datotekama lokalno, morat ćete ih učitati na poslužitelj s ostatkom web stranice. Ako se povežete s CDN poslužiteljem projekta, to neće biti potrebno.

Ako preuzmete Bootstrap paket vidjet ćete da postoje dvije mape i niz datoteka. Zanimaju nas samo dvije. Iz mape JS bootstrap.bundle.js i iz mape CSS bootstrap.css.

Kod za obje opcije je gotovo isti. Samo promijenite putanju lokacije.

Pogledajmo primjer
Lokalno korištenje Bootstrapa

Korištenje iz projekta CDN

Lokacija lokalne datoteke je proizvoljna. Stavio sam ih u mapu pod nazivom bootrap i stvorio dvije podmape pod nazivom JS i CSS.

Ne brinite ako niste razumjeli ostatak koda. O tome ćemo se pobrinuti u sljedećem članku.

Primijetiti

Nakon objave članka otkrio sam da naš upravitelj sadržaja ne prikazuje HTML kod već rezultat. Uploadat ću primjere na Github ili slično i ovdje ću staviti snimke zaslona.