Krijimi i një mjedisi zhvillimi Bootstrap

Në këtë artikull Ne do të fillojmë duke krijuar një mjedis zhvillimi Bootstrap. Siç e shpjeguam në një artikull të mëparshëm, Bootstrap është një kornizë që na e bën të lehtë krijimin e faqeve që përshtaten automatikisht me çdo madhësi ekrani.

Në fakt, nuk nevojiten mjete speciale. Ju mund ta shkruani lehtësisht kodin në redaktuesin e tekstit në desktopin tuaj. Shumë madje kanë mbështetje për HTML, CSS dhe Javascript. Por, Mjediset e integruara të zhvillimit përfshijnë mjete të tjera që e bëjnë të lehtë për ju shkrimin dhe korrigjimin e kodit.

Krijimi i një mjedisi zhvillimi Bootstrap

Për shijen time, mjedisi më i mirë i integruar i zhvillimit është Visual Studio Code. Por, shumë përdorues të Linux-it nuk e pëlqejnë sepse dërgon telemetrinë në Microsoft. Megjithatë, Ekziston një alternativë që përdor kodin burimor VSCode të quajtur VSCodium që nuk ndan të dhëna me askënd. Kjo eshte versioni të cilin do ta përdorim tani e tutje.

Instalimi i VSCodium

Ne mund të instalojmë VSCodium në mënyrat e mëposhtme:

Snap Store

sudo snap install codium --classic

çantë shpine

flatpak install flathub com.vscodium.codium

Debian dhe derivatet

Ne morëm çelësat e verifikimit

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
Ne shtojmë depon
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
Ne azhurnojmë dhe instalojmë
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Ne marrim çelësat e verifikimit

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

Shtojmë magazinat

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

Për të instaluar ne bëjmë:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Ne mund të përdorim njërën nga këto dy komanda

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

OS papagall

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

Konfigurimi i VSCodium

Në varësi të mënyrës së instalimit, VSCodium mund të jetë në anglisht. Ne mund ta ndryshojmë lehtësisht këtë.

1. Në menynë Files klikoni mbi Preferencat.
2. Klikoni mbi Zgjatje.
3. Ne shkruaj spanjisht në motorin e kërkimit.
4. Klikoni në shtesë Gjuha spanjolle.
5. Fillojmë instalimin duke klikuar Install.
6. Klikoni mbi Ndryshoni gjuhën dhe rinisni.

VSCode ka një koleksion të madh të shtesave që lehtësojnë programimin në gjuhë të ndryshme, dhe ne mund t'i përdorim ato edhe në VSCodium. Le të instalojmë atë që na nevojitet:

1. Klikoni mbi Preferencat.
2. Klikoni mbi Zgjatjet.
3. Ne shkruaj Bootstrap në motorin e kërkimit.
4. Ne zgjedhim atë që thotë Bootstrap 5 & Font Awesome Snippets.
5. Klikoni në instalim

Ne do të shohim përdorimin e kësaj shtesë kur të fillojmë të shkruajmë kodin e faqes. Por, më duhet të bëj një sqarim. Që të funksionojë, duhet të shkruani komandat. Kopjimi dhe ngjitja në këtë rast nuk funksionon.

Marrja e Bootstrap

Bootstrap është në thelb një koleksion i komponentëve. Kur shkruajmë kodin e një faqe interneti të bazuar në Bootstrap gjëja e parë që duhet të bëjmë është t'i tregojmë shfletuesit se ku mund t'i gjejë ato.

Për të marrë Bootstrap ka dy alternativa. E para është ta shkarkoni nga faqe interneti dhe shtoni atë në skedarët e projektit dhe e dyta është të vendosni një lidhje me serverët e vetë projektit. Mund të shkarkohet gjithashtu duke përdorur disa menaxherë paketash (dua të them ata që përdoren nga gjuhë të ndryshme programimi, jo ato të përdorura nga shpërndarjet), por, ne do t'ia lëmë këtë dokumentacionit.

Ju lutem vini re që nëse preferoni të punoni me skedarët e Bootstrap në nivel lokal, do t'ju duhet t'i ngarkoni ato në server me pjesën tjetër të faqes në internet. Nëse lidhni me serverin CDN të projektit, nuk do të jetë e nevojshme.

Nëse shkarkoni paketën Bootstrap do të shihni se ka dy dosje dhe një seri skedarësh. Ne jemi të interesuar vetëm për dy. Nga dosja JS bootstrap.bundle.js dhe nga dosja CSS bootstrap.css.

Kodi për të dy opsionet është pothuajse i njëjtë. Thjesht ndryshoni shtegun e vendndodhjes.

Le të shohim një shembull
Duke përdorur Bootstrap në nivel lokal

Duke përdorur nga projekti CDN

Vendndodhja e skedarit lokal është arbitrare. I vendosa brenda një dosje të quajtur bootrap dhe krijova dy nënfoldera të quajtur JS dhe CSS.

Mos u shqetësoni nëse nuk e keni kuptuar pjesën tjetër të kodit. Ne kujdesemi për këtë në artikullin vijues.

Shënim

Pas publikimit të artikullit zbulova se menaxheri ynë i përmbajtjes nuk tregon kodin HTML por rezultatin. Unë do të ngarkoj shembujt në Github ose të ngjashme dhe do të vendos pamjet e ekranit këtu.