Vytvorenie vývojového prostredia Bootstrap

V tomto článku Začneme vytvorením vývojového prostredia Bootstrap. Ako sme vysvetlili v predchádzajúcom článku, Bootstrap je rámec, ktorý nám uľahčuje vytváranie stránok, ktoré sa automaticky prispôsobujú akejkoľvek veľkosti obrazovky.

V skutočnosti nie sú potrebné žiadne špeciálne nástroje. Kód môžete jednoducho napísať v textovom editore na pracovnej ploche. Mnohé dokonca podporujú HTML, CSS a Javascript. Ale, integrované vývojové prostredia zahŕňajú ďalšie nástroje, ktoré vám uľahčia písanie a kontrolu kódu.

Vytvorenie vývojového prostredia Bootstrap

Na môj vkus je najlepšie integrované vývojové prostredie Visual Studio Code. Ale mnohým používateľom Linuxu sa to nepáči, pretože odosiela telemetriu spoločnosti Microsoft. napriek tomu Existuje alternatíva, ktorá používa zdrojový kód VSCode s názvom VSCodium, ktorý s nikým nezdieľa údaje. To je verziu ktoré budeme odteraz používať.

Inštalácia VSCodium

VSCodium môžeme nainštalovať nasledujúcimi spôsobmi:

Snap Store

sudo snap install codium --classic

Flatpack

flatpak install flathub com.vscodium.codium

Debian a deriváty

Dostali sme overovacie kľúče

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
Pridáme úložisko
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
Aktualizujeme a inštalujeme
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Dostaneme overovacie kľúče

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

Pridávame úložiská

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

Pre inštaláciu vykonáme:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Môžeme použiť ktorýkoľvek z týchto dvoch príkazov

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

OS Parrot

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

Konfigurácia VSCodium

V závislosti od režimu inštalácie môže byť VSCodium v ​​angličtine. Môžeme to ľahko zmeniť.

1. V ponuke Súbory kliknite na Preferencie.
2. Kliknite na Predĺženie.
3. píšeme španielsky vo vyhľadávači.
4. Kliknite na rozšírenie Španielsky jazyk.
5. Inštaláciu spustíme kliknutím na Inštalovať.
6. Kliknite na Zmeňte jazyk a reštartujte.

VSCode má obrovskú zbierku rozšírení, ktoré uľahčujú programovanie v rôznych jazykoch a môžeme ich použiť aj vo VSCodium. Nainštalujeme ten, ktorý potrebujeme:

1. Kliknite na Preferencie.
2. Kliknite na Prípony.
3. píšeme Bootstrap vo vyhľadávači.
4. Vyberieme ten, ktorý hovorí Bootstrap 5 a úžasné úryvky písma.
5. Kliknite na inštaláciu

Využitie tohto rozšírenia uvidíme, keď začneme písať kód stránky. Musím to však upresniť. Aby to fungovalo, budete musieť zadať príkazy. Kopírovanie a prilepenie v tomto prípade nefunguje.

Získava sa Bootstrap

Bootstrap je v podstate zbierka komponentov. Keď píšeme kód webovej stránky na základe Bootstrap prvá vec, ktorú musíme urobiť, je povedať prehliadaču, kde ich má nájsť.

Ak chcete získať Bootstrap, existujú dve alternatívy. Prvým je stiahnuť si ho z webové stránky a pridajte ho do projektových súborov a druhým je vloženie odkazu na servery samotného projektu. Dá sa stiahnuť aj pomocou niektorých správcov balíkov (myslím tie, ktoré používajú rôzne programovacie jazyky, nie tie, ktoré používajú distribúcie), ale to necháme na dokumentáciu.

Majte na pamäti, že ak chcete pracovať so súbormi Bootstrap lokálne, budete ich musieť nahrať na server so zvyškom webovej stránky. Ak sa pripojíte na server CDN projektu, nebude to potrebné.

Ak si stiahnete balík Bootstrap, uvidíte, že existujú dva priečinky a séria súborov. Nás zaujímajú len dve. Z priečinka JS bootstrap.bundle.js a z priečinka CSS bootstrap.css.

Kód pre obe možnosti je takmer rovnaký. Stačí zmeniť cestu umiestnenia.

Pozrime sa na príklad
Lokálne používanie Bootstrapu

Použitie z projektu CDN

Umiestnenie lokálneho súboru je ľubovoľné. Vložil som ich do priečinka s názvom bootrap a vytvoril som dva podpriečinky s názvom JS a CSS.

Nerobte si starosti, ak ste nerozumeli zvyšku kódu. Postaráme sa o to v nasledujúcom článku.

Poznámka:

Po publikovaní článku som zistil, že náš správca obsahu nezobrazuje HTML kód, ale výsledok. Príklady nahrám na Github alebo podobne a sem dám screenshoty.