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.
- A Fájlok menüben kattintson a gombra Preferenciák.
- Kattintson Kiterjesztés.
- Írunk spanyol a keresőben.
- Kattintson a bővítményre Spanyol Nyelvi.
- A telepítést a gombra kattintva indítjuk el Telepítése.
- 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:
- Kattintson Preferenciák.
- Kattintson Hosszabbítások.
- Írunk Bootstrap a keresőben.
- Azt választjuk, amelyik azt mondja Bootstrap 5 és betűtípus fantasztikus kivonatok.
- 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
A Bootstrap összetevők helyi hívása
Használata a CDN projektből
HTML-kód, amely betölti a Bootstrap összetevőket egy CDN-rő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.
Számomra nagyon fejlett, de az oktatóprogramot nagyon nagyra értékeljük, egyszer majd segítségemre lehet, köszönöm
Hello gazdag. Nagyon fejlettnek tűnik, de nem az (legalábbis gyakorlati szempontból nem). Csak néhány világos koncepcióval kell rendelkeznie: webszerver, CDN, kódszerkesztők, a weboldal alapvető szerkezete és kevés más.
Webfejlesztő vagyok, és elmondhatom, hogy a Bootstrap nagyszerű kezdet. Mindenkinek meg kell tanulnia, aki elkezdi a webfejlesztést.
Jegyzet. Alapvető ismeretekkel kell rendelkezned a html css-ről, mielőtt elkezded a Bootstrap használatát ;-)
Mi az a CDN szerver? a helyi forma ellentéte?
Pontos.
Ahelyett, hogy a szükséges fájlok magán a weben lennének, a Bootstrap fájljait használják.