Bootstrap fejlesztői környezet létrehozása

Ebben a cikkben Kezdjük egy Bootstrap fejlesztői környezet létrehozásával. Amint azt egy korábbi cikkünkben kifejtettük, a Bootstrap egy olyan keretrendszer, amely megkönnyíti számunkra olyan webhelyek létrehozását, amelyek automatikusan alkalmazkodnak bármilyen képernyőmérethez.

Valójában nincs szükség speciális szerszámokra. Könnyen beírhatja a kódot az asztali szövegszerkesztőbe. Sokan még a HTML-t, a CSS-t és a Javascriptet is támogatják. De, az integrált fejlesztői környezetek más eszközöket is tartalmaznak, amelyek megkönnyítik a kód írását és lektorálását.

Bootstrap fejlesztői környezet létrehozása

Az én ízlésem szerint a legjobb integrált fejlesztői környezet a Visual Studio Code. De sok Linux-felhasználó nem szereti, mert telemetriát küld a Microsoftnak. Mindazonáltal, Van egy alternatíva, amely a VSCode nevű VSCode forráskódot használja, és nem oszt meg adatokat senkivel. Vagyis a verzió amelyet mostantól fogunk használni.

A VSCodium telepítése

A VSCodiumot a következő módokon telepíthetjük:

Snap Store

sudo snap install codium --classic

lapos csomag

flatpak install flathub com.vscodium.codium

Debian és származékai

Megkaptuk az ellenőrző kulcsokat

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
Hozzáadjuk az adattárat
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
Frissítjük és telepítjük
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Megkapjuk az ellenőrző kulcsokat

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

Hozzáadjuk a repozitóriumokat

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

A telepítéshez:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

A két parancs bármelyikét használhatjuk

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

papagáj OS

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

A VSCodium konfigurálása

A telepítési módtól függően a VSCodium angol nyelvű lehet. Ezen könnyen változtathatunk.

1. A Fájlok menüben kattintson a gombra Preferenciák.
2. Kattintson Kiterjesztés.
3. Írunk spanyol a keresőben.
4. Kattintson a bővítményre Spanyol Nyelvi.
5. A telepítést a gombra kattintva indítjuk el Telepítése.
6. Kattintson Nyelv módosítása és újraindítás.

A VSCode hatalmas bővítménygyűjteményt tartalmaz, amelyek megkönnyítik a programozást különböző nyelveken, és ezeket a VSCodiumban is használhatjuk. Telepítsük azt, amelyikre szükségünk van:

1. Kattintson Preferenciák.
2. Kattintson Hosszabbítások.
3. Írunk Bootstrap a keresőben.
4. Azt választjuk, amelyik azt mondja Bootstrap 5 és betűtípus fantasztikus kivonatok.
5. Kattintson a telepítés gombra

Látni fogjuk ennek a kiterjesztésnek a használatát, amikor elkezdjük írni a webhely kódját. De pontosítanom kell. Ahhoz, hogy működjön, be kell írnia a parancsokat. A másolás és beillesztés ebben az esetben nem működik.

Bootstrap beszerzése

A Bootstrap alapvetően összetevők gyűjteménye. Amikor Bootstrap alapján írjuk meg egy weboldal kódját először meg kell mondanunk a böngészőnek, hogy hol találja meg őket.

A Bootstrap beszerzéséhez két lehetőség van. Az első az, hogy töltse le a weboldal és add hozzá a projektfájlokhoz, a második pedig egy link elhelyezése magának a projektnek a szervereire. Néhány csomagkezelővel is letölthető (a különböző programozási nyelvek által használtakra gondolok, nem a disztribúciók által használtakra), de ezt hagyjuk a dokumentációra.

Ne feledje ezt Ha inkább helyben szeretne dolgozni a Bootstrap fájlokkal, akkor fel kell töltenie őket a szerverre a weboldal többi részével. Ha a projekt CDN-kiszolgálójára hivatkozik, akkor erre nem lesz szükség.

Ha letölti a Bootstrap csomagot, látni fogja, hogy két mappa és egy sor fájl van. Minket csak kettő érdekel. A JS mappából bootstrap.bundle.js és a CSS mappából bootstrap.css.

Mindkét opció kódja majdnem ugyanaz. Csak módosítsa a hely elérési útját.

Lássunk egy példát
A Bootstrap helyi használata

Használata a CDN projektből

A helyi fájl helye tetszőleges. Behelyeztem őket egy bootrap nevű mappába, és létrehoztam két almappát JS és CSS néven.

Ne aggódjon, ha nem értette a kód többi részét. A következő cikkben erről gondoskodunk.

jegyzet

A cikk közzététele után rájöttem, hogy a tartalomkezelőnk nem a HTML kódot mutatja, hanem az eredményt. Fel fogom tölteni a példákat Githubba vagy hasonlóba, és ide teszek fel screenshotokat.