Kreiranje Bootstrap razvojnog okruženja

U ovom članku Počećemo kreiranjem Bootstrap razvojnog okruženja. Kao što smo objasnili u prethodnom članku, Bootstrap je okvir koji nam olakšava kreiranje web lokacija koje se automatski prilagođavaju bilo kojoj veličini ekrana.

Zapravo, nisu potrebni posebni alati. Možete jednostavno napisati kod 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.

Kreiranje Bootstrap razvojnog okruženja

Za moj ukus, najbolje integrisano razvojno okruženje je Visual Studio Code. Ali, mnogim korisnicima Linuxa to se ne sviđa jer šalje telemetriju Microsoftu. ipak, Postoji alternativa koja koristi VSCode izvorni kod pod nazivom VSCodium koji ne dijeli podatke ni sa kim. To je verzija koje ćemo od sada koristiti.

Instaliranje VSCodium

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

Snap Store

sudo snap install codium --classic

flat pack

flatpak install flathub com.vscodium.codium

Debian i derivati

Imamo ključeve za verifikaciju

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

Dobijamo verifikacione ključeve

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

Mi 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 ugradnju 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

Parrot OS

sudo apt update
sudo apt install codium

Nix(OS)

nix-env -iA nixpkgs.vscodium

Konfiguriranje VSCodium

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

1. U meniju Datoteke kliknite na Postavke.
2. Kliknite na produžetak.
3. Mi pišemo španski u pretraživaču.
4. Kliknite na ekstenziju Španjolski jezik.
5. Instalaciju započinjemo klikom na Instaliraj.
6. Kliknite na Promijenite jezik i ponovo pokrenite.

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

1. Kliknite na Postavke.
2. Kliknite na Proširenja.
3. Mi pišemo Bootstrap u pretraživaču.
4. Odaberemo onaj koji kaže Bootstrap 5 & Font Awesome Snippets.
5. Kliknite na instaliraj

Videćemo upotrebu ove ekstenzije kada počnemo da pišemo kod sajta. Ali, moram da dam pojašnjenje. Da bi to funkcionisalo, moraćete da ukucate komande. Kopiranje i lijepljenje u ovom slučaju ne funkcionira.

Getting Bootstrap

Bootstrap je u osnovi skup komponenti. Kada pišemo kod web stranice baziran na Bootstrapu prva stvar koju treba da uradimo je da kažemo pretraživaču gde da ih pronađe.

Da biste dobili Bootstrap, postoje dvije alternative. Prvi je da ga preuzmete sa web stranica i dodajte ga u projektne datoteke, a drugo je da stavite link na servere samog projekta. Takođe se može preuzeti pomoću nekih menadžera paketa (mislim na one koje koriste različiti programski jezici, a ne one koje koriste distribucije), ali to ćemo ostaviti dokumentaciji.

Imajte to na umu ako više volite da radite sa Bootstrap datotekama lokalno, moraćete da ih otpremite na server sa ostatkom web stranice. Ako se povežete sa CDN serverom projekta, to neće biti potrebno.

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

Kod za obje opcije je skoro 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 folder koji se zove bootrap i napravio dva podfoldera pod nazivom JS i CSS.

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

nota

Nakon objavljivanja članka otkrio sam da naš content manager ne prikazuje HTML kod već rezultat. Ja ću postaviti primjere na Github ili slično i ovdje ću staviti screenshotove.